/* ==========================================================================
   Hotkey Labs — site styles
   Tokens → base → components (keycaps, buttons) → sections → pages
   ========================================================================== */

/* Paper Mono (SIL Open Font License, see assets/fonts/PaperMono-OFL.txt) */
@font-face {
  font-family: "Paper Mono";
  src: url("/assets/fonts/PaperMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core palette */
  --paper: #F4F3EC;
  --paper-2: #ECE9E0;
  --paper-3: #E2DED2;
  --card: #FBFAF7;
  --ink: #121211;
  --ink-2: #33322E;
  --muted: #6B6860;
  --faint: #9C988D;
  --line: rgba(18, 18, 17, .10);
  --line-2: rgba(18, 18, 17, .18);

  /* The hot key */
  --hot: #EC5B35;
  --hot-deep: #B9401F;
  --hot-soft: #FFE2D6;

  /* Supporting key colours (work, tags) */
  --cobalt: #2F4DFF;
  --lilac: #B7A6FF;
  --lime: #D5F35A;
  --sun: #FFC83C;
  --mint: #3FD6A0;
  --sand: #E7D8B4;

  /* Dark surfaces */
  --night: #121211;
  --night-2: #1B1B19;
  --night-3: #252522;
  --night-line: rgba(244, 243, 236, .10);

  --font-sans: "Paper Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-mono: "Paper Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;

  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 24px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 72px;
}

/* Dark theme (toggled via the moon/sun button, stored per visitor) */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121211;
  --paper-2: #1D1D1B;
  --paper-3: #272724;
  --card: #191917;
  --ink: #F4F3EC;
  --ink-2: #D9D7CF;
  --muted: #A3A097;
  --faint: #77746C;
  --line: rgba(244, 243, 236, .10);
  --line-2: rgba(244, 243, 236, .18);
  --hot-soft: #3A2118;
  --night: #0A0A09;
  --night-2: #161614;
  --night-3: #23231F;
  --night-line: rgba(244, 243, 236, .09);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Monospace spaces are as wide as letters. Tighten every word gap to a standard space,
   declared on each element so the em resolves against that element's own font size. */
:root { --ws: -0.29em; }
*, *::before, *::after { word-spacing: var(--ws); }
blockquote, .serif { --ws: normal; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
html.theme-anim body, html.theme-anim body * { transition: background-color .3s ease, color .3s ease, border-color .3s ease !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--hot); color: #fff; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.display {
  font-weight: 600;
  font-size: clamp(2.5rem, .6rem + 5.6vw, 6.25rem);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.h2 {
  font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 2.9vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.h3 { font-weight: 600; font-size: clamp(1.375rem, 1.1rem + .8vw, 1.875rem); line-height: 1.1; letter-spacing: -.03em; }
/* Upright type only, everywhere on the site */
em, i, cite, dfn, address, var { font-style: normal; }
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.02em; }
.lead { font-size: clamp(1rem, .95rem + .25vw, 1.1875rem); line-height: 1.55; color: var(--ink-2); letter-spacing: -.01em; text-wrap: pretty; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.dot-hot { color: var(--hot); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--hot);
  box-shadow: 0 0 0 3px rgba(236, 91, 53, .16);
}
.on-dark .eyebrow { color: var(--s-fg-2); }

/* --------------------------------------------------------------------------
   Keycaps
   -------------------------------------------------------------------------- */
kbd, .kbd {
  --k-top: #FFFFFF;
  --k-bot: #F1EEE6;
  --k-side: #CFCABD;
  --k-ink: var(--ink);
  display: inline-grid; place-items: center;
  min-width: 1.85em; height: 1.85em; padding: 0 .5em;
  font: 500 .75rem/1 var(--font-mono);
  color: var(--k-ink);
  background: linear-gradient(180deg, var(--k-top), var(--k-bot));
  border-radius: .5em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 0 0 1px rgba(18, 18, 17, .14),
    0 2px 0 0 var(--k-side),
    0 2px 0 1px rgba(18, 18, 17, .14),
    0 4px 8px -2px rgba(18, 18, 17, .18);
  transform: translateY(-1px);
  white-space: nowrap;
}
.kbd-dark, .btn-primary kbd, html[data-theme="dark"] :where(kbd:not(.kbd-hot)) {
  --k-top: #3A3A36; --k-bot: #2B2B28; --k-side: #0B0B0A; --k-ink: rgba(244, 243, 236, .86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1px rgba(0, 0, 0, .5),
    0 2px 0 0 var(--k-side),
    0 2px 0 1px rgba(0, 0, 0, .5),
    0 4px 8px -2px rgba(0, 0, 0, .4);
}
.kbd-hot, .btn-hot kbd {
  --k-top: #EF7350; --k-bot: #EC5B35; --k-side: var(--hot-deep); --k-ink: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 0 0 1px rgba(110, 36, 15, .35),
    0 2px 0 0 var(--k-side),
    0 2px 0 1px rgba(110, 36, 15, .35),
    0 4px 8px -2px rgba(138, 47, 22, .35);
}
.btn-hot kbd { --k-top: #fff; --k-bot: #F6F1EC; --k-side: #E2B9A9; --k-ink: var(--hot-deep); }

.combo { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--font-mono); color: var(--faint); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: var(--h); padding: 0 12px 0 22px;
  border-radius: 999px;
  font-weight: 500; font-size: 1rem; letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s, box-shadow .25s, color .25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: 0 10px 24px -12px rgba(18, 18, 17, .55); }
.btn-primary:hover { background: #000; box-shadow: 0 16px 30px -14px rgba(18, 18, 17, .6); }
.btn-ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn-hot { background: var(--hot); color: #fff; box-shadow: 0 12px 28px -12px rgba(236, 91, 53, .7); }
.btn-hot:hover { background: #ED6542; }
.btn-light { background: #F4F3EC; color: #121211; }
.btn-light:hover { background: #fff; }
.btn-sm { --h: 40px; padding: 0 8px 0 16px; font-size: .9375rem; gap: 10px; }
.btn-block { width: 100%; justify-content: space-between; }
.btn .arrow { display: inline-block; transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.link-u { position: relative; }
.link-u::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.link-u:hover::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------------------------
   Announcement + nav
   -------------------------------------------------------------------------- */
.announce {
  background: var(--ink); color: rgba(244, 243, 236, .82);
  font-size: 13px; letter-spacing: -.005em;
}
.announce .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; text-align: center; }
.announce strong { color: var(--paper); font-weight: 500; }
.announce a { color: var(--paper); display: inline-flex; gap: 6px; align-items: center; }
.announce .led { width: 7px; height: 7px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 10px var(--hot); flex: none; animation: led 2.4s ease-in-out infinite; }
@keyframes led { 50% { opacity: .35; box-shadow: 0 0 2px var(--hot); } }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .3s;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo svg { height: 26px; width: auto; }
.logo-hot { transform-box: fill-box; transition: transform .15s ease-out; }
/* Nav logo: the wordmark wipes away into the mark once the page scrolls; the slot keeps its width so the links stay put */
.logo-slot { position: relative; flex: none; display: flex; align-items: center; width: calc(26px * 691.7 / 95); }
/* Speak with Sales slides in beside the collapsed mark once the nav sticks */
.nav-sales {
  position: absolute; left: calc(35px * 72 / 95 + 14px); top: 50%; margin-top: -17px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px 0 11px; border-radius: 999px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2);
  font: 500 13px/1 var(--font-mono); color: var(--ink); white-space: nowrap;
  opacity: 0; visibility: hidden; translate: -10px 0;
  transition: opacity .3s ease, translate .45s var(--ease-out), background .2s, visibility 0s linear .3s;
}
.nav-sales svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--hot); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-sales .ns-n { color: var(--muted); padding-left: 8px; border-left: 1px solid var(--line-2); }
.nav-sales:hover { background: var(--paper-2); }
.nav.is-stuck .nav-sales { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .35s ease .12s, translate .5s var(--ease-out) .12s, background .2s, visibility 0s; }
body[data-page="sales"] .nav-sales { display: none; }
/* Fit the pill to the room between the mark and the nav links (or the menu on small screens) */
.nav-sales .ns-s { display: none; }
@media (max-width: 1439px) and (min-width: 1180px), (max-width: 739px) and (min-width: 721px), (max-width: 519px) and (min-width: 420px) {
  .nav-sales .ns-l { display: none; }
  .nav-sales .ns-s { display: inline; }
}
@media (max-width: 1179px) and (min-width: 981px), (max-width: 419px) {
  .nav-sales .ns-l { display: none; }
  .nav-sales .ns-n { padding-left: 0; border-left: 0; }
}
@media (max-width: 720px) {
  .nav-sales { left: calc(35px * 72 / 95 + 10px); gap: 7px; height: 32px; margin-top: -16px; padding: 0 11px 0 10px; font-size: 12px; }
}
.nav .logo svg { --lh: 26px; height: var(--lh); width: calc(var(--lh) * 691.7 / 95); transition: width .55s var(--ease-out), height .55s var(--ease-out), translate .55s var(--ease-out); }
.nav .logo-word { transition: opacity .35s ease; }
.nav.is-stuck .logo svg { --lh: 35px; width: calc(var(--lh) * 72 / 95); translate: 0 calc(var(--lh) * 8 / 95); }
.nav.is-stuck .logo-word { opacity: 0; }
.logo:hover .logo-hot { transform: translateY(3px) scale(.92); }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 15px; color: var(--ink-2); letter-spacing: -.01em;
  transition: background-color .2s, color .2s;
}
.nav-links a:hover { background: var(--paper-2); color: var(--ink); }
.nav-links a { position: relative; }
.nav-links a kbd { position: absolute; left: 50%; top: calc(100% + 4px); translate: -50% 0; font-size: 10px; min-width: 1.7em; height: 1.7em; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.nav-links a:hover kbd { opacity: 1; transform: translateY(-1px); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.cmdk-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 8px 0 14px; border-radius: 999px;
  color: var(--muted); font-size: 14px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow .2s, color .2s;
}
.cmdk-trigger:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cmdk-trigger .combo kbd { font-size: 10.5px; }
.menu-btn { display: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 96px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(18, 18, 17, .09) 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-copy { display: grid; gap: 28px; justify-items: start; }
.hero .display .line { display: block; }
.hero-title { font-size: clamp(2.25rem, .6rem + 4vw, 4.75rem); line-height: 1.02; letter-spacing: -.04em; }
.hero .lead { max-width: 33rem; }
.lead strong { font-weight: 600; color: var(--ink); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-top: 8px; font-size: 13.5px; color: var(--muted); }
.hero-proof .clients { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.chip b { font-weight: 600; color: var(--ink); }
.chip .yc { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: #FF6600; color: #fff; font: 700 10px/1 var(--font-sans); }

/* The macropad */
.pad-stage { position: relative; display: grid; place-items: center; }
.pad-stage::before {
  content: ""; position: absolute; width: 120%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(closest-side, rgba(236, 91, 53, .22), rgba(236, 91, 53, .06) 55%, transparent 72%);
  filter: blur(8px);
}
.pad {
  --gap: clamp(9px, 1.1vw, 14px);
  width: min(100%, 470px);
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: clamp(26px, 3vw, 36px);
  background: linear-gradient(165deg, #34342F 0%, #1E1E1B 46%, #151513 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -3px 0 rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .03),
    0 60px 90px -50px rgba(40, 20, 0, .7),
    0 30px 50px -30px rgba(18, 18, 17, .55);
}
.pad-head { display: flex; gap: var(--gap); align-items: stretch; margin-bottom: var(--gap); }
.pad-screen {
  position: relative; flex: 1; min-width: 0;
  min-height: calc(4 * 1.45em + 24px);
  padding: 12px 14px; border-radius: 14px;
  background: #060606;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06);
  font: 500 clamp(10.5px, .95vw, 12.5px)/1.45 var(--font-mono);
  color: #EDEBE4;
  overflow: hidden;
}
.pad-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
}
.pad-screen .s1 { color: var(--hot); letter-spacing: .06em; text-shadow: 0 0 10px rgba(236, 91, 53, .55); }
.pad-screen .s2 { color: rgba(237, 235, 228, .85); text-shadow: 0 0 8px rgba(255, 255, 255, .18); }
.pad-screen .caret { display: inline-block; width: .6em; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--hot); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.pad-knob {
  flex: none; width: clamp(56px, 5.8vw, 74px); aspect-ratio: 1; border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, #2a2a27 0 38%, transparent 39%),
    conic-gradient(from 0deg, #8D8A82, #5A5853, #C9C6BD, #6F6C66, #A7A49B, #55534E, #8D8A82);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(0, 0, 0, .35), 0 0 0 4px #121211, 0 0 0 5px rgba(255, 255, 255, .06);
  align-self: center;
}
.pad-knob::after { content: ""; position: absolute; left: 50%; top: 9%; width: 3px; height: 22%; margin-left: -1.5px; border-radius: 2px; background: var(--hot); box-shadow: 0 0 6px var(--hot); }
.pad-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.pad-foot { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--gap) + 2px); padding: 0 4px; font: 500 10px/1 var(--font-mono); letter-spacing: .12em; color: rgba(244, 243, 236, .32); text-transform: uppercase; }
.pad-foot .leds { display: flex; gap: 6px; }
.pad-foot .leds i { width: 6px; height: 6px; border-radius: 50%; background: #3A3A36; }
.pad-foot .leds i.on { background: var(--hot); box-shadow: 0 0 8px var(--hot); }

.pk {
  --top: #FBFAF6; --top-hi: #FFFFFF; --side: #C2BDAF; --side-hi: #DCD7CA; --label: #121211; --sub: rgba(18, 18, 17, .42);
  position: relative; aspect-ratio: 1; border-radius: clamp(13px, 1.4vw, 18px);
  background: linear-gradient(180deg, var(--side-hi), var(--side));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 3px 0 rgba(0, 0, 0, .55), 0 14px 22px -10px rgba(0, 0, 0, .7);
  transition: transform .09s ease-out, box-shadow .09s ease-out;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}
.pk::before {
  content: ""; position: absolute; inset: 5% 7% 13% 7%; border-radius: clamp(9px, 1vw, 12px);
  background: linear-gradient(180deg, var(--top-hi), var(--top) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -8px 14px rgba(0, 0, 0, .05), 0 2px 3px rgba(0, 0, 0, .18);
  transition: inset .09s ease-out;
}
.pk .lbl, .pk .num { position: absolute; z-index: 1; pointer-events: none; font-family: var(--font-mono); transition: transform .09s ease-out; }
.pk .lbl { left: 17%; top: 14%; font-size: clamp(10px, 1vw, 12.5px); font-weight: 600; letter-spacing: .02em; color: var(--label); }
.pk .num { right: 17%; bottom: 22%; font-size: clamp(9px, .8vw, 10.5px); color: var(--sub); }
.pk .glyph { position: absolute; z-index: 1; inset: 5% 7% 13% 7%; display: grid; place-items: center; pointer-events: none; font: 500 clamp(18px, 2vw, 26px)/1 var(--font-mono); color: var(--label); transition: transform .09s ease-out; }
.pk:hover::before { background: linear-gradient(180deg, var(--top-hi), var(--top-hi)); }
.pk.is-down, .pk:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 1px 0 rgba(0, 0, 0, .55), 0 6px 10px -6px rgba(0, 0, 0, .7); }
.pk.is-down::before, .pk:active::before { inset: 8% 7% 9% 7%; }
.pk.is-down .lbl, .pk.is-down .num, .pk.is-down .glyph, .pk:active .lbl, .pk:active .num, .pk:active .glyph { transform: translateY(4%); }
.pk-gap { aspect-ratio: 1; }
.pk-hot .glyph { font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; }
.pk-dark { --top: #393935; --top-hi: #43433E; --side: #121211; --side-hi: #232320; --label: rgba(244, 243, 236, .7); --sub: rgba(244, 243, 236, .28); }
.pk-dark::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -8px 14px rgba(0, 0, 0, .2), 0 2px 3px rgba(0, 0, 0, .3); }
.pk-hot { --top: #EC5F39; --top-hi: #F08261; --side: #9B3518; --side-hi: #C74824; --label: #fff; --sub: rgba(255, 255, 255, .6); }
.pk-hot::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -8px 14px rgba(110, 27, 10, .18), 0 2px 3px rgba(0, 0, 0, .25); }
.pk-hot.is-lit::after { content: ""; position: absolute; inset: -10%; border-radius: 30%; background: radial-gradient(closest-side, rgba(236, 91, 53, .45), transparent); z-index: -1; animation: glow 1.2s ease-out forwards; }
@keyframes glow { from { opacity: 1; } to { opacity: 0; } }

.pad-hint { margin-top: 22px; display: flex; justify-content: center; gap: 8px; align-items: center; font: 500 12px var(--font-mono); color: var(--faint); }

/* --------------------------------------------------------------------------
   Stats strip
   -------------------------------------------------------------------------- */
.stats { border-block: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .num { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.stat .num sup { font-size: .45em; vertical-align: .9em; color: var(--hot); margin-left: .05em; }
.stat { container-type: inline-size; }
.stat .num.is-word { white-space: nowrap; font-size: min(clamp(2.25rem, 1.6rem + 2vw, 3.5rem), 15.5cqi); }
.stat p { font-size: 14px; color: var(--muted); max-width: 22ch; line-height: 1.4; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(80px, 10vw, 152px); }
.section-tight { padding-top: clamp(56px, 6.5vw, 100px); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .stack { display: grid; gap: 20px; }
.section-head .lead { max-width: 38rem; }
/* Testimonials and pricing: light sections in light mode, night sections in dark mode */
.on-dark {
  --s-bg: var(--paper); --s-fg: #121211; --s-fg-1: rgba(18, 18, 17, .86); --s-fg-2: rgba(18, 18, 17, .64); --s-fg-3: rgba(18, 18, 17, .48);
  --s-card: var(--card); --s-card-2: var(--paper-2); --s-line: var(--line); --s-line-2: var(--line-2);
  --s-hot-top: #FFEDE3; --s-hot-ink: var(--hot-deep); --s-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23121211' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --s-btn: #121211; --s-btn-fg: #F4F3EC; --s-btn-hover: #000;
  background: var(--s-bg); color: var(--s-fg);
}
html[data-theme="dark"] .on-dark {
  --s-bg: var(--night); --s-fg: #F4F3EC; --s-fg-1: rgba(244, 243, 236, .86); --s-fg-2: rgba(244, 243, 236, .66); --s-fg-3: rgba(244, 243, 236, .5);
  --s-card: var(--night-2); --s-card-2: var(--night-3); --s-line: var(--night-line); --s-line-2: rgba(244, 243, 236, .2);
  --s-hot-top: #2A1A14; --s-hot-ink: #F49A7E; --s-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23F4F3EC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --s-btn: #F4F3EC; --s-btn-fg: #121211; --s-btn-hover: #fff;
}
.on-dark .lead, .on-dark .muted { color: var(--s-fg-2); }
.quote-section { --s-bg: var(--paper-2); }
html[data-theme="dark"] .quote-section { --s-bg: var(--night); }

/* Work */
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.work-card { grid-column: span 6; display: grid; gap: 18px; }
.work-card.is-feature { grid-column: span 12; }
.work-media {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius);
  background: var(--c, var(--paper-2));
  aspect-ratio: 16 / 9;
}
.work-card.is-feature .work-media { aspect-ratio: 16 / 7.6; }
.work-media::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(0, 0, 0, .08) 1px, transparent 1.2px);
  background-size: 18px 18px; opacity: .8;
}
.work-media.is-dark::before { background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.2px); }
.browser {
  position: absolute; left: 8%; right: 8%; top: 12%; bottom: -2%;
  border-radius: 14px 14px 0 0; overflow: hidden;
  background: #fff;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .08);
  transition: transform .9s var(--ease-out);
}
.work-card.is-feature .browser { left: 14%; right: 14%; top: 12%; bottom: -4%; }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #F3F1EC; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #DAD6CC; }
.browser-bar span { margin-left: 10px; flex: 1; max-width: 260px; height: 18px; border-radius: 6px; background: #E7E4DC; font: 500 10px/18px var(--font-mono); color: #8F8B81; padding-inline: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.browser img { width: 100%; height: calc(100% - 30px); object-fit: cover; object-position: left top; }
/* Wide screenshots on a white page: show the full width instead of cropping the right edge */
.browser img.is-fit { object-fit: contain; object-position: center top; background: #fff; }
.work-card:hover .browser { transform: translateY(-14px); }
.work-tag-float {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.work-open {
  position: absolute; right: 16px; top: 16px; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  transform: scale(.6) rotate(-45deg); opacity: 0;
  transition: transform .45s var(--ease-out), opacity .3s;
}
.work-card:hover .work-open { transform: scale(1) rotate(0); opacity: 1; }
.work-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.work-meta h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.625rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.work-meta h3 span { color: var(--muted); font-weight: 400; }
.work-meta p { color: var(--muted); font-size: 15px; margin-top: 4px; max-width: 46ch; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--paper-2); font: 500 11.5px/1 var(--font-mono); color: var(--ink-2); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06); }

/* Quote */
.quote-section { position: relative; overflow: hidden; }
.quote-section > .wrap { position: relative; z-index: 1; }
.quote { position: relative; display: grid; gap: clamp(28px, 4vw, 48px); max-width: 1080px; }
.quote blockquote {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.25rem, 1.2rem + 3.9vw, 5.25rem);
  line-height: 1.02; letter-spacing: -.025em; text-wrap: balance;
}
.quote blockquote .hl { color: var(--hot); }
.quote-mark { width: clamp(56px, 6vw, 84px); height: auto; }
.quote-by { display: flex; align-items: center; gap: 16px; }
.avatar-key { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(180deg, #EF7350, var(--hot)); color: #fff; font: 600 16px/1 var(--font-mono); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 0 var(--hot-deep); }
.quote-by b { display: block; font-weight: 600; font-size: 17px; }
.quote-by span { color: var(--s-fg-2); font-size: 14.5px; }
.quote-bg-mark { position: absolute; right: -4%; top: 50%; translate: 0 -50%; width: min(44vw, 560px); opacity: .045; pointer-events: none; }

/* Testimonials */
.t-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
.t-big { display: grid; gap: clamp(28px, 3.4vw, 44px); padding-top: 8px; }
.t-big { max-width: 1120px; }
.t-big blockquote { font-family: var(--font-serif); font-size: clamp(1.75rem, 1rem + 2.3vw, 3.25rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: pretty; }
.t-big blockquote .hl, .t-card blockquote .hl { color: var(--hot); }
.t-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.t-card { align-content: space-between; }
.t-card { display: grid; gap: 26px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius); background: var(--s-card); box-shadow: inset 0 0 0 1px var(--s-line); transition: box-shadow .3s, transform .4s var(--ease-out); }
.t-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--s-line-2); }
.t-card blockquote { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.1rem + .75vw, 1.875rem); line-height: 1.1; letter-spacing: -.02em; }
.t-glyph { font: 400 64px/0.6 var(--font-serif); color: var(--hot); height: 28px; }
.quote-by .avatar-photo { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--s-line-2), 0 3px 0 var(--hot-deep); background: var(--s-card-2); }
.t-big .quote-by .avatar-photo, .t-big .quote-by .avatar-key { width: 60px; height: 60px; border-radius: 16px; }
.avatar-key.ink { background: linear-gradient(180deg, #3A3A36, #2A2A27); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #0B0B0A; }
.quote-by a { color: var(--s-fg); }
.quote-bg-mark g { fill: var(--s-fg); }
.quote-by .site { display: inline-block; margin-top: 2px; font: 500 12px var(--font-mono); color: var(--s-fg-3); }
.quote-by .site:hover { color: var(--hot); }

/* Process */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); counter-reset: step; }
.step {
  position: relative; display: grid; gap: 18px; align-content: start;
  padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  min-height: 300px;
}
.step .bigkey {
  --k-top: #FFFFFF; --k-bot: #F1EEE6;
  width: 76px; height: 76px; border-radius: 18px; font-size: 22px; font-weight: 600;
  margin-bottom: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 0 0 1px rgba(18, 18, 17, .14),
    0 6px 0 0 #CFCABD,
    0 6px 0 1px rgba(18, 18, 17, .14),
    0 16px 22px -8px rgba(18, 18, 17, .25);
  transition: transform .15s, box-shadow .15s;
}
.step:hover .bigkey { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(18,18,17,.14), 0 3px 0 0 #CFCABD, 0 3px 0 1px rgba(18,18,17,.14), 0 8px 14px -6px rgba(18,18,17,.25); }
.step.is-hot .bigkey { --k-top: #EF7350; --k-bot: var(--hot); --k-ink: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(110, 36, 15, .35), 0 6px 0 0 var(--hot-deep), 0 6px 0 1px rgba(110, 36, 15, .35), 0 16px 22px -8px rgba(138, 47, 22, .4); }
.step.is-hot:hover .bigkey { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(110, 36, 15, .35), 0 3px 0 0 var(--hot-deep), 0 3px 0 1px rgba(110, 36, 15, .35), 0 8px 14px -6px rgba(138, 47, 22, .4); }
.step h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; }
.step p { color: var(--muted); max-width: 34ch; }
.step .when { position: absolute; top: clamp(22px, 2.4vw, 32px); right: clamp(22px, 2.4vw, 32px); font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.step-plus { position: absolute; right: calc(clamp(14px, 1.6vw, 22px) / -2); top: 50%; z-index: 2; translate: 50% -50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 16px/1 var(--font-mono); color: var(--muted); }

/* Services keyboard */
.board {
  padding: clamp(10px, 1.4vw, 18px);
  border-radius: clamp(20px, 2.4vw, 32px);
  background: linear-gradient(180deg, #E6E2D7, #DCD7CA);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -4px 0 rgba(0, 0, 0, .07), 0 0 0 1px rgba(18, 18, 17, .08), 0 40px 70px -50px rgba(18, 18, 17, .5);
  display: grid; gap: clamp(7px, .8vw, 10px);
}
.board-row { display: flex; gap: clamp(7px, .8vw, 10px); }
.bk {
  --top: #FCFBF8; --side: #C9C4B6; --label: var(--ink); --legend: var(--muted);
  flex: var(--w, 1) 1 0; min-width: 0;
  position: relative; height: clamp(72px, 7.2vw, 96px);
  border-radius: 14px;
  background: linear-gradient(180deg, #E4DFD3, var(--side));
  box-shadow: 0 3px 0 rgba(18, 18, 17, .18), 0 10px 16px -10px rgba(18, 18, 17, .35);
  transition: transform .1s ease-out, box-shadow .1s ease-out;
  text-align: left; cursor: default;
}
.bk::before { content: ""; position: absolute; inset: 3px 5px 9px 5px; border-radius: 10px; background: linear-gradient(180deg, #fff, var(--top)); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .12); transition: inset .1s; }
.bk > * { position: relative; z-index: 1; }
.bk .lg { position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 6px; font: 500 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--legend); }
.bk .lg::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--dot, var(--faint)); }
.bk .nm { position: absolute; left: 14px; right: 12px; bottom: 18px; font-size: clamp(13px, 1.05vw, 15.5px); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; color: var(--label); }
.bk:hover { transform: translateY(2px); box-shadow: 0 1px 0 rgba(18, 18, 17, .18), 0 5px 10px -8px rgba(18, 18, 17, .35); }
.bk:hover::before { inset: 5px 5px 6px 5px; }
.bk.is-hot { --top: #EC5F39; --side: #AA3B1C; --label: #fff; --legend: rgba(255, 255, 255, .75); --dot: #fff; background: linear-gradient(180deg, #CE4D27, #AA3B1C); }
.bk.is-hot::before { background: linear-gradient(180deg, #F07E5F, #EC5F39); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .2); }
.bk.is-ink { --top: #2A2A27; --label: var(--paper); --legend: rgba(244, 243, 236, .5); background: linear-gradient(180deg, #1C1C1A, #0C0C0B); }
.bk.is-ink::before { background: linear-gradient(180deg, #3A3A36, #2A2A27); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .3); }
.bk.is-ink .nm { text-align: center; left: 12px; }
.bk[data-cat="design"] { --dot: var(--lilac); }
.bk[data-cat="web"] { --dot: var(--cobalt); }
.bk[data-cat="product"] { --dot: var(--mint); }
.bk[data-cat="ai"] { --dot: var(--sun); }
.board-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font: 500 12px var(--font-mono); color: var(--muted); }
.board-legend span { display: inline-flex; align-items: center; gap: 8px; }
.board-legend i { width: 8px; height: 8px; border-radius: 2px; }

.stack-row { margin-top: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
.stack-row .label { font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding-block: 6px 10px; }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track kbd { height: 38px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
@keyframes marquee { to { transform: translateX(calc(-50% - 6px)); } }

/* Why */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.why {
  display: grid; gap: 14px; align-content: start;
  padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .4s var(--ease-out), box-shadow .3s;
}
.why:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 40px -30px rgba(18, 18, 17, .4); }
.why kbd { width: 46px; height: 46px; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.why kbd svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.why kbd.is-glyph { font-size: 27px; font-weight: 500; line-height: 1; } /* single symbols sized to match the line icons */
.why h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.why p { color: var(--muted); font-size: 15.5px; }
.why.is-feature { background: var(--hot); color: #fff; box-shadow: none; }

/* Team */
.team-about { display: grid; gap: 16px; max-width: 38rem; }
.team-grid > li { display: grid; min-width: 0; }
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.member {
  padding: 10px; border-radius: var(--radius);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .4s var(--ease-out), box-shadow .3s;
}
.member:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 40px -30px rgba(18, 18, 17, .4); }
.member-photo { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1; border-radius: calc(var(--radius) - 8px); background: var(--hot); }
.member-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(0, 0, 0, .12) 1px, transparent 1.2px); background-size: 14px 14px;
}
/* Black and white on Key orange; colour comes back on hover */
.member-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transform-origin: 50% 100%; transition: filter .5s ease, transform .6s var(--ease-out); }
.member:hover .member-photo img { filter: none; transform: scale(1.035); }
.member-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 16px 8px 8px 10px; }
.member-name { font: 600 15px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.member-meta kbd { font-size: 12px; }
.member-role { grid-column: 1 / -1; margin-top: 9px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.why.is-feature p { color: rgba(255, 255, 255, .85); }

/* Pricing */
.pricing { position: relative; overflow: hidden; }
.pricing::before { content: ""; position: absolute; left: 50%; top: -20%; width: 900px; height: 600px; translate: -50% 0; background: radial-gradient(closest-side, rgba(236, 91, 53, .16), transparent); pointer-events: none; }
html:not([data-theme="dark"]) .pricing::before { display: none; } /* light mode uses the peach haze below */
.pricing > .wrap { position: relative; z-index: 1; }
/* Light mode: soft peach clouds and a warm haze around the plans */
.pricing::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='560'%3E%3Cdefs%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0042 .011' numOctaves='5' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .6 0 0 0 0 .44 0 0 0 1.9 -.88'/%3E%3C/filter%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='white'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='100%25' height='100%25' fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' mask='url(%23m)'/%3E%3C/svg%3E") center top / max(1600px, 100%) 560px no-repeat,
    radial-gradient(55% 40% at 78% 0%, rgba(236, 91, 53, .18), transparent 70%),
    radial-gradient(50% 36% at 12% 100%, rgba(240, 196, 150, .42), transparent 70%),
    radial-gradient(46% 32% at 88% 100%, rgba(236, 91, 53, .14), transparent 70%);
  opacity: .9;
  /* fade in and out so the haze never meets the neighbouring sections with a hard edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 72%, transparent);
}
html[data-theme="dark"] .pricing::after { display: none; }
.offer-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.offer {
  position: relative; display: flex; flex-direction: column; gap: 24px;
  padding: clamp(24px, 3vw, 40px); border-radius: var(--radius);
  background: var(--s-card); box-shadow: inset 0 0 0 1px var(--s-line), 0 30px 60px -40px rgba(18, 18, 17, .25);
  transition: transform .4s var(--ease-out), box-shadow .3s;
}
.offer:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--s-line-2), 0 30px 60px -40px rgba(18, 18, 17, .3); }
.offer.is-hot { background: linear-gradient(180deg, var(--s-hot-top), var(--s-card) 52%); box-shadow: inset 0 0 0 1px rgba(236, 91, 53, .55), 0 30px 60px -30px rgba(236, 91, 53, .35); }
.offer-top { display: flex; align-items: center; gap: 14px; }
.offer-top h3 { font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.offer-key { width: 46px; height: 46px; border-radius: 12px; font-size: 20px; font-weight: 500; flex: none; }
.flip-x { display: inline-block; transform: scaleX(-1); }
.offer-tag { margin-left: auto; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--s-card-2); font: 500 11.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--s-fg-2); }
.offer.is-hot .offer-tag { background: rgba(236, 91, 53, .16); color: var(--s-hot-ink); }
.offer-desc { color: var(--s-fg-2); font-size: 15.5px; max-width: 34rem; }
.offer ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; padding-top: 24px; border-top: 1px solid var(--s-line); font-size: 14px; color: var(--s-fg-1); flex: 1; align-content: start; }
.offer li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.35; }
.offer li::before { content: ""; width: 16px; height: 16px; margin-top: 1px; border-radius: 5px; background: var(--s-card-2) var(--s-check) center/16px no-repeat; }
.offer.is-hot li::before { background-color: var(--hot); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23F4F3EC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.offer-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; padding-top: 24px; border-top: 1px solid var(--s-line); }
.offer .btn-light { background: var(--s-btn); color: var(--s-btn-fg); }
.offer .btn-light:hover { background: var(--s-btn-hover); }
.offer-price { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; column-gap: 8px; }
.offer-price small { grid-column: 1 / -1; margin-bottom: 8px; font: 500 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--s-fg-3); }
.offer-price b { font-size: clamp(2.5rem, 1.9rem + 1.6vw, 3.5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.offer-price span { font-size: 14px; color: var(--s-fg-3); }
.offer-price .sep { font-style: normal; margin: 0 -.2em; } /* tighten the monospace thousands comma */
.price-foot { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 14px; color: var(--s-fg-3); }
.price-foot a { color: var(--s-fg); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-side { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 32px; }
.book-card {
  position: relative; overflow: hidden; display: grid; gap: 18px;
  padding: clamp(24px, 2.6vw, 34px); border-radius: var(--radius);
  background: var(--hot); color: #fff;
}
.book-card h3 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 600; }
.book-card p { color: rgba(255, 255, 255, .86); font-size: 15.5px; max-width: 30ch; }
.book-card .btn { justify-self: start; }
.book-card .deco { position: absolute; right: -24px; bottom: -24px; width: 150px; opacity: .2; transform: rotate(-12deg); }
.faq-list { border-top: 1px solid var(--line-2); }
.faq-list details { border-bottom: 1px solid var(--line-2); }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 500; letter-spacing: -.02em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary kbd { flex: none; width: 30px; height: 30px; font-size: 15px; transition: transform .3s var(--ease-out), background .2s; }
.faq-list details[open] summary kbd { transform: rotate(45deg) translateY(-1px); --k-top: #EF7350; --k-bot: var(--hot); --k-side: var(--hot-deep); --k-ink: #fff; }
.faq-list summary:hover { color: var(--ink-2); }
.faq-body { padding: 0 56px 26px 0; color: var(--muted); font-size: 16px; max-width: 62ch; }
.faq-body p + p { margin-top: 10px; }
.faq-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hot); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
.faq-body a:hover { color: var(--hot); }

/* Final CTA */
.final { text-align: center; padding-block: clamp(96px, 12vw, 180px) clamp(64px, 8vw, 120px); }
.final .wrap { display: grid; justify-items: center; gap: 28px; }
.final .h2 { max-width: 18ch; font-size: clamp(2.25rem, 1.2rem + 4vw, 5rem); }
.final .lead { max-width: 34rem; }
.megakey {
  --s: clamp(150px, 16vw, 210px);
  position: relative; width: calc(var(--s) * 1.9); height: var(--s); margin-top: 18px;
  border-radius: calc(var(--s) * .2);
  background: linear-gradient(180deg, #C74B27, #973317);
  box-shadow: 0 10px 0 #71250F, 0 40px 60px -20px rgba(147, 48, 23, .55);
  color: #fff; text-align: left;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.megakey::before { content: ""; position: absolute; inset: 4% 4% 12% 4%; border-radius: calc(var(--s) * .15); background: linear-gradient(180deg, #F08464, #EC5B35 70%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -14px 24px rgba(128, 37, 12, .18); transition: inset .12s ease-out; }
.megakey > span { position: absolute; z-index: 1; transition: transform .12s ease-out; }
.megakey .mk-l { left: 10%; top: 14%; font: 600 clamp(20px, 2vw, 28px)/1.05 var(--font-sans); letter-spacing: -.03em; max-width: 8ch; }
.megakey .mk-k { right: 10%; bottom: 22%; font: 500 clamp(12px, 1vw, 14px)/1 var(--font-mono); opacity: .8; }
.megakey .mk-a { left: 10%; bottom: 22%; font: 500 clamp(12px, 1vw, 14px)/1 var(--font-mono); opacity: .8; }
.megakey:hover, .megakey.is-down { transform: translateY(7px); box-shadow: 0 3px 0 #71250F, 0 20px 30px -16px rgba(147, 48, 23, .55); }
.megakey:hover::before, .megakey.is-down::before { inset: 6% 4% 8% 4%; }

/* Footer */
/* Footer: the lockup rising out of a warm horizon (light in light mode, night in dark mode) */
.footer { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); }
.footer-main { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px 64px; padding-top: clamp(64px, 7vw, 104px); padding-bottom: clamp(40px, 5vw, 72px); }
.footer-brand { display: grid; gap: 18px; align-content: start; max-width: 34ch; }
.footer-brand .logo svg { height: 28px; width: auto; }
.footer-brand p { color: var(--muted); font-size: 15px; }
.footer-meta { display: grid; gap: 14px; margin-top: 6px; font-size: 13px; color: var(--faint); }
.footer-meta .combo { color: var(--faint); }
.footer-cols { display: flex; gap: clamp(40px, 6vw, 88px); }
.footer h4 { font: 600 16px/1 var(--font-mono); letter-spacing: -.01em; color: var(--ink); margin-bottom: 20px; }
.footer ul { display: grid; gap: 11px; font-size: 15px; }
.footer ul a { color: var(--muted); transition: color .2s; }
.footer ul a:hover { color: var(--ink); }
.footer-horizon { position: relative; height: clamp(200px, 20vw, 330px); overflow: hidden; isolation: isolate; pointer-events: none; }
.footer-sky {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 100% at 82% 112%, rgba(236, 91, 53, .62), transparent 70%),
    radial-gradient(56% 90% at 18% 116%, rgba(240, 196, 150, .7), transparent 72%),
    radial-gradient(46% 80% at 50% 128%, rgba(255, 170, 100, .5), transparent 70%),
    linear-gradient(to bottom, transparent 30%, rgba(246, 190, 150, .45) 78%, rgba(240, 150, 110, .55));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 62%);
  mask-image: linear-gradient(to bottom, transparent, #000 62%);
}
.footer-sky::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='700'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .008' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .97 0 0 0 0 .9 0 0 0 0 .8 0 0 0 2.2 -1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") center 30% / cover; mix-blend-mode: screen; opacity: .5; }
.footer-sky::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 220px; mix-blend-mode: overlay; opacity: .18; }
.footer-giant { position: absolute; left: -2.2%; bottom: 0; width: 104.4%; max-width: none; height: auto; translate: 0 28%; mix-blend-mode: multiply; } /* the whole name, cropped equally at both edges: the mark’s outer keys on the left, the final s on the right */
.footer-giant .g-top { stop-color: #121211; stop-opacity: .17; }
.footer-giant .g-bot { stop-color: #121211; stop-opacity: .08; }
/* Dark mode keeps the night version */
html[data-theme="dark"] .footer { background: var(--night); border-top-color: transparent; }
html[data-theme="dark"] .footer-sky {
  background:
    radial-gradient(70% 100% at 82% 112%, rgba(236, 91, 53, .72), transparent 70%),
    radial-gradient(56% 90% at 18% 116%, rgba(231, 216, 180, .40), transparent 72%),
    radial-gradient(46% 80% at 50% 128%, rgba(255, 170, 90, .32), transparent 70%),
    linear-gradient(to bottom, transparent 30%, rgba(150, 82, 52, .38) 78%, rgba(196, 116, 78, .5));
}
html[data-theme="dark"] .footer-giant { mix-blend-mode: normal; }
html[data-theme="dark"] .footer-giant .g-top { stop-color: #F4F3EC; stop-opacity: .44; }
html[data-theme="dark"] .footer-giant .g-bot { stop-color: #F4F3EC; stop-opacity: .22; }

/* --------------------------------------------------------------------------
   Command palette + HUD
   -------------------------------------------------------------------------- */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: grid; justify-items: center; align-items: start;
  padding: 14vh 16px 16px;
  background: rgba(18, 18, 17, .32);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .18s, visibility 0s .18s;
}
.cmdk-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .18s; }
.cmdk {
  width: min(640px, 100%); max-height: 72vh; display: flex; flex-direction: column;
  background: var(--card); border-radius: 20px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(18, 18, 17, .12), 0 40px 80px -20px rgba(18, 18, 17, .45);
  transform: translateY(-8px) scale(.98); transition: transform .25s var(--ease-out);
}
.cmdk-overlay.is-open .cmdk { transform: none; }
.cmdk-search { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.cmdk-search svg { flex: none; width: 18px; height: 18px; color: var(--faint); }
.cmdk-search input { flex: 1; min-width: 0; height: 60px; border: 0; outline: 0; background: transparent; font: 400 17px var(--font-sans); color: var(--ink); letter-spacing: -.01em; }
.cmdk-search input::placeholder { color: var(--faint); }
.cmdk-list { overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
.cmdk-group { padding: 12px 10px 6px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border-radius: 12px; text-align: left; font-size: 15px; color: var(--ink-2); }
.cmdk-item .ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--paper-2); font: 500 13px/1 var(--font-mono); color: var(--ink); flex: none; }
.cmdk-item .tx { flex: 1; min-width: 0; }
.cmdk-item .tx small { display: block; color: var(--faint); font-size: 12.5px; margin-top: 1px; }
.cmdk-item[aria-selected="true"] { background: var(--paper-2); color: var(--ink); }
.cmdk-item[aria-selected="true"] .ic { background: var(--hot); color: #fff; }
.cmdk-empty { padding: 28px; text-align: center; color: var(--muted); font-size: 14.5px; }
.cmdk-foot { display: flex; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--paper); font: 500 11.5px var(--font-mono); color: var(--faint); }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 6px; }
.cmdk-foot kbd { font-size: 10px; min-width: 1.6em; height: 1.6em; }

.hud {
  position: fixed; left: 50%; bottom: 28px; z-index: 95;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 8px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: 14px;
  box-shadow: 0 20px 40px -16px rgba(18, 18, 17, .6);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease-out), opacity .25s;
}
.hud.is-on { transform: translate(-50%, 0); opacity: 1; }
.hud kbd { height: 30px; min-width: 30px; font-size: 12px; }

/* --------------------------------------------------------------------------
   Reveal
   -------------------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Case study pages
   -------------------------------------------------------------------------- */
.case-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); }
.case-back { display: inline-flex; align-items: center; gap: 10px; font: 500 13px var(--font-mono); color: var(--muted); margin-bottom: clamp(28px, 4vw, 48px); }
.case-back:hover { color: var(--ink); }
.case-title-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.case-title { font-size: clamp(2.75rem, 1rem + 6vw, 7.5rem); font-weight: 600; letter-spacing: -.05em; line-height: .95; }
.case-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.case-meta dt { font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.case-meta dd { font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.case-cover { position: relative; overflow: hidden; border-radius: clamp(20px, 2.4vw, 32px); background: var(--c, var(--paper-2)); padding: clamp(28px, 6vw, 96px) clamp(20px, 7vw, 120px) 0; isolation: isolate; }
.case-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(0, 0, 0, .08) 1px, transparent 1.2px); background-size: 20px 20px; }
.case-cover .browser { position: relative; inset: auto; border-radius: 16px 16px 0 0; }
.case-cover .browser img { height: auto; aspect-ratio: var(--ar, 16/9); }
.case-body { padding-block: clamp(64px, 8vw, 120px); }
.case-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 6vw, 96px); padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); }
.case-row:first-child { border-top: 0; padding-top: 0; }
.case-row h2 { font: 500 12px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 8px; }
.case-row .big { font-size: clamp(1.375rem, 1.1rem + 1vw, 2.125rem); line-height: 1.2; letter-spacing: -.03em; font-weight: 500; text-wrap: pretty; max-width: 30ch; }
.case-row p + p { margin-top: 14px; }
.case-row .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; color: var(--ink-2); }
.case-list { display: grid; gap: 0; }
.case-list li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; letter-spacing: -.015em; }
.case-list li span { color: var(--faint); font: 500 12px var(--font-mono); }
.case-detail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.case-detail figure { grid-column: span 6; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--c2, var(--paper-2)); aspect-ratio: 1 / 1; }
.case-detail figure.wide { grid-column: span 12; aspect-ratio: 16 / 7; }
.case-detail figure::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 0, 0, .07) 1px, transparent 1.2px); background-size: 18px 18px; }
.case-detail .zoom { position: absolute; inset: 9%; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 40px 70px -30px rgba(0, 0, 0, .45); }
.case-detail .zoom img { position: absolute; max-width: none; height: auto; left: var(--x, 0); top: var(--y, 0); }
.case-detail figcaption { position: absolute; left: 18px; bottom: 16px; z-index: 2; font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .85); padding: 6px 10px; border-radius: 8px; }
.case-quote { padding-block: clamp(72px, 9vw, 140px); }
.case-detail figure.span-7 { grid-column: span 7; aspect-ratio: auto; min-height: 100%; }
.case-detail figure.span-5 { grid-column: span 5; }
.case-detail .phone { position: absolute; left: 50%; top: 9%; translate: -50% 0; width: min(50%, 290px); aspect-ratio: 390 / 844; padding: 7px; border-radius: 40px; background: #121211; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 70px -30px rgba(0, 0, 0, .55); }
.case-detail .phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 33px; }
.case-detail .phone::before { content: ""; position: absolute; left: 50%; top: 16px; translate: -50% 0; width: 30%; height: 18px; border-radius: 12px; background: #121211; z-index: 1; }
.case-detail figure.wide .zoom { inset: 8% 7% -2% 7%; border-radius: 16px 16px 0 0; }
.case-meta dd a { color: var(--ink); }
.case-site { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; }
.case-next { display: grid; gap: 18px; padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--line); }
.case-next a { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.case-next .h2 { transition: transform .5s var(--ease-out); }
.case-next a:hover .h2 { transform: translateX(12px); }
.case-next .nk { width: 72px; height: 72px; border-radius: 18px; font-size: 26px; }

/* Brand page */
.brand-hero { padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); }
.brand-hero .display { max-width: 12ch; }
.brand-hero .lead { margin-top: 26px; max-width: 36rem; }
.construct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.construct-art { background: var(--card); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(24px, 4vw, 56px); }
.construct-art svg { width: 100%; height: auto; }
.construct-copy { display: grid; gap: 22px; }
.construct-copy ol { display: grid; gap: 0; counter-reset: c; border-top: 1px solid var(--line); }
.construct-copy li { counter-increment: c; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.construct-copy li::before { content: counter(c, decimal-leading-zero); font: 500 12px/1.6 var(--font-mono); color: var(--hot); }
.construct-copy li b { color: var(--ink); font-weight: 600; }
.macropad-feature .construct-copy { align-content: center; }
.macropad-live { min-width: 0; }
#macropad.section { overflow-x: clip; } /* the pad's glow is wider than its column */
.lockups { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.lockup { grid-column: span 2; position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); padding: 14%; }
.lockup.wide { grid-column: span 3; aspect-ratio: 16 / 9; }
.lockup.ink { background: var(--ink); box-shadow: none; }
.lockup.hot { background: var(--hot); box-shadow: none; }
.lockup img { width: 100%; height: auto; max-height: 100%; }
.lockup .dl { position: absolute; left: 14px; bottom: 12px; font: 500 11px var(--font-mono); color: var(--muted); }
.lockup.ink .dl, .lockup.hot .dl { color: rgba(255, 255, 255, .7); }
.lockup .dl:hover { color: var(--hot); }
.lockup.hot .dl:hover { color: #fff; }
.swatches { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.swatch { grid-column: span 4; display: grid; align-content: space-between; min-height: 220px; padding: 20px; border-radius: var(--radius); background: var(--sw); color: var(--sw-ink, #fff); text-align: left; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: transform .3s var(--ease-out); }
.swatch:hover { transform: translateY(-4px); }
.swatch.sm { grid-column: span 2; min-height: 150px; }
.swatch b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.swatch span { font: 500 12px/1.6 var(--font-mono); opacity: .8; }
.swatch .copied { opacity: 0; transition: opacity .2s; }
.swatch.is-copied .copied { opacity: 1; }
.type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.type-card { display: grid; gap: 18px; align-content: space-between; min-height: 300px; padding: 26px; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.type-card .spec { font-size: 88px; line-height: 1; letter-spacing: -.04em; }
.type-card .meta { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.type-card .meta b { color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.voice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.voice > div { padding: 26px; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 12px; align-content: start; }
.voice h3 { font-size: 1.375rem; letter-spacing: -.03em; }
.voice p { color: var(--muted); font-size: 15px; }
.voice .say { font-size: 14.5px; color: var(--ink-2); padding-top: 12px; border-top: 1px solid var(--line); }
.voice .say s { color: var(--faint); }

/* Legal pages */
.legal-hero { padding: clamp(48px, 7vw, 104px) 0 clamp(28px, 3.5vw, 48px); border-bottom: 1px solid var(--line); }
.legal-hero .h2 { margin: 20px 0 18px; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 500 13px var(--font-mono); color: var(--muted); }
.legal-meta a { color: var(--ink); }
.legal { padding-block: clamp(40px, 5vw, 72px) clamp(72px, 9vw, 128px); }
.legal-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--nav-h) + 24px); max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; }
.legal-toc summary { list-style: none; cursor: pointer; margin-bottom: 14px; font: 500 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc ol { display: grid; border-left: 1px solid var(--line); }
.legal-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--muted); transition: color .15s, border-color .15s; }
.legal-toc a:hover { color: var(--ink); }
.legal-toc a.is-active { color: var(--ink); border-left-color: var(--hot); }
.legal-toc li.sub a { padding-left: 26px; font-size: 13px; }
.legal-body { max-width: 72ch; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.legal-body h2 { margin: 56px 0 14px; font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; color: var(--ink); scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal-body > h2:first-child { margin-top: 0; }
.legal-body .n { margin-right: .25em; font-family: var(--font-mono); font-size: .8em; font-weight: 500; color: var(--hot); }
.legal-body h3, .legal-body h4 { margin: 28px 0 8px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.legal-body h5 { margin: 20px 0 6px; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 18px; padding-left: 1.25em; list-style: disc; }
.legal-body li { margin: 5px 0; padding-left: 4px; }
.legal-body li::marker { color: var(--hot); }
.legal-body strong { font-weight: 600; color: var(--ink); }
.legal-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hot); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-embed { margin: 36px 0 40px; padding: clamp(20px, 3vw, 36px); border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal-body .legal-embed-title { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 1.375rem; letter-spacing: -.025em; }
.legal-embed-title::before { content: "Policy"; display: inline-grid; place-items: center; height: 24px; padding: 0 9px; border-radius: 7px; background: var(--ink); color: var(--paper); font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.legal-embed > :last-child { margin-bottom: 0; }

/* Speak with Sales */
.sales-hero { padding: clamp(48px, 7vw, 104px) 0 clamp(32px, 4vw, 56px); }
.sales-title { margin: 20px 0 22px; font-size: clamp(2.5rem, 1rem + 5vw, 5.75rem); font-weight: 600; line-height: .98; letter-spacing: -.045em; }
.sales-hero .lead { max-width: 40rem; }
.sales { padding-bottom: clamp(72px, 9vw, 128px); }
/* Book a call: our own page with the Cal.com calendar embedded */
.book { padding: clamp(40px, 6vw, 88px) 0 clamp(72px, 9vw, 128px); }
.book-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.book-intro .sales-title { margin: 0; font-size: clamp(2.5rem, 1rem + 3vw, 4rem); }
.book-intro { display: grid; gap: 22px; align-content: start; position: sticky; top: calc(var(--nav-h) + 32px); }
.book-plan { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--hot-soft); color: var(--hot-deep); font: 500 12px/1 var(--font-mono); letter-spacing: .04em; }
.book-plan[hidden] { display: none; }
.book-plan::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--hot); }
.book-points { display: grid; gap: 14px; margin-top: 4px; padding-top: 22px; border-top: 1px solid var(--line); }
.book-points li { display: flex; gap: 14px; align-items: center; font-size: 15px; color: var(--ink-2); }
.book-points kbd { min-width: 38px; height: 38px; padding: 0 8px; border-radius: 11px; font-size: 13px; font-weight: 600; flex: none; }
.book-points b { color: var(--ink); font-weight: 600; }
.book-points kbd svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.book-alt { font-size: 14.5px; color: var(--muted); }
.book-alt a { color: var(--ink); }
.book-cal { display: grid; gap: 14px; min-width: 0; }
.book-cal-frame { position: relative; min-height: 660px; padding: clamp(6px, 1vw, 12px); border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -50px rgba(18, 18, 17, .35); overflow: hidden; }
#cal-inline { position: relative; z-index: 1; width: 100%; min-height: 640px; }
.book-loading { position: absolute; inset: 0; display: grid; place-items: center; font: 500 13px var(--font-mono); color: var(--muted); }
.cal-ready .book-loading { display: none; }
.book-fallback { font-size: 13px; color: var(--faint); text-align: center; }
.book-fallback a { color: var(--muted); }
.cal-failed .book-fallback { font-size: 15px; color: var(--ink); }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.contact-card { container-type: inline-size; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: transform .4s var(--ease-out), box-shadow .3s; }
.contact-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 40px -30px rgba(18, 18, 17, .4); }
.contact-card.is-primary { background: var(--hot); color: #fff; box-shadow: 0 30px 60px -34px rgba(236, 91, 53, .6); }
.cc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cc-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--paper-2); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .06); }
.cc-icon svg { width: 20px; height: 20px; }
.is-primary .cc-icon { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
.cc-label { font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.is-primary .cc-label { color: rgba(255, 255, 255, .8); }
.cc-value { font-size: min(1.875rem, 7.9cqi); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; white-space: nowrap; }
.cc-value:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.cc-note { color: var(--muted); font-size: 15px; flex: 1; }
.is-primary .cc-note { color: rgba(255, 255, 255, .86); }
.cc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.cc-copy { height: 40px; padding: 0 16px; border-radius: 999px; font: 500 14px var(--font-mono); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s, color .2s; }
.cc-copy:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cc-copy.is-copied { color: var(--hot); box-shadow: inset 0 0 0 1px var(--hot); }
.is-primary .cc-copy { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.is-primary .cc-copy:hover, .is-primary .cc-copy.is-copied { color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.sales-ready { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(72px, 9vw, 128px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.sales-ready-head { display: grid; gap: 18px; align-content: start; }
.ready-list { display: grid; border-top: 1px solid var(--line-2); }
.ready-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.ready-list kbd { width: 34px; height: 34px; font-size: 13px; }
.ready-list b { display: block; margin-bottom: 4px; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.ready-list span { color: var(--muted); font-size: 15.5px; }
.sales-foot { margin-top: clamp(40px, 5vw, 64px); color: var(--muted); font-size: 15px; }
.sales-foot a { color: var(--ink); }

/* --------------------------------------------------------------------------
   Theme toggle + dark overrides
   -------------------------------------------------------------------------- */
.theme-toggle {
  position: relative; display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 999px;
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow .2s, color .2s, transform .2s var(--ease);
}
.theme-toggle:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { grid-area: 1 / 1; width: 18px; height: 18px; transition: opacity .25s, transform .4s var(--ease-out); }
.theme-toggle .i-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
html[data-theme="dark"] .theme-toggle .i-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
html[data-theme="dark"] .theme-toggle .i-sun { opacity: 1; transform: none; }

html[data-theme="dark"] .hero::before { background-image: radial-gradient(rgba(244, 243, 236, .08) 1px, transparent 1.2px); }
html[data-theme="dark"] .step:not(.is-hot) .bigkey {
  --k-top: #3A3A36; --k-bot: #2B2B28; --k-ink: rgba(244, 243, 236, .9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(0,0,0,.55), 0 6px 0 0 #050505, 0 6px 0 1px rgba(0,0,0,.55), 0 16px 22px -8px rgba(0,0,0,.6);
}
html[data-theme="dark"] .step:not(.is-hot):hover .bigkey {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(0,0,0,.55), 0 3px 0 0 #050505, 0 3px 0 1px rgba(0,0,0,.55), 0 8px 14px -6px rgba(0,0,0,.6);
}
html[data-theme="dark"] .board {
  background: linear-gradient(180deg, #242421, #1A1A18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -3px 0 rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05), 0 40px 70px -50px rgba(0,0,0,.8);
}
html[data-theme="dark"] .bk:not(.is-hot):not(.is-ink) { --top: #2E2E2B; background: linear-gradient(180deg, #1C1C1A, #0E0E0D); box-shadow: 0 3px 0 rgba(0,0,0,.5), 0 10px 16px -10px rgba(0,0,0,.7); }
html[data-theme="dark"] .bk:not(.is-hot):not(.is-ink)::before { background: linear-gradient(180deg, #3B3B37, #2E2E2B); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.4); }
html[data-theme="dark"] .bk.is-ink { --label: #121211; background: linear-gradient(180deg, #DCD7CA, #C4BFB1); }
html[data-theme="dark"] .bk.is-ink::before { background: linear-gradient(180deg, #FFFFFF, #F4F3EC); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.2); }
/* Surfaces that show dark artwork stay light in both themes */
html[data-theme="dark"] .construct-art,
html[data-theme="dark"] .lockup:not(.ink):not(.hot) { background: #FBFAF7; box-shadow: none; }
html[data-theme="dark"] .lockup:not(.ink):not(.hot) .dl { color: #6B6860; }
.work-tag-float, .case-detail figcaption { color: #121211; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .offer-grid { grid-template-columns: minmax(0, 1fr); }
  .book-grid { grid-template-columns: minmax(0, 1fr); }
  .book-intro { position: static; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pad-stage { margin-top: 12px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .section-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { min-height: 0; }
  .step-plus { right: 50%; top: auto; bottom: calc(clamp(14px, 1.6vw, 22px) / -2); translate: 50% 50%; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .t-stack { grid-template-columns: minmax(0, 1fr); }
  .case-detail figure.span-7, .case-detail figure.span-5 { grid-column: span 12; aspect-ratio: 4 / 3; min-height: 0; }
  .faq-side { position: static; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .sales-ready { grid-template-columns: minmax(0, 1fr); }
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .legal-toc { position: static; max-height: none; padding: 16px 18px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
  .legal-toc summary { margin: 0; display: flex; justify-content: space-between; align-items: center; }
  .legal-toc summary::after { content: "+"; font-size: 16px; color: var(--muted); transition: transform .2s; }
  .legal-toc details[open] summary::after { transform: rotate(45deg); }
  .legal-toc details[open] summary { margin-bottom: 14px; }
  .footer-main { flex-direction: column; }
  .case-title-row { grid-template-columns: minmax(0, 1fr); }
  .case-row { grid-template-columns: minmax(0, 1fr); }
  .construct { grid-template-columns: minmax(0, 1fr); }
  .type-grid, .voice { grid-template-columns: minmax(0, 1fr); }
  .lockup, .lockup.wide { grid-column: span 3; }
  .swatch { grid-column: span 6; }
  .swatch.sm { grid-column: span 4; }
}
@media (max-width: 720px) {
  :root { --nav-h: 64px; --radius: 20px; }
  .announce { font-size: 12px; }
  .announce .hide-sm { display: none; }
  .nav .btn-book { display: none; }
  .cmdk-trigger { display: none; }
  .menu-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14.5px; font-weight: 500; }
  .menu-btn i { display: grid; gap: 4px; }
  .menu-btn i::before, .menu-btn i::after { content: ""; display: block; width: 14px; height: 1.5px; background: currentColor; border-radius: 2px; }
  .hero-ctas { width: 100%; max-width: 33rem; }
  .hero-ctas .btn { flex: 1 1 100%; justify-content: space-between; }
  .pad-hint { display: none; }
  .work-card, .work-card.is-feature { grid-column: span 12; }
  .work-card.is-feature .work-media, .work-media { aspect-ratio: 16 / 10.5; }
  .work-card.is-feature .browser, .browser { left: 7%; right: 7%; top: 18%; bottom: -2%; }
  .work-open { opacity: 1; transform: none; width: 38px; height: 38px; }
  .board-row { flex-wrap: wrap; }
  .bk { flex: 1 1 calc(33.33% - 7px); height: 70px; border-radius: 12px; }
  .bk::before { border-radius: 9px; }
  .bk .lg { left: 11px; top: 11px; font-size: 0; gap: 0; }
  .bk .nm { left: 11px; right: 8px; bottom: 15px; font-size: 13px; line-height: 1.15; white-space: normal; }
  .bk.wide-sm { flex-basis: calc(50% - 5px); }
  .bk.later-sm { order: 1; }
  .member-role { font-size: 12.5px; }
  .member-role .nowrap { white-space: normal; } /* moves one-word names like Copywriting into the wider half-width keys */
  .bk.is-ink { flex-basis: 100%; order: 3; height: 56px; }
  .bk.is-ink .nm { bottom: 50%; translate: 0 50%; left: 8px; }
  .stack-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .offer ul { grid-template-columns: minmax(0, 1fr); }
  .offer-foot .btn { width: 100%; justify-content: center; }
  .faq-body { padding-right: 0; }
  .footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  .footer-cols > :first-child { grid-row: span 2; }
  .footer-horizon { height: 170px; }
  .megakey { --s: 140px; }
  .case-meta { grid-template-columns: minmax(0, 1fr); }
  .case-row .cols { grid-template-columns: minmax(0, 1fr); }
  .case-detail figure, .case-detail figure.wide { grid-column: span 12; aspect-ratio: 4 / 3; }
  .lockup, .lockup.wide { grid-column: span 6; }
  .swatch, .swatch.sm { grid-column: span 6; min-height: 150px; }
  .cmdk-overlay { padding-top: 10vh; }
  .hud { bottom: 18px; }
}

@media (pointer: coarse) {
  .cmdk-foot, .cmdk-item kbd, .cmdk-search kbd, .pad-hint, .nav-links a kbd { display: none; }
}

/* The smallest phones (320px): keep nine-letter names like Databases inside third-width keys */
@media (max-width: 350px) {
  .bk .nm { font-size: 11.5px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .marquee-track { flex-wrap: wrap; width: auto; }
  .marquee-track [aria-hidden="true"] { display: none; }
  .pad { transform: none; }
}