/* b3nedits.com. One stylesheet for the whole site: a warm near-black page, glass panels (a 3% white fill, an 8%
   hairline, 20px blur, 24px corners, pill buttons), B3N's amber for every accent (blue on the brands side), Inter at 300 for
   copy and 800 for headings, a monospace status line, a floating glass capsule header, a hero with one breathing
   amber glow, a vignette, light noise and a glass stage that will hold the demo, glass tier cards with a gold
   crown astride the highlighted one, and a one-line footer.
   The brands side (html[data-side="brands"]) is the same dark design with a blue accent.
   No entrance animations anywhere: every word is on screen the moment the page paints. */


/* the fonts (owner, 2026-09-27: "when I refresh the page the text sometimes gets smaller or bigger"). Inter was loaded from
   Google Fonts with display=optional: a visit where the font missed its first 100ms stayed in the system font for good,
   the next (cached) visit had Inter, so the size changed between reloads. Now Inter is served from this site
   (/fonts, the variable font, weights 300 to 800, its Latin subset, taken from Google Fonts' Inter v20), preloaded by
   every page and swapped in when it arrives; until then "Inter Fallback" (Arial with Inter's metrics: next/font's
   size-adjust and ascent, descent and line-gap overrides for the light weights; for the bold ones Arial Bold is scaled
   to Inter 800's width, measured on the B3NEDITS heading: 101.84%, with the same ascent and descent after scaling) fills
   the same space, so the swap does not move the page.
   The monospace lines use the system stack (ui-monospace): nothing to load, so nothing to swap. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/fonts/inter-latin-v20.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: 'Inter Fallback'; font-weight: 300 500; src: local('Arial'), local('ArialMT'); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 600 800; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 101.84%; ascent-override: 95.12%; descent-override: 23.71%; line-gap-override: 0%; }

:root {
  --font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* page */
  --bg: #070503;
  --ink: #f5f0eb;
  --ink-2: #a89f95;
  --ink-3: #8a827c;
  --ink-rgb: 245, 240, 235;
  --border: rgba(255, 255, 255, .08);
  --hair-2: rgba(255, 255, 255, .16);

  /* glass */
  --glass-bg: rgba(255, 255, 255, .03);
  --glass-border: rgba(255, 255, 255, .08);
  --glass-top: rgba(255, 255, 255, .07);
  --glass-blur: 20px;
  --radius: 24px;
  --radius-sm: 14px;

  /* accent: amber, hover amber, dark ink on it; the RGB triple mixes it at any alpha */
  --accent: #ffb340;
  --accent-hover: #ffc266;
  --on-accent: #08090c;
  --accent-rgb: 255, 179, 64;
  --accent-grad: linear-gradient(135deg, #ffb340 0%, #ff8a3d 100%);
  /* the veil's Ember red-orange (the field at hueShift 225: its lit pixels measure rgb(87, 26, 0), hue 18, in headless Chrome), lifted
     so the glow reads at the same alphas the amber did: the ground of every hero and the fallback under the canvas */
  --veil-rgb: 196, 80, 30;
  /* the dock's hover (their fill, glow and border in Ember), the glow behind the mark and on it */
  --hover-rgb: 255, 122, 40;
  --glow-rgb: 255, 150, 50;
  --mark-glow-rgb: 255, 140, 40;
  /* the join button: the amber gradient, dark ink on it */
  --join-grad: linear-gradient(135deg, #ffe0a8 0%, #ff9a3c 100%);
  --join-grad-hover: linear-gradient(135deg, #ffe9bf 0%, #ffa94f 100%);
  --join-ink: #1a1206;


  /* the recessed well behind the toggle */
  --well-fill: rgba(255, 255, 255, .03);
  --well-border: rgba(255, 255, 255, .09);
  --well-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .04);
  --well-ink: rgba(240, 232, 214, .62);
  --well-ink-hover: rgba(240, 232, 214, .9);
  --well-pill: #f5f5f7;             /* the current side: a white pill with black text on the dark side (owner, 2026-09-25) */
  --well-pill-ink: #08090c;

  /* the contact panel and the form messages */
  --panel-bg: rgba(12, 9, 7, .62);
  --panel-shadow: 0 18px 60px rgba(0, 0, 0, .55);
  --good-ink: #8fe0a6; --good-bg: rgba(46, 160, 67, .12); --good-line: rgba(46, 160, 67, .35);
  --bad-ink: #ff9b8f; --bad-bg: rgba(229, 72, 77, .1); --bad-line: rgba(229, 72, 77, .38);

  /* shadows */
  --shadow-card: 0 1px 0 rgba(0, 0, 0, .3), 0 22px 50px -24px rgba(0, 0, 0, .8);
  --shadow-card-hover: 0 1px 0 rgba(0, 0, 0, .3), 0 32px 70px -26px rgba(0, 0, 0, .85), 0 0 44px -22px rgba(var(--accent-rgb), .4);

  /* shape and motion */
  --max-width: 1280px;
  --header-h: 96px;                /* 20px gap + 66px dock + 10px of air: what the page slides under */
  --ease-smooth: cubic-bezier(.25, .46, .45, .94);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-card: cubic-bezier(.33, 1, .68, 1);
}

/* THE BRANDS SIDE: the same dark design; only the accent changes, to blue with a touch of violet (owner, 2026-09-25).
   Dark ink on the blue gradient measures 4.7:1 at its deepest end; the veil runs at AExploit's own hueShift (20). */
html[data-side="brands"] {
  --accent: #5b8cff;
  --accent-hover: #7ea4ff;
  --on-accent: #08090c;
  --accent-rgb: 91, 140, 255;
  --accent-grad: linear-gradient(135deg, #9fb8ff 0%, #5b6cff 100%);
  --veil-rgb: 70, 96, 230;
  --hover-rgb: 91, 140, 255;
  --glow-rgb: 91, 140, 255;
  --mark-glow-rgb: 110, 150, 255;
  --join-grad: linear-gradient(135deg, #9fb8ff 0%, #5b6cff 100%);
  --join-grad-hover: linear-gradient(135deg, #b3c6ff 0%, #6f7dff 100%);
  --join-ink: #0a0e24;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 16px;
  overflow-y: scroll; scrollbar-gutter: stable;
  background: var(--bg);
  color-scheme: dark;
  scroll-behavior: auto;
  scroll-padding-top: 88px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  display: flex; flex-direction: column; min-height: max(100vh, 700px);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.7;
  background-color: var(--bg);
  color: var(--ink-2);
}
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
svg, img { display: block; }
img { max-width: 100%; height: auto; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.accent {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: var(--bg);
  font-weight: 600; transition: top .2s;
}
.skip:focus { top: 12px; }

/* ---------- the dock: the header bar ---------- */
/* Source: AExploit's cube dock, copied value for value from the inline style of their header section (2026-09-25):
   the container, the glass dock, the two sections, the 44px items with their sheen, hover and tooltip, the logo slot,
   the mobile trigger, the bottom drawer and its overlay, and their 768px rule. Only the symbols and names are ours.
   Ours differs in colour only where the palette does (Ember, owner, 2026-09-25): the hover's blue fill, glow and border
   and the drawer's blue-black are their ember equivalents (blue on the brands side, through --hover-rgb). Our additions, each marked: the amber state on the open page's item,
   the kept right item on phones (their cart; ours is Discord, or Contact on the brands side), the drawer hidden from the
   keyboard while closed, the two-wide amber Discord item and the glow behind the logo. */
.header-group { position: relative; z-index: 10000; margin-bottom: var(--header-h); }
.cube-dock-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  justify-content: center;
  width: auto;
  max-width: 95%;
}
.cube-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  gap: 0;
  padding: 10px;
  border-radius: 24px;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);
}
.dock-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  position: relative;
}
.dock-left { flex: 1 1 0; justify-content: flex-start; }
.dock-right { flex: 1 1 0; justify-content: flex-end; }
.dock-logo-center { flex: 0 0 auto; justify-content: center; padding: 0 10px; }
.cube-dock-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  transition: all .3s cubic-bezier(.25, .8, .25, 1);
  text-decoration: none;
  color: #fff;
  overflow: visible;
}
.cube-dock-item:hover {
  transform: translateY(-5px) scale(1.1);
  background: rgba(var(--hover-rgb), .2);
  box-shadow: 0 5px 15px rgba(var(--hover-rgb), .4);
  border: 1px solid rgba(var(--hover-rgb), .5);
  z-index: 10;
}
.cube-dock-item svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: all .3s ease;
}
.cube-dock-item:hover svg {
  fill: #fff;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .5));
}
.cube-dock-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0, 0, 0, .8);
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: all .3s ease;
  margin-top: 15px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .1);
}
.cube-dock-item:hover .cube-dock-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ours: the label also shows on keyboard focus */
.cube-dock-item:focus-visible .cube-dock-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
.cube-dock-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
/* ours: the open page's item holds the amber state */
.cube-dock-item.is-active, .cube-dock-item.is-active:hover { background: rgba(var(--accent-rgb), .14); border: 1px solid rgba(var(--accent-rgb), .45); box-shadow: 0 5px 15px rgba(var(--accent-rgb), .25); }
.dock-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}
.dock-logo img { height: auto; object-fit: contain; }
/* ours: the mark is 19px wide against their 40px logo; 10.5px each side keeps their 40px slot and the gaps around it */
.dock-logo-center img { margin: 0 10.5px; }
.dock-logo.mobile-logo {
  display: none;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.dock-mobile-trigger {
  display: none;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  border-radius: 12px;
  transition: background .3s;
}
.dock-mobile-trigger:hover { background: rgba(255, 255, 255, .1); }
.dock-drawer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  background: rgba(18, 8, 4, .85);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 24px;
  padding: 30px;
  z-index: 999;
  transition: transform .5s cubic-bezier(.19, 1, .22, 1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dock-drawer::-webkit-scrollbar { width: 6px; }
.dock-drawer::-webkit-scrollbar-track { background: rgba(255, 255, 255, .05); border-radius: 10px; }
.dock-drawer::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 10px; }
.dock-drawer.is-open { transform: translateX(-50%) translateY(0); }
/* ours: while closed the drawer is out of the keyboard's reach too */
.dock-drawer:not(.is-open) { visibility: hidden; transition: transform .5s cubic-bezier(.19, 1, .22, 1), visibility 0s linear .5s; }
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.drawer-title { font-size: 1.4rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.drawer-close {
  background: rgba(255, 255, 255, .1);
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.drawer-close:hover { background: rgba(255, 255, 255, .2); transform: rotate(90deg); }
.drawer-links { display: flex; flex-direction: column; gap: 12px; }
.drawer-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .03);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: all .2s cubic-bezier(.25, .8, .25, 1);
  border: 1px solid transparent;
}
.drawer-link:hover {
  background: rgba(255, 255, 255, .1);
  transform: translateX(5px);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.drawer-link svg { width: 24px; height: 24px; fill: currentColor; opacity: .8; }
/* ours: the open page is the amber row */
.drawer-link.is-active, .drawer-link.is-active:hover { background: rgba(var(--accent-rgb), .14); border-color: rgba(var(--accent-rgb), .45); }
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
/* ours: their two sections are equal because they hold three items each (flex: 1 1 0); ours need not be, so on desktop
   both sections take the width of the fuller one (--dock-section) and the logo stays in the middle. Today every section
   is 128px on both sides: the editors side Shop and Earn on the left (15 + 2 x 44 + 10 + 15) and the two-wide Discord item
   on the right (15 + 98 + 15), the brands side two squares a section (owner, 2026-10-17: Learn and Contact off the editors
   dock; with three squares it was 182px). A side whose fuller section is wider sets its own --dock-section here, and the
   dock then morphs between the two widths when the side changes (owner, 2026-09-25) */
@media screen and (min-width: 769px) {
  .dock-left, .dock-right { min-width: var(--dock-section); }
  /* the side switch (side-morph.js): the two sections start at the last page's width and grow or shrink to this page's
     in 350ms, clipped while they move; only the width changes: no scaling, the height and the corners stay (owner) */
  html.dock-morph .dock-left, html.dock-morph .dock-right { flex: 0 0 auto; width: var(--dock-section); min-width: 0; overflow: clip; }
}
@media screen and (max-width: 768px) {
  .dock-mobile-trigger { display: flex; align-items: center; justify-content: center; }
  .cube-dock-container { width: 90%; max-width: 90%; }
  .cube-dock { width: 100%; justify-content: space-between; position: relative; }
  .dock-logo.desktop-logo, .dock-logo-center { display: none; }
  .dock-logo.mobile-logo { display: flex; }
  .dock-left .cube-dock-item { display: none; }
  /* theirs keeps the cart (#cart-icon-bubble); ours keeps the last right item: Discord (two squares wide), or Contact on
     the brands side */
  .dock-right .cube-dock-item:not(:last-child) { display: none; }
}
/* ours: a glow on the mark in the side's accent (owner, 2026-09-25: warm on the editors side, blue on the brands side); on
   the brands side a faint dark shadow under it as well, so its thin white outline stays clear */
.dock-logo img { filter: drop-shadow(0 0 5px rgba(var(--mark-glow-rgb), .35)); }
html[data-side="brands"] .dock-logo img { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55)) drop-shadow(0 0 .5px rgba(0, 0, 0, .4)) drop-shadow(0 0 5px rgba(var(--mark-glow-rgb), .35)); }

/* the Buy row on a product card: Buy alone (owner, 2026-09-25: the cart is gone) */
.kpz__buy { display: flex; }
.kpz__buy .btn--full { flex: 1 1 auto; width: auto; }


/* ours: the Discord item is the one filled item, two squares wide (2 x 44px and the 10px gap between squares; owner,
   2026-09-25): an amber fill with the mark in dark ink, their height, corners and lift; on hover the amber glow instead of the ember one. The open page stays the amber outline on dark. */
.cube-dock-item--discord { width: 98px; color: #1a1206; background: linear-gradient(135deg, #ffd48a 0%, #ffb340 50%, #ff9a3c 100%); box-shadow: inset 0 1px rgba(255, 255, 255, .45), 0 4px 14px rgba(var(--accent-rgb), .28); }
.cube-dock-item--discord:hover { background: linear-gradient(135deg, #ffd48a 0%, #ffb340 50%, #ff9a3c 100%); border: 1px solid rgba(255, 226, 170, .9); box-shadow: 0 6px 22px rgba(var(--accent-rgb), .6); }
.cube-dock-item--discord svg, .cube-dock-item--discord:hover svg { fill: #1a1206; filter: none; }
/* on the narrowest phones (under 360px) two squares would crowd the logo: Discord keeps one square there */
/* the label beside the mark: JOIN, the pair centred (owner, 2026-09-25); the name stays in the aria-label and the tooltip */
.cube-dock-item--discord { gap: 7px; }
.cube-dock-label { font-size: 11.5px; font-weight: 700; line-height: 1; letter-spacing: 1px; text-transform: uppercase; color: #1a1206; pointer-events: none; }
@media screen and (max-width: 359px) { .cube-dock-item--discord { width: 44px; } .cube-dock-label { display: none; } }
.drawer-link--discord { color: #1a1206; background: linear-gradient(135deg, #ffd48a 0%, #ffb340 50%, #ff9a3c 100%); }
.drawer-link--discord:hover { background: linear-gradient(135deg, #ffd48a 0%, #ffb340 50%, #ff9a3c 100%); border-color: rgba(255, 226, 170, .9); box-shadow: 0 4px 20px rgba(var(--accent-rgb), .5); }
.drawer-link--discord svg { opacity: 1; }
/* Phones: the Editors / Brands toggle sits in the menu instead of on the page, and the menu is tighter (owner, 2026-10-15) */
.seg.seg-drawer { display: none; }
@media screen and (max-width: 768px) {
  .khero .seg-row { display: none; }
  .seg.seg-drawer { display: flex; width: 100%; margin: 2px 0 10px; }
  .seg-drawer .seg-btn { flex: 1 1 0; text-align: center; }
  .drawer-header { margin-bottom: 8px; padding-bottom: 10px; }
  .drawer-links { gap: 8px; }
  .drawer-link { padding: 11px 14px; border-radius: 16px; }
}
/* ours: a warm glow behind the mark in the dock (desktop and phone), both sides (owner, 2026-09-25: between the first and the
   doubled one): a 48px radial glow, blurred, no edge; it takes no room, so the dock keeps its size and the logo its centre */
.dock-logo { position: relative; isolation: isolate; }
.dock-logo::before { content: ''; position: absolute; z-index: -1; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--glow-rgb), .38) 0%, rgba(var(--glow-rgb), .14) 44%, transparent 70%); filter: blur(4px); pointer-events: none; }
/* ours: the side switch (owner, 2026-09-25). side-morph.js, in the head, starts the new page at the last page's accent and
   dock width, and lets them go on the next frame: the registered tokens below then glide to this side's values (the
   accent in 450ms, the dock sections in 420ms with After Effects' easy ease; the dock itself is never scaled). The
   squares fade out before leaving and in at the end; the veil carries on and turns its hue (veil.js). The page itself
   does not fade or wait. Browsers without these, and reduced motion, switch at once. */
@property --accent { syntax: '<color>'; inherits: true; initial-value: #ffb340; }
@property --accent-hover { syntax: '<color>'; inherits: true; initial-value: #ffc266; }
@property --accent-rgb { syntax: '<number>#'; inherits: true; initial-value: 255, 179, 64; }
@property --veil-rgb { syntax: '<number>#'; inherits: true; initial-value: 196, 80, 30; }
@property --hover-rgb { syntax: '<number>#'; inherits: true; initial-value: 255, 122, 40; }
@property --glow-rgb { syntax: '<number>#'; inherits: true; initial-value: 255, 150, 50; }
@property --mark-glow-rgb { syntax: '<number>#'; inherits: true; initial-value: 255, 140, 40; }
@property --dock-section { syntax: '<length>'; inherits: true; initial-value: 128px; }
html { transition: --accent .45s ease, --accent-hover .45s ease, --accent-rgb .45s ease, --veil-rgb .45s ease, --hover-rgb .45s ease, --glow-rgb .45s ease, --mark-glow-rgb .45s ease, --dock-section .42s cubic-bezier(.33, 0, .67, 1); }
html.from-editors { --accent: #ffb340; --accent-hover: #ffc266; --accent-rgb: 255, 179, 64; --veil-rgb: 196, 80, 30; --hover-rgb: 255, 122, 40; --glow-rgb: 255, 150, 50; --mark-glow-rgb: 255, 140, 40; }
html.from-brands { --accent: #5b8cff; --accent-hover: #7ea4ff; --accent-rgb: 91, 140, 255; --veil-rgb: 70, 96, 230; --hover-rgb: 91, 140, 255; --glow-rgb: 91, 140, 255; --mark-glow-rgb: 110, 150, 255; }
/* arriving at a place on a page: hidden until side-morph.js has put it there (the dark ground shows meanwhile) */
html.hash-arriving body { visibility: hidden; }
/* the squares: out in 180ms on the way out, hidden on arrival, in over 200ms once the width has settled; the logo never fades */
html.dock-leaving .cube-dock-item { opacity: 0; transition: opacity .18s cubic-bezier(.33, 0, .67, 1); }
/* the page content too (owner, 2026-09-25): on any change of page everything but the dock, the toggle and the veil fades out
   with the squares, and on arrival fades in over 260ms; the hidden state holds only while side-morph.js has set its
   class (fail-open: without the script, or restored from the back-forward cache, the content shows) */
html.dock-leaving main > :not(.khero), html.dock-leaving .khero__inner > :not(.seg-row), html.dock-leaving .site-footer, html.page-leaving main > :not(.khero), html.page-leaving .khero__inner > :not(.seg-row), html.page-leaving .site-footer { opacity: 0; transition: opacity .18s cubic-bezier(.33, 0, .67, 1); }
/* between two pages of one side the dock stays; only the open page's mark moves: out with the content, in on arrival */
html.page-leaving .cube-dock-item.is-active, html.nav-entering .cube-dock-item.is-active { background: rgba(255, 255, 255, .05); border-color: transparent; box-shadow: none; }
html.page-leaving .cube-dock-item.is-active { transition: background .18s cubic-bezier(.33, 0, .67, 1), border-color .18s cubic-bezier(.33, 0, .67, 1), box-shadow .18s cubic-bezier(.33, 0, .67, 1); }
html.nav-entering .cube-dock-item.is-active { transition: none; }
html.side-entering main > :not(.khero), html.side-entering .khero__inner > :not(.seg-row), html.side-entering .site-footer { opacity: 0; transition: none; }
html.side-in main > :not(.khero), html.side-in .khero__inner > :not(.seg-row), html.side-in .site-footer { transition: opacity .26s cubic-bezier(.33, 0, .67, 1); }
html.dock-entering .cube-dock-item { opacity: 0; transition: none; }
html.dock-fade:not(.dock-entering) .cube-dock-item { transition: opacity .2s cubic-bezier(.33, 0, .67, 1), transform .3s cubic-bezier(.25, .8, .25, 1), background .3s, box-shadow .3s, border .3s; }
@media (prefers-reduced-motion: reduce) {
  html { transition: none; }
  html.dock-leaving .cube-dock-item, html.dock-entering .cube-dock-item { opacity: 1; }
  html.dock-leaving main > :not(.khero), html.dock-leaving .khero__inner > :not(.seg-row), html.dock-leaving .site-footer, html.page-leaving main > :not(.khero), html.page-leaving .khero__inner > :not(.seg-row), html.page-leaving .site-footer, html.side-entering main > :not(.khero), html.side-entering .khero__inner > :not(.seg-row), html.side-entering .site-footer { opacity: 1; }
}
/* ours: the mark centred by eye (owner, 2026-09-25): its bright left half carries the weight, so its luminance-weighted
   centre sits 0.94px left of its box's centre on the dark dock; the mark moves 1px right so that centre is on the dock's
   middle, on both sides, at every width and through the side switch. The glow behind stays on the box's centre. */
.dock-logo img { transform: translateX(1px); }
/* ---------- the Editors / Brands toggle, on the page under the logo ---------- */
/* the toggle sits centred under the dock at every width, on both sides (owner, 2026-09-25): the same row, the same
   pill, so it does not move when the side changes */
.seg-row { width: 100%; margin: 0 auto; padding: 0; text-align: center; }
.seg-page { display: flex; width: max-content; margin: 0 auto; }
/* on desktop the toggle sits in the top left of the screen, where AExploit keeps its "AEXPLOIT // SYSTEM" corner (their
   left: 40px), fixed and centred on the dock's height (the dock is 20px down and 66px tall, so its middle is 53px down),
   staying put while the page scrolls (owner, 2026-09-25). It needs 40 + 169px beside the 446px dock, so it moves there
   from a 920px window; narrower, and on phones, it stays centred under the dock, clear of it. */
@media screen and (min-width: 920px) {
  .seg-row { position: fixed; top: 53px; left: 40px; z-index: 9999; width: auto; padding: 0; transform: translateY(-50%); }
  .seg-page { margin: 0; }
}
/* Source: Alvar kpz__bill (a recessed well with a pill on the active button). */
.seg {
  position: relative; isolation: isolate;
  display: inline-flex; gap: 0; padding: 3px;
  border: 1px solid var(--well-border); border-radius: 99px;
  background: var(--well-fill);
  box-shadow: var(--well-shadow);
}
.seg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 4px 18px;
  border-radius: 99px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--well-ink);
  transition: color .26s var(--ease-out-expo);
}
.seg-btn:hover { color: var(--well-ink-hover); }
/* the current side is the pill: white on the dark side, black on the light side, never amber (owner, 2026-09-25) */
html[data-side="brands"] .seg-btn[data-side="brands"], html[data-side="editors"] .seg-btn[data-side="editors"] {
  color: var(--well-pill-ink);
  background: var(--well-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 7px rgba(0, 0, 0, .35);
}

/* ---------- hero ---------- */
.khero {
  position: relative;
  overflow-x: clip; overflow-y: visible;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  background: var(--bg);
  color: var(--ink-2);
}
/* bottom fade into the page */
/* Source: Alvar khero::after (the hero fades into the page colour at its foot). */
.khero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; z-index: 0;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; contain: strict; }
/* the liquid veil (veil.js): a WebGL canvas over the glow, under the vignette and the noise. It is transparent
   until its first frame, so the glow is the picture until then and whenever WebGL is missing. Source: AExploit's
   hero canvas (React Bits DarkVeil), see veil.js. */
/* their .canvas-wrapper, value for value: the hero's full width and the viewport's height (their hero is 100vh, at least
   700px), under their opacity, screen blend, brightness and contrast, and their mask fading only the last fifth; the
   canvas fills it. Ours: it fades in on its first frame (until then, and without WebGL, the glow under it is the picture),
   and once it is on, the glow and the hero's foot fade step aside, as their hero has neither. */
.hero__bg--veil { contain: none; }
.canvas-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; min-height: 700px; z-index: 1; opacity: .72; mix-blend-mode: screen; filter: brightness(1.25) contrast(1.08); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, .5) 75%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, .5) 75%, transparent 100%); pointer-events: none; }
.canvas-wrapper canvas { display: block; width: 100%; height: 100%; }
.hero__veil { opacity: 0; transition: opacity .9s ease; }
.hero__veil.is-on { opacity: 1; }
.hero__bg--veil:has(.hero__veil.is-on) .hero__ambient { opacity: 0; animation: none; }
.khero:has(.hero__veil.is-on)::after { display: none; }
/* one large soft glow behind the hero in the veil's blue, slowly breathing. Sources: raycast.com's hero (a large radial
   gradient ellipse, about 94% by 78%, centred near 50% 30%, in the accent) for the shape and place, and AExploit
   body::before for the motion (blur 60px, ambient-pulse: scale 1 to 1.1 with a 2% drift; 15s alternate there,
   12s here; the source runs its opacity between .05 and .08 over a white-lit body, this single glow runs .55 to .85). */
.hero__ambient {
  position: absolute; left: 50%; top: 30%; width: 1300px; height: 760px;
  margin: -380px 0 0 -650px;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--veil-rgb), .3) 0%, rgba(var(--veil-rgb), .1) 42%, transparent 70%);
  filter: blur(60px);
  animation: ambient-pulse 12s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes ambient-pulse {
  0% { transform: scale(1) translate(0, 0); opacity: .55; }
  50% { transform: scale(1.1) translate(2%, 2%); opacity: .85; }
  100% { transform: scale(1) translate(-2%, -2%); opacity: .55; }
}
/* a faint vignette to the edges. Source: Alvar hero__bg::after (a radial darkening away from the light). */
.hero__vignette {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  background: radial-gradient(ellipse 70% 60% at 50% 40%, transparent 40%, rgba(0, 0, 0, .28) 75%, rgba(0, 0, 0, .5) 100%);
}
/* light noise. Source: Alvar hero__noise (an SVG turbulence tile at 3%), a shade lighter here. */
.hero__noise {
  position: absolute; inset: 0; opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}

.khero__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 0 0;
  text-align: center;
}
.khero__content { position: relative; max-width: 900px; margin: 0 auto; padding: 84px 20px 0; }

/* the eyebrow: a tech-mono kicker. Source: AExploit .tech-mono (monospace, 700, letter-spacing 2px,
   the accent colour with a soft glow of it) and its uppercase kickers. */
.section-badge {
  display: inline-block;
  margin: 0 0 20px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), .5);
}

/* Source: Apple product pages and Alvar khero__heading (a large, tight, centred headline with one accent word). */
.khero__heading {
  margin: 0 0 24px;
  font-size: clamp(2.7rem, 6.4vw, 4.9rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -.038em;
  color: var(--ink);
  text-wrap: balance;
}
.khero--page .khero__heading { font-size: clamp(2.3rem, 5.2vw, 3.8rem); }
.khero__subheading {
  max-width: 600px; margin: 0 auto 38px;
  font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 300; line-height: 1.65;
  color: var(--ink-2);
  text-wrap: balance;
}
.khero__ctas { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.khero__ctas .btn { padding: 16px 34px; }

/* the landing headline: AExploit's giant hero word (measured on their page: Inter 900 at 140px on 1280, letter-spacing
   -.04em, line-height .95, white, and the white text glow of their titles, 0 0 20px at 20%), here in the heaviest weight
   the page loads (Inter 800), on one line, in the page ink with no accent; the subline under it in the muted ink. */
.khero__heading--mark {
  margin: 0 0 18px;
  font-size: clamp(2.3rem, 7.6vw, 6.6rem);
  font-weight: 800; letter-spacing: -.04em; line-height: .95;
  color: var(--ink);
  text-shadow: 0 0 20px rgba(255, 255, 255, .2);
}
/* the ink centred, measured in headless Chrome (owner, 2026-09-27): the -.04em letter-spacing also follows the last letter,
   so the centred line sat .02em right of its ink; a text-indent of -.04em moves a centred line .02em left and cancels it
   (B3N on the brands page). B3NEDITS on the home page also ends on an S, whose side bearing is .0126em wider than the
   B's, so it takes .025em more. In em, so it holds at every size. */
.khero__heading--mark { text-indent: -.04em; }
html[data-page="home"] .khero__heading--mark { text-indent: -.065em; }
/* the home word on a phone (owner, 2026-09-27: "b3nedits shows small on mobile"): B3NEDITS in Inter is 4.663em of ink wide, so
   .189 of the content width (the screen less its two 16px gutters) makes it fill 88% of it; it reaches the desktop 6.6rem
   at 591px and stays there, so the size grows without a jump. The line under it grows with it, from .8rem up to 1rem, on
   one line. The home page only: /brands keeps its size. */
html[data-page="home"] .khero__heading--mark { font-size: min(6.6rem, calc((100vw - 32px) * .189)); }
html[data-page="home"] .khero__subheading--mark { font-size: min(1rem, max(.8rem, calc((100vw - 32px) * .042))); }
.khero__subheading--mark { max-width: none; margin-bottom: 34px; font-size: clamp(.8rem, 1.1vw + .45rem, 1rem); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
@media (min-width: 480px) {
  .khero__heading--mark, .khero__subheading--mark { white-space: nowrap; }
}

/* the stage: a glass 16:9 panel below the calls to action, lit from inside, waiting for the demo. */
/* Source: AExploit product-media-container (the 16:9 preview panel with 24px corners) as the stage, Alvar kshot for its top glow. */
.kstage { position: relative; max-width: 960px; margin: 68px auto 0; padding: 0 20px; }
.kstage::before {
  content: ""; position: absolute; left: 16%; right: 16%; top: -24px; height: 120px; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 60%, rgba(var(--accent-rgb), .14), transparent 70%);
  filter: blur(22px);
}
.kstage__panel {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .012) 40%), var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 44px 90px -30px rgba(0, 0, 0, .9), 0 0 90px -34px rgba(var(--accent-rgb), .4);
}
/* the light inside: an amber pool at the top. Source: Alvar kshot::before (the glow inside the top of the frame). */
.kstage__panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 58% 44% at 50% 0%, rgba(var(--accent-rgb), .2) 0%, rgba(var(--accent-rgb), .05) 50%, transparent 76%);
}
.kstage__type {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 .35em;
  margin: 0;
  font-size: clamp(1.45rem, 4.4vw, 3.3rem);
  font-weight: 800; letter-spacing: -.045em; line-height: 1;
  color: var(--ink);
}
.kstage__type .accent { padding: 0 .08em; }
.kstage__label { position: relative; color: var(--ink-3); }
/* the landing page's stage: a solid dark grey box, the video's place, with no glass, light, glow, gradient or shine */
.kstage--video::before, .kstage--video .kstage__panel::before { display: none; }
.kstage--video .kstage__panel { background: #161616; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.khero:not(.khero--page) .khero__content { padding-top: 40px; }
.kstage--video { margin-top: 36px; max-width: min(960px, max(520px, calc((100svh - 530px) * 16 / 9 + 40px))); }
.khero:not(.khero--page) .kscroll { margin-top: 26px; }
/* a placeholder says what goes there (owner, 2026-09-25): a small tracked label in the muted grey, no glow; the light side
   has its own grey for the box */
.kplaceholder { position: relative; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); text-shadow: none; }


/* the scroll cue at the foot of the hero: monospace, a thin line, gone once the page has moved */
/* Source: AExploit's SCROLL cue at the foot of the hero (monospace, a thin line). */
.kscroll {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: max-content; margin: 56px auto 0; padding-bottom: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: var(--ink-3);
  transition: opacity .45s ease, color .3s ease;
}
.kscroll { cursor: pointer; border-radius: 8px; }
.kscroll:hover, .kscroll:focus-visible { color: var(--ink); }
.kscroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.kscroll__line { width: 1px; height: 40px; background: linear-gradient(to bottom, currentColor, transparent); opacity: .7; }
html.has-scrolled .kscroll { opacity: 0; pointer-events: none; }

/* the stats rows: a few verified figures, big, on one line */
/* Source: Alvar's stats row (large figures with small labels). */
.kstats {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px;
  margin: 34px auto 0;
  font-size: 1rem; font-weight: 400; color: var(--ink-2);
}
.kstat strong { margin-right: .28em; font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kstats__dot { color: var(--ink-3); }
.kstats__sub { margin: 8px 0 0; font-size: .85rem; color: var(--ink-3); }
.khero__heading + .kstats { margin-top: 6px; }

/* the head of every other page: the same hero, shorter, no stage */
.khero--page .khero__content { padding: 60px 20px 56px; }
.khero--page .khero__subheading { margin-bottom: 0; }
.khero--page .khero__ctas { margin-top: 32px; }

/* ---------- sections ---------- */
.ksec { position: relative; padding: 120px 0 64px; }
.ksec--tight { padding: 12px 0 64px; }
.kp-section { padding: 44px 0 0; }
.section-header { text-align: center; margin: 0; }
/* Source: Alvar section-heading (a heavy heading with one accent word) and section-subheading. */
.section-heading {
  margin: 0;
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.08;
  color: var(--ink);
}
.section-subheading { max-width: 560px; margin: 16px auto 0; font-size: 1.05rem; font-weight: 300; line-height: 1.7; color: var(--ink-2); }
.kp-currency { margin: 18px auto 0; max-width: 560px; text-align: center; font-size: .78rem; color: var(--ink-3); }
/* the Discord pill above the cards (owner, 2026-09-27): the announcement pill that sits above a hero heading (Linear, Vercel,
   Apple), calm: one compact line in sentence case, the mark, the words in ink, the offer in the accent, a small muted chevron.
   The dock's glass; an even 1px accent hairline all the way round (owner: no fade).
   On hover and focus the rim brightens and a faint glow shows, no lift; the chevron nudges 2px (not with reduced motion).
   One line down to 360 (13px from 480 down); narrower than that the words take two centred lines inside the pill. */
.kdisc { margin: 0 auto 24px; text-align: center; }
.kdisc__pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; height: 36px; padding: 0 12px 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); text-decoration: none; white-space: nowrap; background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); border: 1px solid rgba(var(--accent-rgb), .45); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37); transition: border-color .3s ease, box-shadow .3s ease; }
.kdisc__pill > svg.dc { width: 16px; height: 16px; flex: none; color: #fff; }
.kdisc__offer { font-weight: 600; color: var(--accent); }
.kdisc__chev { width: 14px; height: 14px; flex: none; margin-left: -2px; color: var(--ink-3); transition: transform .25s ease, color .25s ease; }
.kdisc__pill:hover, .kdisc__pill:focus-visible { border-color: rgba(var(--accent-rgb), .8); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37), 0 0 28px -6px rgba(var(--glow-rgb), .45); }
.kdisc__pill:hover .kdisc__chev, .kdisc__pill:focus-visible .kdisc__chev { transform: translateX(2px); color: var(--ink-2); }
.kdisc__pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 480px) {
  .kdisc { margin-left: -12px; margin-right: -12px; }
  .kdisc__pill { gap: 6px; padding: 0 10px 0 12px; font-size: 13px; }
  .kdisc__pill > svg.dc { width: 15px; height: 15px; }
}
@media (max-width: 359px) {
  .kdisc__pill { height: auto; padding: 7px 14px; border-radius: 20px; }
  .kdisc__text { width: min-content; text-align: center; white-space: normal; }
  .kdisc__lead, .kdisc__offer { display: inline-block; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .kdisc__pill, .kdisc__chev { transition: none; } .kdisc__pill:hover .kdisc__chev, .kdisc__pill:focus-visible .kdisc__chev { transform: none; } }
.kp-note { margin: 32px auto 0; max-width: 560px; text-align: center; font-size: .82rem; color: var(--ink-3); }

/* ---------- buttons: one construction for every button ---------- */
/* Source: AExploit .button (glass-theme.css, verified 2026-09-25): a pill, uppercase 700 with 1px of tracking, white
   on a #111 to #000 gradient, a 1px white highlight inside the top edge and a 10% line inside the bottom, a deep drop
   shadow; on hover a lighter gradient, a brighter highlight, an inner glow (purple there, amber here at their 18%),
   a deeper shadow and a 2px lift; pressed, 1px down. The same dark button on the light brands side. The Buy buttons
   (btn--full) add an amber halo on hover. The join buttons (btn--join) are the one coloured button (owner). */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px; border-radius: 9999px; border: 0;
  font-family: var(--font); font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase;
  color: #fff; white-space: nowrap; cursor: pointer;
  background: linear-gradient(180deg, #111, #000);
  box-shadow: inset 0 1px rgba(255, 255, 255, .5), inset 0 -1px rgba(255, 255, 255, .1), 0 10px 30px rgba(0, 0, 0, .5);
  transition: transform .2s ease, box-shadow .3s ease, background .3s ease;
}
.btn:hover {
  background: linear-gradient(180deg, #1a1a1a, #050505);
  box-shadow: inset 0 1px rgba(255, 255, 255, .8), inset 0 0 20px rgba(var(--accent-rgb), .18), 0 15px 40px rgba(0, 0, 0, .56);
  transform: translateY(-2px);
}
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 5px 15px rgba(0, 0, 0, .4); }
.btn--full { width: 100%; }
.btn--full:hover { box-shadow: inset 0 1px rgba(255, 255, 255, .8), inset 0 0 20px rgba(var(--accent-rgb), .18), 0 15px 40px rgba(0, 0, 0, .56), 0 8px 40px rgba(var(--accent-rgb), .35); }
/* the join buttons: the same pill filled with the amber gradient, dark ink on it; on hover a brighter
   fill, the lift and an amber glow (owner, 2026-09-25). */
.btn--join { color: var(--join-ink); background: var(--join-grad); box-shadow: inset 0 1px rgba(255, 255, 255, .6), inset 0 -1px rgba(0, 0, 0, .12), 0 10px 30px rgba(0, 0, 0, .5); }
.btn--join:hover { background: var(--join-grad-hover); box-shadow: inset 0 1px rgba(255, 255, 255, .8), 0 15px 40px rgba(0, 0, 0, .56), 0 8px 40px rgba(var(--accent-rgb), .45); }
.btn--join:active { box-shadow: inset 0 1px rgba(255, 255, 255, .5), 0 5px 15px rgba(0, 0, 0, .4), 0 4px 20px rgba(var(--accent-rgb), .3); }
/* the home page's ways in (owner, 2026-09-27: "make these buttons look better", equal, none chosen; the draft made the
   home page the same day; 2026-10-17: Learn off for now, so two, Shop and Earn): the dock's
   own glass squares (its fill, blur, rim and inset light, its 12px corners) widened to equal 156 x 48 buttons, each
   its dock icon in white and its name; hover and keyboard focus do what a dock square does: a lift, the amber rim and fill,
   the glow, the icon warming to amber; a focus ring; no lift with reduced motion. One column per tile, however many there
   are, the row centred. On a phone they stay in a row, up to 104px each, the icon above the name. */
.kways { display: grid; grid-auto-flow: column; grid-auto-columns: 156px; justify-content: center; gap: 12px; }
.kway { display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 48px; border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 var(--glass-top), 0 8px 32px 0 rgba(0, 0, 0, .37); transition: transform .3s cubic-bezier(.25, .8, .25, 1), background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
/* the optical spacing (owner, 2026-09-27: "spacing of symbols and words is a bit off", measured in headless Chrome): each icon
   keeps a fixed 18px box, and its drawn part (the ink, not the box) sits 10px from the name and starts the group that is
   centred in the tile. The insets are each icon's ink inside its 24-unit box, at 18px: the bag (4, 2, 16 x 20), the $
   (6.5, 3, 10 x 18), the arrow (2.4, 6, 19.6 x 11.6); --tb is the side bearing of the name's first letter (S .8px, E and
   L 1.3px) so the gap runs ink to ink. Stacked on a phone the icon boxes share one line and the names one baseline: each box ends 6px above its
   name's capitals and box and name are centred together in the tile. */
.kway__ico { width: 18px; height: 18px; flex: none; margin: 0 calc(10px - var(--ir) - var(--tb)) 0 calc(0px - var(--il)); fill: currentColor; color: #fff; transition: color .3s ease, filter .3s ease; }
.kway__ico--bag { --il: 3px; --ir: 3px; --tb: .8px; }
.kway__ico--cash { --il: 4.875px; --ir: 5.625px; --tb: 1.3px; }
.kway__ico--trend { --il: 1.8px; --ir: 1.5px; --tb: 1.3px; }
.kway:hover, .kway:focus-visible { transform: translateY(-3px); background: rgba(var(--hover-rgb), .2); border-color: rgba(var(--hover-rgb), .5); box-shadow: inset 0 1px 0 var(--glass-top), 0 5px 15px rgba(var(--hover-rgb), .4); }
.kway:hover .kway__ico, .kway:focus-visible .kway__ico { color: var(--accent); filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .5)); }
.kway:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 600px) {
  .kways { grid-auto-columns: minmax(0, 104px); }
  .kway { flex-direction: column; height: 64px; padding-top: 2px; font-size: 14px; }
  .kway__ico { margin: 0 0 4.2px; }
}
@media (prefers-reduced-motion: reduce) { .kway, .kway:hover, .kway:focus-visible { transform: none; transition: none; } }

/* ---------- tier cards: glass panels; the best one carries the accent ---------- */
/* Source: Alvar kpz__grid (three tier cards with a warm pool of light behind them). */
.kpz__grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 22px; align-items: stretch;
  max-width: 1140px; margin: 0 auto;
}
.kpz__grid--two { grid-template-columns: 1fr 1fr; max-width: 760px; }
/* the brands page: one Edited Group card for both sides (owner, 2026-10-15: "doesnt make sense to have 2 of the same thing") */
.kpz__grid--one { grid-template-columns: 1fr; max-width: 440px; }
/* the shop's one plugin card (shown when the Worker's switch is on): its line of text, and How to install under Buy */
.kpz__desc { margin: 14px 0 22px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.kpz__install { margin: 14px 0 0; text-align: center; font-size: 14px; }
.kpz__install a { display: inline-block; padding: 10px 6px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.kpz__install a:hover { color: var(--ink); }
/* the get paid cards: three big ones in a row, four smaller ones under them, equal heights per row (owner, 2026-09-25) */
.kpz__grid--big { grid-template-columns: repeat(3, 1fr); }
.kpz__grid--small { grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; }
.kpz__card--small .kpz__inner { gap: 12px; padding: 24px 22px 22px; }
.kpz__card--small .klogo { height: 36px; }
.kpz__card--small .klogo--round, .kpz__card--small .klogo--app { width: 36px; height: 36px; }
.kpz__card--small .kdoor__title { font-size: 1.1rem; }
.kpz__card--small .kdoor__text { font-size: .88rem; }
.kpz__card--small .btn { padding: 11px 18px; font-size: 13px; letter-spacing: .8px; }
/* the B3 mark fills its box where the other logos are badges with the glyph inside: it sits at about 72% of the box
   (padding; the box, the spacing and the strip's loop are unchanged), so it reads the same size (owner) */
.klogo--mark { box-sizing: border-box; width: auto; height: 44px; padding: 6px; }
.kmarquee__logo.klogo--mark { box-sizing: border-box; padding: 5.5px; }
/* a warm pool of light behind the cards */
.kpz__grid::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: 50%; width: 78%; height: 118%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), .07) 0%, transparent 60%);
}

/* Source: AExploit .card (glass fill, hairline, 24px corners, translateY on hover, accent rim on the featured card) and Alvar kpz__inner (the inner top highlight and layered shadows). */
.kpz__card {
  position: relative; z-index: 1;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 var(--glass-top), var(--shadow-card);
  transition: transform .5s var(--ease-card), box-shadow .5s var(--ease-card), border-color .3s ease;
}
.kpz__card:hover { transform: translateY(-6px); border-color: var(--hair-2); box-shadow: inset 0 1px 0 var(--glass-top), var(--shadow-card-hover); }
.kpz__card--best {
  border-color: rgba(var(--accent-rgb), .8);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .08) 0%, rgba(var(--accent-rgb), .015) 45%), var(--glass-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(var(--accent-rgb), .16), 0 0 70px -22px rgba(var(--accent-rgb), .6), var(--shadow-card);
}
.kpz__card--best:hover {
  border-color: var(--accent-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(var(--accent-rgb), .24), 0 0 80px -16px rgba(var(--accent-rgb), .7), var(--shadow-card-hover);
}

.kpz__inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: 22px;
  padding: 40px 30px 30px;
}

.kpz__name {
  display: flex; align-items: center; min-height: 40px; margin: 0 0 10px;
  font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink);
}
.kpz__name a { transition: opacity .25s ease; }
/* a plugin with its own page (ben, 2026-10-30: "these need to be clickable and go to the product page"): the whole card opens it
   through its name's link, and under Buy a black More info button; Buy and More info stay above the card's link */
.kpz__card--link { cursor: pointer; }
.kpz__card--link .kpz__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.kpz__card--link .kpz__buy { position: relative; z-index: 2; flex-direction: column; gap: 10px; }
.kpz__card--link .kpz__name a:focus-visible { outline: none; }
.kpz__card--link:has(a:focus-visible) { outline: 2px solid rgba(var(--accent-rgb), .6); outline-offset: 3px; }
.kpz__more { width: 100%; }
.kpz__name a:hover { opacity: .8; }
.kpz__name--accent { color: var(--accent); }
.kpz__price { margin: 0; font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.kpz__price small { font-size: .9rem; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.kpz__card--best .kpz__price {
  background: linear-gradient(135deg, #ffe0a8 0%, #ff9a3c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.kpz__card--best .kpz__price small {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--ink-3); color: var(--ink-3);
}
.kpz__save { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--accent); }
.kpz__save s { margin-right: 6px; font-weight: 400; color: var(--ink-3); }
.kpz__per { margin: 8px 0 0; font-size: 12.5px; letter-spacing: .01em; color: var(--ink-3); }
.kpz__per strong { font-weight: 700; color: var(--ink); }
.kpz__card--best .kpz__per strong { color: var(--accent); }
.kpz__assure { margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); text-wrap: balance; }
.kpz__tagline { margin: 15px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* corner badge: a plain pill, quiet by default, filled with the accent on the best card.
   Source: Alvar kpz__badge (the quiet corner pill) and AExploit .badge (the filled, bordered pill). */
.kpz__badge {
  position: absolute; z-index: 2; top: 14px; right: 14px;
  padding: 5px 11px; border-radius: 99px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  color: var(--ink-2);
  background: rgba(var(--ink-rgb), .04);
  border: 1px solid var(--hair-2);
}
.kpz__badge--accent { color: var(--on-accent); background: var(--accent); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px -6px rgba(var(--accent-rgb), .7); }

.kpz__features {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 11px;
  margin: 0; padding: 16px 0 0;
  border-top: 1px solid var(--border);
}
.kpz__features li { display: flex; align-items: flex-start; gap: 10px; min-height: 30px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.kpz__features li svg { flex: 0 0 auto; margin-top: 4px; }
.kpz__check { color: var(--accent); }

/* the crown astride the highlighted card's top edge: this site's first build's crown, verbatim (its gold, its size,
   its breathing bloom, its light line and the sheen that crosses the mask), lifted with the card on hover.
   Source: this site's first build (4569f28), after Alvar's crown on the highlighted card. */
.kpz__crownmark {
  position: absolute; z-index: 4; top: -32px; left: 50%;
  transform: translateX(-50%);
  line-height: 0; pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(255, 248, 214, .42)) drop-shadow(0 3px 4px rgba(0, 0, 0, .8))
          drop-shadow(0 7px 16px rgba(0, 0, 0, .5)) drop-shadow(0 0 16px rgba(240, 208, 96, .38));
  transition: transform .6s var(--ease-card), filter .6s var(--ease-card);
}
.kpz__crownmark svg { display: block; position: relative; z-index: 1; }
.kpz__crownmark::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 24px;
  width: 206px; height: 88px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(240, 208, 96, .22) 0%, rgba(240, 208, 96, .09) 44%, transparent 74%);
  filter: blur(19px);
  animation: kpz-crown-breathe 7s ease-in-out infinite;
}
.kpz__crownmark::after {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 32px;
  width: 142px; height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(255, 238, 178, .28) 24%, rgba(255, 246, 214, .55) 50%, rgba(255, 238, 178, .28) 76%, transparent);
}
.kpz__crownmark i {
  --kpz-crown-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 21'><path d='M2.5 6 8.5 10 15 2.5 21.5 10 27.5 6 25 19.5H5L2.5 6Z'/><circle cx='2.5' cy='4.4' r='1.9'/><circle cx='15' cy='2.2' r='1.9'/><circle cx='27.5' cy='4.4' r='1.9'/></svg>");
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .9) 50%, transparent 60%);
  background-size: 280% 100%; background-repeat: no-repeat;
  -webkit-mask: var(--kpz-crown-mask) center / contain no-repeat;
          mask: var(--kpz-crown-mask) center / contain no-repeat;
  animation: kpz-crown-sheen 6s cubic-bezier(.5, 0, .3, 1) infinite;
}
.kpz__card--best:hover .kpz__crownmark {
  transform: translateX(-50%) translateY(-4px);
  filter: drop-shadow(0 1px 0 rgba(255, 250, 226, .55)) drop-shadow(0 8px 16px rgba(0, 0, 0, .66)) drop-shadow(0 0 26px rgba(240, 208, 96, .6));
}
@keyframes kpz-crown-breathe { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes kpz-crown-sheen { 0% { background-position: 0 0; } 30%, 100% { background-position: 100% 0; } }

/* door cards (the two servers, the two brand doors): the same glass, a letter mark, a title and a line */
.kpz__card--door .kpz__inner { gap: 16px; padding: 34px 30px 30px; }
/* Source: AExploit's dock icons (a rounded square tile holding an icon). */
.kmark {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-size: 1.1rem;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.kmark--tiktok { color: var(--ink); background: rgba(var(--ink-rgb), .06); }
.klogo { display: block; align-self: flex-start; height: 44px; width: auto; }
.kdoor__title { font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.kdoor__text { flex: 1 1 auto; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.klogo--kozu { width: 48px; height: 48px; margin-top: -2px; }

/* the icons of the servers and platforms: a Discord avatar is round, an app icon has Apple's rounded corners */
.klogo--round { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.klogo--app { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.kdoor__title { font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.kdoor__text { flex: 1 1 auto; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.kpz__card--door .btn { align-self: flex-start; }

/* account cards (the portfolio): the whole card is the link; three figures under the handle */
.kpz__grid--four { grid-template-columns: repeat(4, 1fr); gap: 18px; }
a.kpz__card { display: block; color: inherit; }
.kpz__card--account .kpz__inner { gap: 14px; padding: 30px 26px 26px; }
.kpz__card--account .kdoor__title { font-size: 1.15rem; }
/* Source: Alvar's stat tiles (a figure over its label). */
.kstat-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }
.kstat-list div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kstat-list dt { font-size: 11px; color: var(--ink-3); }
.kstat-list dd { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* the contact form: AExploit's contact page, value for value where it applies (their /pages/contact, measured in headless
   Chrome 2026-09-25): one glass panel 726px wide (30px 22px of padding, an 18px corner, a hairline, a 16px blur, a deep
   shadow with a faint glow in the accent), the fields two up with a 20px gap, each a 45px well with a 14px corner, a 6%
   fill and a 55% ring, the label inside at 16px and floating up to 10px once the field is focused or filled, the focus a
   15px glow in the accent, Send a full-width pill up to 380px, 40px under the last field. Ours: the fields (Suki's form),
   the copy, the palette and the amber. */
.kform { position: relative; display: block; max-width: 726px; margin: 0 auto; padding: 30px 22px; border: 1px solid var(--glass-border); border-radius: 18px; background: var(--panel-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--panel-shadow), 0 0 18px rgba(var(--accent-rgb), .08); }
.kform__row { display: grid; grid-template-columns: 1fr; column-gap: 20px; }
.field { position: relative; display: flex; min-width: 0; margin: 0 0 20px; }
.field__input {
  flex: 1 1 auto; width: 100%; min-width: 0; height: 45px; margin: 0; padding: 15px 20px;
  border: 0; border-radius: 14px; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 16px; line-height: 24px; letter-spacing: .4px; color: rgba(var(--ink-rgb), .92);
  background: rgba(var(--ink-rgb), .06); box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .55);
  transition: box-shadow .1s ease, background-color .1s ease;
}
textarea.field__input { height: auto; min-height: 100px; resize: vertical; }
.field__input::placeholder { color: transparent; opacity: 0; }
.field__label { position: absolute; top: 11px; left: 21px; margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 1px; color: rgba(var(--ink-rgb), .8); pointer-events: none; transition: top .1s ease, font-size .1s ease, letter-spacing .1s ease; }
.field__label em { font-style: normal; color: rgba(var(--ink-rgb), .55); }
.field__input:focus, .field__input:not(:placeholder-shown) { padding: 22px 15px 8px 20px; }
.field__input:focus ~ .field__label, .field__input:not(:placeholder-shown) ~ .field__label { top: 6px; font-size: 10px; line-height: 15px; letter-spacing: .4px; }
.field__input:focus { outline: 2px solid transparent; background: rgba(var(--ink-rgb), .1); box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .55), 0 0 15px rgba(var(--accent-rgb), .9); }
.field__input[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--bad-ink); }
.kform__button { margin-top: 40px; }  /* collapses with the last field's 20px: 40px, as theirs */
.kform__button .btn { width: 100%; max-width: 380px; }
.msg { margin: 0 0 20px; padding: 14px 16px; border-radius: 14px; font-weight: 500; font-size: .95rem; line-height: 1.45; }
.msg.good { background: var(--good-bg); color: var(--good-ink); border: 1px solid var(--good-line); }
.msg.bad { background: var(--bad-bg); color: var(--bad-ink); border: 1px solid var(--bad-line); }
.msg a { text-decoration: underline; } /* the Discord words in an answer are a link (script.js) and read as one */
/* without JavaScript the form cannot pass its spam check, so it is not offered: the noscript line points at the Discord */
@media (scripting: none) { .kform { display: none; } }
.kform__noscript { max-width: 726px; margin: 0 auto; }
.kform__noscript a { text-decoration: underline; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: 0 0 20px; }
.cf-turnstile:empty { display: none; }
/* their page title: left in the same 726px column, 34px (24px on phones), uppercase, 800 (their 900; Inter loads to 800), tight, a white-to-grey
   gradient in the text (ours from the ink), 40px above the panel */
.khero--contact .khero__content { max-width: 766px; padding: 40px 20px 0; text-align: left; }
.khero--contact .khero__heading { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: .95; text-transform: uppercase; color: var(--ink); background: linear-gradient(90deg, rgba(var(--ink-rgb), .98), rgba(var(--ink-rgb), .78)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ksec--contact { padding-top: 76px; }  /* their 36px under the title section and the title's 40px */
.ksec--contact .kp-section { padding-top: 0; }
@media (max-width: 749px) {
  .khero--contact .khero__heading { font-size: 24px; }
  .khero--contact .khero__content { padding-left: 16px; padding-right: 16px; }
  .ksec--contact { padding-top: 60px; }
}

/* position dots for the phone rail (hidden above 980px) */
.kpz__dots { display: none; }

/* ---------- the legal pages ---------- */
.article { max-width: 680px; margin: 0 auto; }
.article p { margin: 0 0 1.2em; font-size: 1rem; line-height: 1.8; color: var(--ink-2); }
.article p:last-child { margin-bottom: 0; }
.article a { text-decoration: underline; }
/* KEYFRAMR's install page (2026-10-29, ben: "like Alvar's but matching b3nedits"): a centred hero, the Mac / Windows switch, four
   numbered steps on a line, three cards, the keys, the trouble list that opens one answer at a time, the help card. No blur,
   no endless animation, nothing fixed: nothing here needs a lite twin. */
.ig-meta { margin: 26px auto 0; font-size: .85rem; color: var(--ink-3); }
.ig-meta span { white-space: nowrap; }
.ig-meta span + span::before { content: "\00B7"; margin: 0 10px; }
.ig-sec { padding: 72px 0 24px; }
.ig-sec--first { padding-top: 40px; }
.ig-sub { margin-top: 12px; }
.ig-os-row { margin: 32px 0 0; text-align: center; }
.ig-os-row[hidden] { display: none; }
.ig-os { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass-bg); }
.ig-os button { min-width: 112px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.ig-os button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.ig-os-note { margin: 10px 0 0; font-size: .8125rem; color: var(--ink-3); }
html[data-guide-os="mac"] [data-os="win"], html[data-guide-os="win"] [data-os="mac"] { display: none; }
html:not([data-guide-os]) b[data-os="win"]::before { content: " (Windows: "; font-weight: 400; }
html:not([data-guide-os]) b[data-os="win"]::after { content: ")"; font-weight: 400; }
.ig-steps { max-width: 640px; margin: 44px auto 0; padding: 0; list-style: none; counter-reset: ig; }
.ig-step { position: relative; padding: 0 0 34px 66px; counter-increment: ig; }
.ig-step::before { content: counter(ig); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--join-grad); color: var(--join-ink); font-size: 1rem; font-weight: 800; box-shadow: inset 0 1px rgba(255, 255, 255, .6), 0 8px 24px rgba(var(--accent-rgb), .22); }
.ig-step:not(:last-child)::after { content: ""; position: absolute; left: 20.5px; top: 52px; bottom: 6px; width: 1px; background: linear-gradient(var(--hair-2), var(--border)); }
.ig-step h3 { margin: 9px 0 8px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.ig-step p, .ig-card p, .ig-faq__body p, .ig-faq__body li, .ig-help p { margin: 0 0 10px; font-size: .97rem; line-height: 1.7; color: var(--ink-2); }
.ig-step b, .ig-card b, .ig-faq__body b { font-weight: 600; color: var(--ink); }
.ig-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.ig-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ig-link--quiet { font-weight: 500; color: var(--ink-2); }
.ig-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 40px auto 0; }
.ig-card { padding: 24px 24px 14px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--glass-bg); box-shadow: inset 0 1px var(--glass-top); }
.ig-card h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.ig-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 820px; margin: 40px auto 0; padding: 0; list-style: none; }
.ig-key { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 16px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--glass-bg); font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
.ig-key kbd { flex: none; }
.ig-sec kbd { display: inline-block; padding: .2em .6em; border: 1px solid var(--hair-2); border-bottom-width: 2px; border-radius: 7px; background: rgba(255, 255, 255, .05); font-family: var(--font-mono); font-size: .8125rem; line-height: 1.4; color: var(--ink); white-space: nowrap; }
.ig-sec code { padding: .12em .45em; border: 1px solid var(--border); border-radius: 6px; background: rgba(255, 255, 255, .05); font-family: var(--font-mono); font-size: .85em; color: var(--ink); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.ig-faq { max-width: 680px; margin: 40px auto 0; border-top: 1px solid var(--border); }
.ig-faq details { border-bottom: 1px solid var(--border); }
.ig-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 4px; list-style: none; font-size: 1.02rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.ig-faq summary::-webkit-details-marker { display: none; }
.ig-faq summary::after { content: "+"; flex: none; font-size: 1.4rem; font-weight: 300; line-height: 1; color: var(--ink-3); }
.ig-faq details[open] summary::after { content: "\2212"; }
.ig-faq summary:focus-visible, .ig-os button:focus-visible, .ig-copy__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ig-faq__body { padding: 0 4px 18px; }
.ig-faq__body ol, .ig-faq__body ul { margin: 0 0 10px; padding-left: 1.3em; }
.ig-faq__body ol { list-style: decimal; }
.ig-faq__body ul { list-style: disc; }
.ig-faq__body li > p { margin: 8px 0 0; }
.ig-copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
.ig-copy__btn { min-height: 40px; padding: 0 14px; border: 1px solid var(--hair-2); border-radius: 10px; background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.ig-copy__btn[hidden] { display: none; }
.ig-hint { font-size: .85rem; color: var(--ink-3); }
.ig-help { max-width: 680px; margin: 48px auto 0; padding: 34px 28px; border: 1px solid var(--glass-border); border-radius: var(--radius); background: radial-gradient(120% 140% at 50% 0%, rgba(var(--accent-rgb), .10), transparent 60%), var(--glass-bg); text-align: center; }
.ig-help h3 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.ig-help p { margin-bottom: 22px; }
.ig-fine { margin: 28px auto 0; text-align: center; font-size: .8rem; color: var(--ink-3); }
@media (hover: hover) { .ig-os button:not([aria-pressed="true"]):hover, .ig-copy__btn:hover { color: var(--ink); } .ig-faq summary:hover::after { color: var(--ink); } .ig-copy__btn:hover { border-color: rgba(var(--accent-rgb), .45); } }
@media (max-width: 860px) { .ig-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; } .ig-keys { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
@media (max-width: 520px) { .ig-meta span { display: block; } .ig-meta span + span::before { content: none; } .ig-sec { padding: 56px 0 16px; } .ig-step { padding-left: 56px; } .ig-step::before { width: 38px; height: 38px; } .ig-step:not(:last-child)::after { left: 18.5px; top: 48px; } .ig-sec kbd { white-space: normal; } }
/* KEYFRAMR's own page (2026-10-29/30, ben: "it needs a full page", "only the essentials", AExploit's product page as the model,
   then "these shouldnt be side by side"): the hero, then one centred column, the buy card (name, price, one row per part, Buy now,
   How to install, the note, Details) and the help note under it. Gradients only: no lite twin needed. */
.kr-hero .khero__heading { font-size: clamp(3.2rem, 10vw, 6.4rem); letter-spacing: -.05em; }
.ksec.kr-product { padding: 8px 0 110px; }
.kr-product__grid { max-width: 600px; margin: 0 auto; }
.kr-help { margin: 16px 0 0; padding: 18px 20px; border: 1px solid rgba(var(--accent-rgb), .3); border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), .05); text-align: center; font-size: .86rem; line-height: 1.6; color: var(--ink-2); }
.kr-help b { color: var(--ink); }
.kr-help a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.kr-product__card { padding: 34px 32px 24px; border: 1px solid var(--glass-border); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)); box-shadow: inset 0 1px var(--glass-top); }
.kr-product__name { margin: 0; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.kr-product__price { margin: 14px 0 26px; font-size: 1.7rem; font-weight: 800; color: var(--ink); }
.kr-product__price span { margin-left: 8px; font-size: .85rem; font-weight: 500; color: var(--ink-3); }
.kr-rows { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.kr-rows li { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--glass-border); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.kr-rows b { font-size: .95rem; color: var(--ink); }
.kr-rows span { font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.kr-install { margin-top: 10px; }
.kdisc--card { margin: 0 0 14px; }
.kr-hero .kr-title--long { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.kr-product__name--long { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.kdisc--card .kdisc__pill { width: 100%; }
.kr-save { margin: -18px 0 22px; }
.kr-rows b a { color: inherit; text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .6); text-underline-offset: 3px; }
.kr-note { margin: 16px 0 0; padding: 11px 14px; border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 10px; background: rgba(var(--accent-rgb), .05); color: var(--ink-2); }
.kr-more { margin-top: 18px; border-top: 1px solid var(--border); }
.kr-more summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; list-style: none; font-weight: 600; color: var(--ink); cursor: pointer; }
.kr-more summary::-webkit-details-marker { display: none; }
.kr-more summary::after { content: "+"; font-size: 1.3rem; font-weight: 300; color: var(--ink-3); }
.kr-more[open] summary::after { content: "\2212"; }
.kr-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kr-more ul { margin: 0 0 8px; padding-left: 1.2em; list-style: disc; font-size: .9rem; line-height: 1.7; color: var(--ink-2); }
@media (max-width: 560px) { .kr-product__card { padding: 26px 22px 18px; } .ksec.kr-product { padding-bottom: 72px; } }

/* ---------- footer ---------- */
body > main { flex: 1 0 auto; }
/* one compact block, centred under a hairline: the Join the Discord button on the editors side, then one small muted
   line with the copyright and the two legal pages (owner, 2026-09-25: only the Discord button is required) */
.site-footer { position: relative; border-top: 1px solid var(--border); padding: 28px 0 26px; }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.footer__discord { padding: 12px 20px; font-size: 13px; letter-spacing: .8px; }
.footer__discord svg { width: 18px; height: 18px; flex: none; }
.footer__legal { margin: 0; font-size: .78rem; color: var(--ink-3); }
.footer__legal a { color: inherit; text-decoration: none; transition: color .2s ease; }
.footer__legal a:hover { color: var(--ink); }

/* ---------- the learn page: its structure, in B3N's glass, amber and Inter ---------- */
/* Source: thestickleymethod.com (a hero with one headline, one line and one big call to action; a compact stats
   strip with dividers that counts up; cards with a badge astride the top edge, a name, a figure, a line, a check
   list and a full-width button). Their proportions and rhythm; our tokens. */
.khero--guide .khero__content { padding: 56px 20px 52px; }
.khero--guide .khero__ctas { margin-top: 30px; }
/* the one call to action, at their hero button's size (btn-hero: 20px 44px, a soft shadow in the accent) */
.btn--hero { padding: 19px 44px; }
/* the cards section: its rhythm (64px 0 56px, the header 36px above the grid), the badge astride the top edge */
.ksec--plans { padding: 64px 0 56px; }
.ksec--plans .section-header { margin-bottom: 36px; }
.ksec--plans .kp-section { padding-top: 0; }
.kpz__grid--plans .kpz__badge { top: -13px; right: 22px; background: var(--bg); }
.kpz__grid--plans .kpz__badge--accent { background: var(--accent); }
/* two cards side by side (owner, 2026-09-26) */
.kpz__grid--plans { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
/* the billing toggle: Monthly and Yearly as a pair of radios in the Editors / Brands well, the checked one the white pill;
   the second carries a small amber chip. CSS alone switches the figures (:has), so it works without JavaScript. */
.kbill { display: flex; justify-content: center; margin: -8px 0 34px; padding: 0; border: 0; min-width: 0; }
.kbill__opt { cursor: pointer; gap: 8px; }
.kbill__radio:checked + .kbill__opt { color: var(--well-pill-ink); background: var(--well-pill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 7px rgba(0, 0, 0, .35); }
.kbill__radio:focus-visible + .kbill__opt { outline: 2px solid var(--accent); outline-offset: 2px; }
.kbill__save { padding: 2px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--on-accent); background: var(--accent); }
/* both price sets share one cell, so the card never changes height; the other set slides and fades away */
.kprice { display: grid; }
.kprice__set { grid-area: 1 / 1; transition: opacity .22s cubic-bezier(.33, 0, .67, 1), transform .22s cubic-bezier(.33, 0, .67, 1), visibility 0s linear 0s; }
.kprice__set--yearly, .ksec--plans:has(#billYearly:checked) .kprice__set--monthly { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .22s cubic-bezier(.33, 0, .67, 1), transform .22s cubic-bezier(.33, 0, .67, 1), visibility 0s linear .22s; }
.ksec--plans:has(#billYearly:checked) .kprice__set--yearly { opacity: 1; visibility: visible; transform: none; transition: opacity .22s cubic-bezier(.33, 0, .67, 1), transform .22s cubic-bezier(.33, 0, .67, 1), visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) {
  .kprice__set, .kprice__set--yearly, .ksec--plans:has(#billYearly:checked) .kprice__set--monthly, .ksec--plans:has(#billYearly:checked) .kprice__set--yearly { transition: none; transform: none; }
}

/* the two cards (owner, 2026-09-26). The names in tracked capitals. A pair of metal cards on one construction: a matte
   near-black surface with faint brushed striations and a still sheen at the top left, a thin metal rim, the name and price
   in the metal, muted grey lines, no outer glow. One in gold with the amber button (the obvious way in), one in platinum
   with a black button and a platinum rim. Nothing borrowed from any card brand. */
.kpz__name--plan { letter-spacing: .14em; text-transform: uppercase; }
.kpz__card--gold { --metal-rim: linear-gradient(135deg, #ffe0a8 0%, #8a5a1c 100%); --metal-price: linear-gradient(135deg, #ffe7bf 0%, #d9913a 100%); --metal-name: #ffb340; --metal-tick: #ffb340; }
.kpz__card--platinum { --metal-rim: linear-gradient(135deg, #d9d9de 0%, #6e6e76 100%); --metal-price: linear-gradient(135deg, #f2f2f5 0%, #a9a9b2 100%); --metal-name: #d9d9de; --metal-tick: #c8c8ce; }
.kpz__card--gold, .kpz__card--platinum {
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 32%) padding-box,
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, rgba(255, 255, 255, 0) 1px 3px) padding-box,
    linear-gradient(180deg, #141416 0%, #0b0b0c 100%) padding-box,
    var(--metal-rim) border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--shadow-card);
}
.kpz__card--gold:hover, .kpz__card--platinum:hover { border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--shadow-card-hover); }
.kpz__card--gold .kpz__name, .kpz__card--platinum .kpz__name { color: var(--metal-name); }
.kpz__card--gold .kpz__price, .kpz__card--platinum .kpz__price { background: var(--metal-price); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpz__card--gold .kpz__price small, .kpz__card--platinum .kpz__price small { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #9a9aa2; color: #9a9aa2; }
.kpz__card--gold .kpz__per, .kpz__card--platinum .kpz__per { color: #9a9aa2; }
.kpz__card--gold .kpz__per strong, .kpz__card--platinum .kpz__per strong { font-weight: 600; color: #b8b8c0; }
.kpz__card--gold .kpz__features li, .kpz__card--platinum .kpz__features li { color: #a6a6ae; }
.kpz__card--gold .kpz__check, .kpz__card--platinum .kpz__check { color: var(--metal-tick); }
.btn--platinum { color: #f2f2f5; background: linear-gradient(180deg, #111, #000); box-shadow: inset 0 0 0 1px rgba(217, 217, 222, .7), inset 0 1px rgba(255, 255, 255, .22), 0 10px 30px rgba(0, 0, 0, .5); }
.btn--platinum:hover { background: linear-gradient(180deg, #1a1a1a, #050505); box-shadow: inset 0 0 0 1px rgba(236, 236, 240, .95), inset 0 1px rgba(255, 255, 255, .3), 0 15px 40px rgba(0, 0, 0, .56), 0 8px 30px rgba(220, 220, 230, .18); }

/* ---------- the logo strip on the get paid page ---------- */
/* the seven logos gliding in a seamless loop under the heading: two identical sets, each the seven logos three times over
   (wider than the strip, which stops at 1280px), the track sliding one set (-50%) in 120s (20s a logo), paused on
   hover and on keyboard focus (a link clicked with the mouse lets go of its focus: script.js), still under reduced motion. Each logo is its server's join link. Source: Vercel's customer logo marquee (the doubled row and
   the translateX(-50%) loop) and Alvar's strip motion (a slow linear glide). */
.kmarquee {
  position: relative; z-index: 1; overflow: hidden;
  max-width: var(--max-width); margin: 34px auto -10px;
  /* room inside the clip for the hover lift and the focus ring (2px + 4px offset), so neither is cropped;
     the margins give the 10px back so the strip sits exactly where it did */
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.kmarquee__track { display: flex; width: max-content; animation: kmarquee 120s linear infinite; will-change: transform; }
.kmarquee:hover .kmarquee__track, .kmarquee:has(.kmarquee__link:focus-visible) .kmarquee__track { animation-play-state: paused; }
.kmarquee__group { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.kmarquee__link { display: block; flex: none; border-radius: 10px; }
.kmarquee__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.kmarquee__logo { display: block; height: 40px; width: auto; margin: 0; opacity: .78; transition: opacity .2s ease, transform .2s ease; }
.kmarquee__link:hover .kmarquee__logo { opacity: 1; transform: translateY(-2px); }
@keyframes kmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- the lab (/lab, preview only): candidate elements, each named with its source ---------- */
.ksec--lab { padding: 64px 0 16px; }
.lab__tag { display: block; margin: 0 0 22px; color: var(--ink-3); }
/* 01 the lit horizon. Source: Alvar kshot (the lit top edge of the frame, light bleeding upward, a reflection below);
   the rules this site carried in 9f154cd, scoped to the lab. */
.lab-horizon .kstage { margin-top: 48px; }
.lab-horizon .kstage__panel { border: 1px solid rgba(255, 255, 255, .12); border-top-color: rgba(255, 240, 210, .55); box-shadow: inset 0 1px 0 rgba(255, 246, 224, .34), 0 44px 90px -30px rgba(0, 0, 0, .9), 0 0 90px -34px rgba(var(--accent-rgb), .4); }
.lab-horizon .kstage::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: -140px; height: 140px; pointer-events: none;
  background:
    radial-gradient(ellipse 22% 100% at 50% 100%, rgba(255, 246, 224, .62) 0%, rgba(255, 236, 196, .30) 22%, rgba(var(--accent-rgb), .26) 46%, transparent 76%),
    radial-gradient(ellipse 58% 62% at 50% 100%, rgba(var(--accent-rgb), .28) 0%, rgba(var(--accent-rgb), .12) 42%, transparent 78%),
    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(var(--accent-rgb), .12) 0%, rgba(var(--accent-rgb), .04) 52%, transparent 84%);
  filter: blur(6px);
}
.lab-horizon .kstage::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -70px; height: 70px; pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(var(--accent-rgb), .16) 0%, rgba(var(--accent-rgb), .05) 45%, transparent 75%);
  filter: blur(10px);
}
.lab-horizon .kstage__panel::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent 1%, rgba(var(--accent-rgb), .55) 8%, rgba(255, 240, 210, .9) 24%, #fff6e2 42%, #fff6e2 58%, rgba(255, 240, 210, .9) 76%, rgba(var(--accent-rgb), .55) 92%, transparent 99%);
}

/* 02 ribbed glass. Source: Alvar hero__flutes (ribs 7.5vw wide, lit on one edge and dark on the other, a light sweeping
   across them) and Apple's frosted panels. Amber, softer, and the sweep is 14s of CSS mask motion instead of their
   pointer script. The second demo puts the ribs on the stage panel's own surface. */
.lab-flutes {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  height: clamp(320px, 42vw, 560px);
  border-radius: var(--radius); border: 1px solid var(--glass-border);
  background: var(--bg);
}
.lab-flutes .hero__ambient { z-index: 0; top: 58%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--accent-rgb), .3) 0%, rgba(var(--accent-rgb), .1) 42%, transparent 70%); }
.lab-flutes__ribs { position: absolute; inset: 0; z-index: 1; --flute: 7.5vw; pointer-events: none; }
.lab-flutes__ribs::before, .lab-flutes__ribs::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .2) 0, rgba(var(--accent-rgb), .065) calc(var(--flute) * .15), rgba(0, 0, 0, 0) calc(var(--flute) * .4), rgba(0, 0, 0, .26) calc(var(--flute) * .78), rgba(0, 0, 0, .36) calc(var(--flute) * .94), rgba(var(--accent-rgb), .2) var(--flute));
}
.lab-flutes__ribs::after {
  background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .5) 0, rgba(var(--accent-rgb), .18) calc(var(--flute) * .15), rgba(0, 0, 0, 0) calc(var(--flute) * .4), rgba(0, 0, 0, .12) calc(var(--flute) * .78), rgba(0, 0, 0, .18) calc(var(--flute) * .94), rgba(var(--accent-rgb), .5) var(--flute));
  -webkit-mask: linear-gradient(90deg, transparent, #000 50%, transparent) -82% 0 / 45% 100% no-repeat;
          mask: linear-gradient(90deg, transparent, #000 50%, transparent) -82% 0 / 45% 100% no-repeat;
  animation: lab-sweep 14s linear infinite;
}
@keyframes lab-sweep { from { -webkit-mask-position: -82% 0; mask-position: -82% 0; } to { -webkit-mask-position: 182% 0; mask-position: 182% 0; } }
.lab-flutes__word { position: relative; z-index: 2; margin: 0; font-size: clamp(2.2rem, 5.4vw, 4.2rem); font-weight: 800; letter-spacing: -.038em; line-height: 1.02; color: var(--ink); text-align: center; }
.lab-ribbed .kstage { margin-top: 40px; }
.kstage--ribbed .kstage__panel::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; --flute: 3.2vw;
  background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .16) 0, rgba(var(--accent-rgb), .05) calc(var(--flute) * .15), rgba(0, 0, 0, 0) calc(var(--flute) * .4), rgba(0, 0, 0, .2) calc(var(--flute) * .78), rgba(0, 0, 0, .28) calc(var(--flute) * .94), rgba(var(--accent-rgb), .16) var(--flute));
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
/* 03 the cursor spotlight. Source: Linear's and Vercel's cards (a soft radial light at the pointer, the border lit where
   it passes); pointer only, nothing on touch. lab.js writes --mx and --my. */
.lab-spot .kpz__card { --mx: 50%; --my: 50%; }
@media (hover: hover) and (pointer: fine) {
  .lab-spot .kpz__card::before, .lab-spot .kpz__card::after {
    content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .4s ease;
  }
  .lab-spot .kpz__card::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--accent-rgb), .14), transparent 62%); }
  .lab-spot .kpz__card::after {
    inset: -1px; padding: 1px; border-radius: calc(var(--radius) + 1px);
    background: radial-gradient(300px circle at var(--mx) var(--my), rgba(var(--accent-rgb), .85), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
  }
  .lab-spot .kpz__card:hover::before, .lab-spot .kpz__card:hover::after { opacity: 1; }
}
/* 04 the border beam. Source: Magic UI's border beam and Aceternity's moving border (a conic light masked to the
   1px ring, one turn in 6s); the rules this site carried in 1588571, scoped to the lab; still under reduced motion. */
@property --lab-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.lab-beam { max-width: 380px; margin: 40px auto 0; }
.lab-beam .kpz__card::before {
  content: ""; position: absolute; inset: -1px; z-index: 0; pointer-events: none;
  border-radius: calc(var(--radius) + 1px);
  padding: 1px;
  background: conic-gradient(from var(--lab-angle), transparent 0deg, transparent 250deg, rgba(var(--accent-rgb), .35) 290deg, var(--accent-hover) 320deg, rgba(var(--accent-rgb), .35) 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: lab-beam 6s linear infinite;
}
@keyframes lab-beam { to { --lab-angle: 360deg; } }
/* 05 the bento grid. Source: Apple's product bento grids, Raycast's and Linear's feature tiles (mixed spans, glass,
   an inner glow at the top of each tile). Real content only: the three figures, the REC line, the six logos, the four accounts. */
.lab-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.lab-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  min-height: 150px; padding: 26px 24px;
  border-radius: var(--radius); border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-top), var(--shadow-card);
  color: inherit;
}
.lab-tile::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--accent-rgb), .16), transparent 70%); }
.lab-tile > * { position: relative; }
.lab-tile--2 { grid-column: span 2; }
.lab-tile--3 { grid-column: span 3; }
.lab-tile--4 { grid-column: span 4; }
.lab-tile strong { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.lab-tile span { font-size: .9rem; color: var(--ink-2); }
.lab-tile__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
a.lab-tile { transition: transform .5s var(--ease-card), border-color .3s ease; }
a.lab-tile:hover { transform: translateY(-4px); border-color: var(--hair-2); }
@media (max-width: 900px) {
  .lab-tile--2, .lab-tile--3, .lab-tile--4 { grid-column: span 3; }
}
@media (max-width: 600px) {
  .lab-bento { grid-template-columns: 1fr; }
  .lab-tile--2, .lab-tile--3, .lab-tile--4 { grid-column: auto; }
  .lab-flutes__ribs { --flute: 14vw; }
  .kstage--ribbed .kstage__panel::after { --flute: 7vw; }
}

/* ---------- breakpoints ---------- */
@media (max-width: 1024px) {
  .kpz__grid--four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  /* the card grid becomes a swipe rail with dots; its padding box holds the glow around the cards, and
     negative margins hand that room back to the layout */
  .kpz__grid {
    display: flex; gap: 16px;
    max-width: none; margin: -36px -16px -26px;
    padding: 36px 16px 40px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .kpz__grid::-webkit-scrollbar { display: none; }
  .kpz__grid > .kpz__card { flex: 0 0 min(84vw, 360px); scroll-snap-align: center; }
  /* the get paid cards stay a grid: the big ones one to a row, the small ones two to a row (one on phones) */
  .kpz__grid--big, .kpz__grid--small, .kpz__grid--one { display: grid; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .kpz__grid--small { margin-top: 16px; }
  .kpz__grid--big { grid-template-columns: repeat(2, 1fr); }
  .kpz__grid--small { grid-template-columns: 1fr 1fr; }
  .kpz__grid--big > .kpz__card, .kpz__grid--small > .kpz__card { flex: none; }
  .kpz__card:hover { transform: none; }
  .kpz__dots { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 7px; margin: 0; }
  .kpz__dots button {
    width: 7px; height: 7px; padding: 0; border-radius: 50%;
    background: rgba(var(--ink-rgb), .2);
    transition: background .2s ease, width .2s ease;
  }
  .kpz__dots button.on { width: 22px; border-radius: 99px; background: var(--accent); }
}
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .ksec { padding-top: 88px; }
  .khero__content { padding-top: 64px; }
  .kstage { margin-top: 52px; padding: 0 16px; }
  .kstage__panel { border-radius: var(--radius-sm); }
  .kscroll { margin-top: 40px; }
}
@media (min-width: 750px) {
  .kform__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .khero__ctas { flex-direction: column; gap: 10px; width: 100%; }
  .khero__ctas .btn { width: 100%; padding: 14px 24px; }
}
@media (max-width: 480px) {
  .kpz__grid--small { grid-template-columns: 1fr; }
  .kpz__grid--big { grid-template-columns: 1fr; }
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* touch: 44px targets */
@media (hover: none) and (pointer: coarse) {
  .seg-btn { min-height: 40px; }
  .kpz__dots { gap: 17px; padding: 9px 0; }
  .kpz__dots button { position: relative; }
  .kpz__dots button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
}

/* ---------- the reviews (owner, 2026-09-27) ---------- */
/* the review page (/review): the contact page's layout (the title left in the 726px column, one glass panel per step);
   step 2 and the thanks stay hidden until they are reached */
.khero--review .khero__content { max-width: 766px; padding: 40px 20px 0; text-align: left; }
.khero--review .section-badge { margin-bottom: 14px; }
.khero--review .khero__heading { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: .95; text-transform: uppercase; color: var(--ink); background: linear-gradient(90deg, rgba(var(--ink-rgb), .98), rgba(var(--ink-rgb), .78)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ksec--review { padding-top: 76px; }
.ksec--review .kp-section { padding-top: 0; }
.kreview[hidden] { display: none; }
.kreview__lead { margin: 0 0 20px; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.kreview__title { margin: 0 0 22px; font-size: 1.15rem; font-weight: 700; color: var(--ink); outline: none; }
.kreview__set { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.kreview__legend { margin: 0 0 10px; padding: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kreview__plugins { display: flex; flex-wrap: wrap; gap: 10px; }
.kreview__choice { padding: 10px 16px; border: 1px solid var(--glass-border); border-radius: 999px; background: rgba(var(--ink-rgb), .04); font-size: .9rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.kreview__radio:checked + .kreview__choice { border-color: rgba(var(--accent-rgb), .8); background: rgba(var(--accent-rgb), .12); color: var(--ink); }
.kreview__radio:focus-visible + .kreview__choice { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the rating: five native radios (arrow keys move between them), each label a star; the chosen star and the ones before it
   in the accent, and while the pointer is over a star, that star and the ones before it instead (the hover preview) */
.kstars__row { display: inline-flex; gap: 4px; }
.kstars__star { display: inline-flex; padding: 2px; border-radius: 8px; color: rgba(var(--ink-rgb), .25); cursor: pointer; transition: color .15s ease; }
.kstars__star svg { width: 30px; height: 30px; fill: currentColor; }
.kstars__row label:has(~ .kstars__input:checked), .kstars__input:checked + .kstars__star { color: var(--accent); }
.kstars__row:has(.kstars__star:hover) .kstars__star { color: rgba(var(--ink-rgb), .25); }
.kstars__row:has(.kstars__star:hover) .kstars__star:hover, .kstars__row .kstars__star:has(~ .kstars__star:hover) { color: var(--accent); }
.kstars__input:focus-visible + .kstars__star { outline: 2px solid var(--accent); outline-offset: 2px; }
.kreview__count { margin: -12px 0 20px; font-size: .75rem; text-align: right; color: var(--ink-3); }
.kreview__done { max-width: 726px; margin: 0 auto; padding: 30px 22px; border: 1px solid var(--glass-border); border-radius: 18px; background: var(--panel-bg); text-align: center; outline: none; }
.kreview__thanks { margin: 0 0 22px; font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.msg.info { background: rgba(var(--ink-rgb), .05); color: var(--ink-2); border: 1px solid var(--glass-border); }
@media (max-width: 749px) {
  .khero--review .khero__heading { font-size: 24px; }
  .khero--review .khero__content { padding-left: 16px; padding-right: 16px; }
  .ksec--review { padding-top: 60px; }
}
/* the stars shown on a review and on a plugin card: five masked stars, filled to the nearest half */
.kstars-show { display: inline-flex; gap: 2px; flex: none; }
.kst { width: 14px; height: 14px; background: rgba(var(--ink-rgb), .22); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.1l-5.7 3.2 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.1l-5.7 3.2 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.kst--on { background: var(--accent); }
.kst--half { background: linear-gradient(90deg, var(--accent) 50%, rgba(var(--ink-rgb), .22) 50%); }
/* the average on a card, only when it has a review */
.krev-agg { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .85rem; color: var(--ink-2); }
.krev-agg__avg { font-weight: 700; color: var(--ink); }
.krev-agg__n { color: var(--ink-3); }
/* the reviews banner under the cards (owner, 2026-09-27): the get paid page's strip (.kmarquee: two sets, the loop, the
   pause on hover and keyboard focus, still under reduced motion) carrying review cards, its speed set per render
   (--kmq-time, 9s a card); one or two reviews stand still and centred. Nothing renders without a real review. */
.krevs { padding-top: 8px; }
.krevs .section-header { margin-bottom: 0; }
.kmarquee--reviews { margin-top: 10px; }
.kmarquee--reviews .kmarquee__track { animation-duration: var(--kmq-time, 60s); }
.kmarquee--reviews .kmarquee__group { align-items: stretch; gap: 20px; padding-right: 20px; }
.krevs__still { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: var(--max-width); margin: 20px auto 0; padding: 0 16px; }
.krev { display: flex; flex-direction: column; gap: 12px; flex: none; width: 300px; max-width: 100%; margin: 0; padding: 20px 20px 18px; border: 1px solid var(--glass-border); border-radius: 18px; background: var(--panel-bg); box-shadow: inset 0 1px 0 var(--glass-top); }
.krev__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.krev__plugin { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.krev__text { margin: 0; }
.krev__text p { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; font-size: .92rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; color: var(--ink); }
.krev__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: auto 0 0; font-size: .8rem; color: var(--ink-3); }
.krev__who { font-weight: 600; color: var(--ink-2); }
.krev .krev__tiktok { display: inline; color: var(--accent); text-decoration: none; border-radius: 4px; }
.krev .krev__tiktok:hover { text-decoration: underline; }
.krevs__cta { margin: 28px 0 0; text-align: center; }
.krevs__link { font-size: .92rem; font-weight: 600; color: var(--accent); text-decoration: none; border-radius: 4px; }
.krevs__link:hover { text-decoration: underline; }
.krevs__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero__ambient, .kpz__crownmark::before, .kpz__crownmark i { animation: none; }
  .kmarquee__track, .lab-flutes__ribs::after, .lab-beam .kpz__card::before { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- lite mode (owner, 2026-10-10): graphics acceleration off ---------- */
/* lite.js, in the head, puts class="lite" on <html> when the browser has no GPU to draw with (acceleration switched
   off, a software renderer, or frames measured slow). Without one every backdrop blur and large glow blur is worked out
   again on the processor for each scrolled frame, and the veil runs in a software renderer. So here every rule above
   that costs frames has its counterpart: the same look at rest, the cost per frame gone. With a GPU none of this applies.
   THE RULE FOR EVERY LATER CHANGE (the page suite fails without it): a rule added above with a backdrop-filter, a
   blur() filter, an infinite animation, a will-change or a mix-blend-mode gets its html.lite counterpart here: the
   glass as a flat or gradient fill in the same hue and a little more opaque, the blur as a gradient shaped to the
   blurred glow, the animation stopped on a good frame. Hover and focus feedback stays, it is brief. */
/* the registered tokens: the dock still changes width on a side switch, the accent changes at once (gliding it repaints
   everything in the accent on every frame); the glass fill a little more opaque now that nothing is blurred under it */
html.lite { --glass-bg: rgba(255, 255, 255, .04); transition: --dock-section .42s cubic-bezier(.33, 0, .67, 1); }
@media (prefers-reduced-motion: reduce) { html.lite { transition: none; } }
/* no backdrop blur and no layer hint is left in effect anywhere, whatever a later rule or a variant adds; under a
   variant every animation stops too (a variant's own are all decorative loops, see variants/default.css) and no layer
   is blended (a variant's glows lie over a plain ground, where a normal blend reads the same); a variant's blur()
   filters have their counterparts in its own file, the page suite holds each variant sheet to that */
html.lite *, html.lite *::before, html.lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; will-change: auto !important; }
html.lite[data-variant] *, html.lite[data-variant] *::before, html.lite[data-variant] *::after { animation: none !important; mix-blend-mode: normal !important; }
/* the glass. The dock and the drawer lie over the page as it scrolls, so they are nearly opaque: the dock a dark glass
   with a breath of the side's veil colour (what its blur showed), the drawer and its overlay their own fills, denser;
   the overlay fades in fast. The panels in the page (the stage, the cards, the pill, the ways in, the form) only
   ever had soft glows behind them: the same fills, a little denser, with no blur. */
html.lite .cube-dock { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(var(--veil-rgb), .12), rgba(var(--veil-rgb), .04)), rgba(8, 6, 4, .9); }
html.lite .dock-drawer { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(18, 8, 4, .97); }
html.lite .drawer-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .74); transition: opacity .15s ease; }
html.lite .kstage__panel, html.lite .kpz__card { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.lite .kdisc__pill { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(9, 7, 5, .66); }
html.lite .kway { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.lite .kway:not(:hover):not(:focus-visible) { background-color: rgba(255, 255, 255, .07); }
html.lite .kform { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 9, 7, .82); }
/* a card's hover moves it and lights its rim; its large soft shadow changes at once (gliding it repaints the blur on
   every frame) */
html.lite .kpz__card { transition: transform .5s var(--ease-card), border-color .3s ease; }
/* the veil: veil.js makes no context and runs no loop. The wrapper shows a still instead: the shader's opening frame
   at this side's hue with the wrapper's brightness, contrast, mask, opacity and screen blend already in its pixels
   (tests/veil_still.mjs draws the four files: each side, and the closer framing a 2x screen sees), stretched over it as
   the shader stretches its field, so nothing is left to composite and it is there without WebGL too. The still is opaque and lies over the glow, so
   the glow stays lit under it and is the picture until the still has arrived (a first visit, a slow line), as it is
   under the live veil until its first frame; only the hero's foot fade, which lies over the wrapper, steps aside. The
   other side's still is the second layer, hidden under the first: it is fetched with it, so a side switch never waits
   for its picture. The stills are this design's: under a variant (variants/default.css) the wrapper stays empty and
   the hero's glow is the picture. */
html.lite .canvas-wrapper { opacity: 1; mix-blend-mode: normal; filter: none; -webkit-mask-image: none; mask-image: none; background: center / 100% 100% no-repeat; }
html.lite:not([data-variant]) .canvas-wrapper { background-image: url(/assets/veil-editors.png?v=450d9c25), url(/assets/veil-brands.png?v=6f3d161c); }
html.lite:not([data-variant])[data-side="brands"] .canvas-wrapper { background-image: url(/assets/veil-brands.png?v=6f3d161c), url(/assets/veil-editors.png?v=450d9c25); }
@media (min-resolution: 1.5dppx) {
  html.lite:not([data-variant]) .canvas-wrapper { background-image: url(/assets/veil-editors-2x.png?v=8dd1f819), url(/assets/veil-brands-2x.png?v=a7be1447); }
  html.lite:not([data-variant])[data-side="brands"] .canvas-wrapper { background-image: url(/assets/veil-brands-2x.png?v=a7be1447), url(/assets/veil-editors-2x.png?v=8dd1f819); }
}
html.lite .hero__veil { visibility: hidden; transition: none; }
html.lite .hero__bg--veil:has(.hero__veil.is-on) .hero__ambient { opacity: .7; }
html.lite:not([data-variant]) .khero:has(.hero__bg--veil)::after { display: none; }
/* the glows: still, at the middle of their breath, each gradient reshaped to what its blur made of it (a lower peak, a
   longer tail) */
html.lite .hero__ambient { animation: none; filter: none; opacity: .7; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--veil-rgb), .23) 0%, rgba(var(--veil-rgb), .2) 12%, rgba(var(--veil-rgb), .1) 42%, rgba(var(--veil-rgb), .02) 70%, transparent 94%); }
html.lite .lab-flutes .hero__ambient { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--accent-rgb), .23) 0%, rgba(var(--accent-rgb), .2) 12%, rgba(var(--accent-rgb), .1) 42%, rgba(var(--accent-rgb), .02) 70%, transparent 94%); }
html.lite .kstage::before { filter: none; }
html.lite .lab-horizon .kstage::before, html.lite .lab-horizon .kstage::after { filter: none; }
html.lite .kpz__crownmark::before { animation: none; filter: none; opacity: .9; width: 244px; height: 126px; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(240, 208, 96, .17) 0%, rgba(240, 208, 96, .08) 57%, rgba(240, 208, 96, .02) 86%, transparent 100%); }
html.lite .kpz__crownmark i { animation: none; }
html.lite .lab-flutes__ribs::after, html.lite .lab-beam .kpz__card::before { animation: none; }
/* the logo strip (.kmarquee__track) keeps gliding: it moves by transform alone, on one small strip; the page suite
   holds it to that */