/* =========================================================================
   TradeKit Marketing — the Overprint art kit and the site chrome

   Linked by base.njk on every page (body.tk). The design language is
   docs/design-language.md: the site is a trading terminal printed as a
   risograph poster. Fluorescent art inks MULTIPLY on cream paper in light
   mode and SCREEN on black in dark mode (phosphor), so wherever two pieces
   of art cross they print a new color; structure is hairline rules, not
   boxes; small text speaks in a HUD voice; display type is huge, tight and
   fitted to the width.

   Every color is a shared palette role (assets/theme/palettes.css) or an
   art ink built on one (assets/theme/tokens.css), so the dev style picker
   re-inks every page; type routes through --font-mono / --font-display
   (styles/theme.css), so picker fonts apply too. Behavior is
   js/art-kit.js. Page styles build on this file: styles/home.css (the
   homepage's sections and art), styles/demos.css (its product demos).

   The kit:
     frame        body.tk::before verticals + .tk-rule registration rules
     HUD type     .tk-label, .tk-chip, .tk-sep (//), .tk-chevrons (>>>)
     .tk-pulse    status lamp, blinking in hard steps
     .tk-btn      ink block, chevrons build + "disco" ink cycle on hover
     .tk-field    square ink-ruled text field (a .tk-btn's height)
     .tk-dialog   framed sheet on the pink plate, over a dot screen
     .tk-fill     any ink fill (sets --fill), text black or white by itself
     .tk-seg      seven-segment readouts                      (art-kit.js)
     .tk-stripes  venetian-striped type (masks from art-kit.js)
     .tk-swatch   marching diagonal-stripe ink blocks
     .tk-grain    animated film grain
     [data-fit]   display type fitted to the width            (art-kit.js)
     [data-reveal] blocks that rise in on scroll              (art-kit.js)
   ========================================================================= */

/* ----- Reset ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ----- Tokens -----
   The design-language tokens are shared (/assets/theme/tokens.css, linked
   by base.njk after the palette): the art inks --ink-1…8, --rule /
   --rule-soft, --ink-soft / --ink-faint, --on-ink, --overprint, --lcd /
   --lcd-ghost / --glow and the --ease-* curves, with their dark-mode
   values. What lives here is the site's layout and its paper / ink names
   for the palette roles. */
.tk {
  --frame: clamp(0.75rem, 3vw, 2.75rem);   /* page frame inset */
  --pad: clamp(1.1rem, 2.5vw, 2.5rem);     /* padding inside the frame */
  --nav-h: 3.25rem;

  --paper: var(--background);
  --paper-2: var(--card);
  --ink: var(--foreground);

  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
}

.tk ::selection {
  background: var(--ink-2);
  color: var(--on-ink);
}

/* ----- Ink fills -----
   Anything filled with an art ink sets --fill (registered in tokens.css,
   so the disco keyframes can step it); .tk-fill (and the rules that reuse
   it) paint the fill and pick black or white type from the fill's own
   lightness, so text stays legible whichever palette inks it: OKLCH L
   above 0.6 (≈ where black overtakes white for contrast) gets black. The
   ×100000 makes it a hard switch — no in-between grays. */
.tk-fill,
.tk-chip--hot {
  background-color: var(--fill);
  color: var(--on-ink);
  color: oklch(from var(--fill) clamp(0, calc((0.6 - l) * 100000), 1) 0 0);
}

.tk :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* =========================================================================
   Frame — two hairline verticals inset from the viewport edges for the
   whole page; full-bleed .tk-rule hairlines cross them between sections,
   with a registration ring at every crossing.
   ========================================================================= */
.tk::before {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--frame);
  right: var(--frame);
  border-inline: 1px solid var(--rule);
  pointer-events: none;
  z-index: 70;
  transform-origin: top;
  transition: transform 1.2s var(--ease-io);
}

.tk-intro .tk::before {
  transform: scaleY(0);
}

.tk-rule {
  position: relative;
  height: 1px;
}

.tk-rule::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rule);
  transition: transform 1.1s var(--ease-io);
}

.tk-rule:not(.is-in)::before {
  transform: scaleX(0);
}

/* Registration rings (⊕): the frame line and the rule cross through them. */
.tk-rule::after {
  content: '';
  position: absolute;
  top: -5px;
  left: calc(var(--frame) - 5px);
  right: calc(var(--frame) - 5px);
  height: 11px;
  --ring: radial-gradient(circle at center, transparent 3.6px, var(--rule) 4.1px, var(--rule) 5px, transparent 5.5px);
  background: var(--ring) left / 11px 11px no-repeat, var(--ring) right / 11px 11px no-repeat;
  transition: opacity 0.4s ease 0.6s;
}

.tk-rule:not(.is-in)::after {
  opacity: 0;
}

/* =========================================================================
   HUD type — the micro-label voice: mono caps, wide tracking, // and >>>.
   ========================================================================= */
.tk-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tk-label b {
  font-weight: 600;
  color: var(--ink);
}

.tk-dim {
  color: var(--ink-soft);
}

.tk-sep {
  color: var(--ink-4);
  padding-inline: 0.5em;
  letter-spacing: 0;
}

.tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: 1.6rem;
  padding-inline: 0.6rem;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tk-chip--ink {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.tk-chip--ink .tk-sep {
  color: var(--ink-2);
}

.tk-chip--hot {
  --fill: var(--ink-4);
  border-color: var(--fill);
}

/* A chip's gap spaces its lamp. */
.tk-chip > .tk-pulse {
  margin-right: 0;
}

/* Blinking status lamp — hard on/off, like an LED. */
.tk-pulse {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.55em;
  border-radius: 50%;
  background: var(--success);
  animation: tk-blink 1.4s steps(1, end) infinite;
}

.tk-pulse--hot {
  background: var(--ink-4);
}

.tk-pulse--paper {
  background: currentColor;
  margin-right: 0;
}

@keyframes tk-blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.15; }
}

/* >>> — the three chevrons build in one by one on hover (Particle's
   signature, by way of a broadcast lower third). */
.tk-chevrons {
  display: inline-flex;
  letter-spacing: -0.06em;
}

.tk-chevrons i {
  font-style: normal;
}

@media (hover: hover) and (pointer: fine) {
  :is(.tk-btn, .tk-nav__cta):hover .tk-chevrons i:nth-child(1) { animation: tk-chev-1 1s linear infinite; }
  :is(.tk-btn, .tk-nav__cta):hover .tk-chevrons i:nth-child(2) { animation: tk-chev-2 1s linear infinite; }
  :is(.tk-btn, .tk-nav__cta):hover .tk-chevrons i:nth-child(3) { animation: tk-chev-3 1s linear infinite; }
}

@keyframes tk-chev-1 { 0%, 84% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes tk-chev-2 { 0%, 24% { opacity: 0; } 25%, 84% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes tk-chev-3 { 0%, 49% { opacity: 0; } 50%, 84% { opacity: 1; } 85%, 100% { opacity: 0; } }

/* =========================================================================
   Buttons — a solid ink block; hovering cycles it through the art inks
   in hard steps (the "disco" print-run test).
   ========================================================================= */
.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 3.5rem;
  padding-inline: 2rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  outline: 1px solid transparent;
  outline-offset: 4px;
}

.tk-btn--sm {
  height: 2.75rem;
  padding-inline: 1.4rem;
  font-size: 0.78rem;
}

@media (hover: hover) and (pointer: fine) {
  .tk-btn:hover {
    --fill: var(--ink-2);
    background-color: var(--fill);
    color: var(--on-ink);
    color: oklch(from var(--fill) clamp(0, calc((0.6 - l) * 100000), 1) 0 0);
    outline-color: var(--ink);
    animation: tk-disco 1.6s steps(1, end) infinite;
  }
}

@keyframes tk-disco {
  0% { --fill: var(--ink-2); }
  20% { --fill: var(--ink-3); }
  40% { --fill: var(--ink-1); }
  60% { --fill: var(--ink-5); }
  80% { --fill: var(--ink-6); }
  100% { --fill: var(--ink-2); }
}

.tk-textlink {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.tk-textlink:hover {
  color: var(--ink-4);
}

/* =========================================================================
   Fields and dialogs — the kit's form pieces (the waitlist flow's,
   styles/waitlist.css).
   ========================================================================= */

/* A text field: square and ink-ruled, as tall as a .tk-btn so the two can
   share a row, in mono at 16px so phones don't zoom in on focus. */
.tk-field {
  display: block;
  width: 100%;
  min-width: 0;
  height: 3.5rem;
  margin: 0;
  padding: 0 1rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  appearance: none;
}

.tk-field::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

.tk-field[aria-invalid="true"] {
  border-color: var(--ink-4);
}

/* Autofill keeps the paper: an inset fill, not a shadow. */
.tk-field:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--paper) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}

/* A dialog: a framed sheet on the logo's pink plate, printed in after the
   sheet rises, over the page under a halftone dot screen. The native
   <dialog> keeps focus inside, closes on Esc and hands focus back; the
   page behind it holds still. It only ever scrolls up and down: nothing in
   it may be wider, and if something is, it's cut off rather than panned
   to. On phones it's a full-screen sheet. */
.tk-dialog {
  width: min(38rem, calc(100% - 2 * var(--frame) - 1.5rem));
  max-width: none;
  max-height: calc(100% - 2 * var(--frame) - 1rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: 0.9rem 0.9rem 0 0 var(--ink-3);
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.tk-dialog[open] {
  animation: tk-plate-in 0.6s var(--ease-out) 0.2s backwards;
}

.tk-dialog[open] > :not(.tk-grain) {
  animation: tk-rise 0.5s var(--ease-out);
}

.tk-dialog::backdrop {
  background-color: color-mix(in srgb, var(--paper) 84%, transparent);
  background-image: radial-gradient(circle, var(--ink-faint) 1.1px, transparent 1.4px);
  background-size: 12px 12px;
}

.tk-dialog[open]::backdrop {
  animation: tk-fade 0.3s ease;
}

html:has(.tk-dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

@keyframes tk-plate-in {
  from { box-shadow: 0 0 0 0 var(--ink-3); }
}

@keyframes tk-rise {
  from { opacity: 0; transform: translateY(1rem); }
}

@keyframes tk-fade {
  from { opacity: 0; }
}

@media (max-width: 560px) {
  .tk-dialog {
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    box-shadow: none;
  }

  .tk-dialog[open] {
    animation: none;
  }
}

/* A ruled grid of boxes (the homepage's asset classes, the blog's pages):
   every item is fully boxed and the borders collapse (negative margins),
   so it stays a clean grid when it wraps. */
.tk-boxes {
  display: flex;
  flex-wrap: wrap;
  padding: 1px 0 0 1px;
}

.tk-boxes > * {
  margin: -1px 0 0 -1px;
  border: 1px solid var(--ink);
  background: var(--paper);
}

/* =========================================================================
   Nav — a thin bar on the frame; the CTA is an ink block flush to the
   right frame line.
   ========================================================================= */
.tk-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  height: var(--nav-h);
  padding-inline: var(--frame);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out);
}

.tk-intro .tk-nav {
  opacity: 0;
  transform: translateY(-100%);
}

/* The logo. scripts/generate-logo-assets.mjs outlines this lockup into the
   brand kit (assets/brand/) — it replicates these metrics, so re-run it if
   they change. */
.tk-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  justify-self: start;
  padding-inline: var(--pad);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

/* The mark, misregistered: an ink block with a fluoro-pink plate printed a
   few px off. */
.tk-logo__mark {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: -0.04em;
  box-shadow: 0.2rem 0.2rem 0 0 var(--ink-3);
}

.tk-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.5rem);
}

.tk-nav__links a {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tk-nav__links a:hover,
.tk-nav__links a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
}

.tk-nav__end {
  display: flex;
  align-items: stretch;
  justify-self: end;
}

.tk-nav__status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-inline: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.tk-nav__status b {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tk-nav__toggle {
  display: grid;
  place-items: center;
  width: var(--nav-h);
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.tk-nav__toggle:hover {
  background: var(--ink-faint);
}

/* The toggle shows the mode it switches to: the moon in light, the sun in
   dark (darkness is the shared `dark` class, folded in before first paint
   by base.njk). */
.tk-nav__toggle .icon--sun,
.dark .tk-nav__toggle .icon--moon {
  display: none;
}

.dark .tk-nav__toggle .icon--sun {
  display: block;
}

.tk-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 1.4rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tk-nav__cta:hover {
  --fill: var(--ink-2);
  background-color: var(--fill);
  color: var(--on-ink);
  color: oklch(from var(--fill) clamp(0, calc((0.6 - l) * 100000), 1) 0 0);
}

/* =========================================================================
   Seven-segment readouts — slanted LCD digits with ghost segments
   (art-kit.js draws them from data-seg / data-seg-clock). The digits scale
   to the element's height (a headline readout's by default).
   ========================================================================= */
.tk-seg {
  display: block;
  height: clamp(3.5rem, 6.4vw, 6rem);
  filter: var(--glow);
}

.tk-seg svg {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  overflow: visible;
}

.tk-seg .on {
  fill: var(--lcd);
}

.tk-seg .off {
  fill: var(--lcd-ghost);
}

/* =========================================================================
   Footer — ink swatches, the link grid, the striped wordmark.
   ========================================================================= */
.tk-footer__art {
  display: grid;
  grid-template-columns: 26fr 10fr 30fr 16fr 10fr 8fr;
  height: clamp(5.5rem, 11vw, 10rem);
  margin-inline: var(--frame);
}

.tk-swatch {
  background-color: var(--a);
}

/* Marching diagonal stripes — the "armed" candy cane, as a print swatch.
   A square tile with two stripes per side tiles seamlessly; moving it one
   tile along x loops. */
.tk-swatch--stripes {
  --tile: 2.25rem;
  background-image: linear-gradient(45deg, var(--b) 25%, transparent 25% 50%, var(--b) 50% 75%, transparent 75%);
  background-size: var(--tile) var(--tile);
  animation: tk-stripes 2.4s linear infinite;
}

.tk-swatch--wide {
  --tile: 3.5rem;
}

@keyframes tk-stripes {
  to { background-position: var(--tile) 0; }
}

.tk-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
  margin-inline: var(--frame);
}

.tk-footer__grid > * {
  display: flex;
  flex-direction: column;
  min-height: 17rem;
  padding: var(--pad);
  border-left: 1px solid var(--rule);
}

.tk-footer__grid > :first-child {
  border-left: 0;
}

.tk-footer__brand {
  gap: 1.25rem;
}

.tk-footer__brand .tk-logo {
  padding: 0;
  font-size: 1.6rem;
}

.tk-footer__brand .tk-logo__mark {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.05rem;
}

.tk-footer__brand p {
  max-width: 34ch;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.tk-footer__brand .tk-btn {
  align-self: flex-start;
  margin-top: auto;
}

.tk-footer__col h2 {
  margin-bottom: 1.4rem;
  color: var(--ink-soft);
}

.tk-footer__col a {
  padding-block: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tk-footer__col a:hover {
  color: var(--ink-4);
}

/* The wordmark spans the frame (a [data-fit] box: art-kit.js sets --fit). */
.tk-footer__mark {
  margin-inline: var(--frame);
  padding: calc(var(--pad) * 0.9) var(--pad) calc(var(--pad) * 0.6);
  overflow: hidden;
  --fit: 17vw;
}

.tk-footer__mark span {
  display: block;
  width: max-content;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fit);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
  /* the stripe mask covers the box, so pad it over the last glyph's overhang */
  padding: 0 0.07em 0.06em 0;
}

.tk-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-inline: var(--frame);
  padding: 0.85rem var(--pad);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Venetian-striped type: art-kit.js publishes the stripe masks (lines
   thicken toward the baseline); until then the type stays solid. A mask
   stretches to its box with a fixed bar count, so small type takes the
   coarse one (fewer bars) to keep its stripes as far apart as a
   headline's. */
.tk-stripes {
  -webkit-mask-image: var(--tk-stripes, none);
  mask-image: var(--tk-stripes, none);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.tk-stripes--coarse {
  --tk-stripes: var(--tk-stripes-coarse);
}

/* =========================================================================
   Grain — film grain over everything, re-seeded ~8×/s.
   ========================================================================= */
.tk-grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .38 0 0 0 0 .34 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.42;
  mix-blend-mode: multiply;
  animation: tk-grain 0.9s steps(1, end) infinite;
}

.dark .tk-grain {
  opacity: 0.1;
  mix-blend-mode: screen;
}

@keyframes tk-grain {
  0% { background-position: 0 0; }
  12.5% { background-position: -83px 41px; }
  25% { background-position: 57px -112px; }
  37.5% { background-position: -131px -29px; }
  50% { background-position: 96px 73px; }
  62.5% { background-position: -17px 138px; }
  75% { background-position: 149px -61px; }
  87.5% { background-position: -104px 102px; }
  100% { background-position: 0 0; }
}

/* Reveal-on-scroll (art-kit.js adds .is-in). */
.tk [data-reveal] {
  transition: opacity 0.8s ease, transform 1s var(--ease-out);
}

.tk [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(1.5rem);
}

/* =========================================================================
   Responsive chrome
   ========================================================================= */
@media (max-width: 1100px) {
  .tk-nav__status {
    display: none;
  }
}

@media (max-width: 860px) {
  .tk-nav {
    grid-template-columns: 1fr auto;
  }

  .tk-nav__links {
    display: none;
  }

  .tk-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tk-footer__brand {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--rule);
  }

  .tk-footer__grid > :nth-child(2) {
    border-left: 0;
  }

  .tk-footer__grid > * {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  /* The CTA sheds its chevrons so the bar fits a phone. */
  .tk-nav__cta {
    padding-inline: 1rem;
  }

  .tk-nav__cta .tk-chevrons {
    display: none;
  }

  /* Words a label drops so it fits a phone ("Join the waitlist" buttons
     read "Join waitlist" there, as the nav's does; the waitlist's HUD bar
     drops "// Private beta" and "Esc"). */
  .tk-hide-phone {
    display: none;
  }

  .tk-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-footer__grid > * {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .tk-footer__grid > :first-child {
    border-top: 0;
  }
}

/* The smallest phones: the nav's logo is the mark alone. */
@media (max-width: 350px) {
  .tk-nav .tk-logo__word {
    display: none;
  }
}

/* Reduced motion: transitions and animations stop everywhere, and every
   intro / reveal state lands in its final frame (the scripts skip their
   simulations and draw one still). */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }

  .tk-intro .tk::before,
  .tk-intro .tk-nav,
  .tk [data-reveal]:not(.is-in) {
    opacity: 1;
    transform: none;
  }

  .tk-rule:not(.is-in)::before {
    transform: none;
  }

  .tk-rule:not(.is-in)::after {
    opacity: 1;
  }
}