/* Built on the West Kite Design System 1.10 · https://westkite.com/brand · wk-78fa6fe5 */
/* Landing page. Tokens, fonts, buttons, form fields and the dialog come from /westkite.css. */

:root {
  color-scheme: light;
  /* The shell gutter from the product: structure is shown by the ground, never by a stroke.
     Panes are Paper sheets on the Linen ground, held apart by this much ground. */
  --wk-shell-gutter: 2px;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body.home {
  margin: 0;
  overflow-x: clip;
  display: grid;
  background: var(--wk-paper, #ffffff);
  color: var(--wk-text, #292929);
  font-family: var(--wk-sans, "Inter", system-ui, -apple-system, sans-serif);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--wk-accent, #093acd);
  outline-offset: 2px;
}

/* Header: lockup, two actions. Collapses to a menu button on small screens. At the top of the
   page it is fully transparent and lies over the hero footage (the negative bottom margin pulls
   the hero up under it), in the on-carbon palette, with one shell gutter of Stone ground drawn
   beneath it to hold the header band and the hero apart. Once the page scrolls it becomes a
   floating glass bar: translucent Paper over a blur, one Ash hairline, the system's 4px corner
   and the 22px inset, back in the light palette. Sticky keeps its place in the flow, so nothing
   below it jumps when it changes. No shadow, no gradient. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: 72px;
  margin: 0 0 -72px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: 0;
  /* Clear at rest, so the bar is the same sky as the hero behind it; the floating state
     below brings in its own surface. */
  background: transparent;
  color: var(--wk-text, #f7f6f5);
  overflow: visible;
  transition: margin 200ms ease, padding 200ms ease, border-color 200ms ease,
    border-radius 200ms ease, background-color 200ms ease, top 200ms ease;
}

/* The gutter: ground between the header band and the hero, only while the header is at the top. */
.site-head::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(100% + 1px);
  height: var(--wk-shell-gutter);
  background: var(--wk-stone, #d1cfce);
}

.site-head.is-floating {
  top: 12px;
  margin: 0 22px -72px;
  padding: 0 24px;
  border-color: var(--wk-hairline, #ebeae9);
  border-radius: var(--wk-radius, 4px);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  /* Back to the light palette: the same tokens on-carbon flips, as :root sets them. */
  --wk-text: var(--wk-ink);
  --wk-text-muted: var(--wk-slate);
  --wk-border: var(--wk-stone);
  --wk-hairline: var(--wk-ash);
  --wk-hover: var(--wk-gray-100);
  --wk-gray-100: #f4f2ef;
}

.site-head.is-floating::after {
  display: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head {
    background: rgba(28, 28, 28, 0.55);
  }

  .site-head.is-floating {
    background: rgba(255, 255, 255, 0.94);
  }
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  text-decoration: none;
}

.lk-mark rect {
  transition: fill 280ms ease-in-out;
}

.lockup:hover .lk-mark rect,
.lockup:focus-visible .lk-mark rect {
  fill: var(--wk-slate, #737373);
}

.lk-mark {
  display: block;
  width: 30px;
  height: 24px;
}

.lk-word {
  display: block;
  height: 23px;
  width: auto;
}

/* The wordmark follows the header's text colour: Linen over the footage, Ink on the glass bar. */
.lk-word path {
  fill: currentColor;
}

.site-actions {
  display: flex;
  gap: 8px;
  justify-self: end;
}

/* Dashboard: white with the brand's thin grey border on every page. */
.site-actions .wk-btn-secondary,
.site-actions .wk-btn-secondary:hover {
  border-color: var(--wk-border);
}

.site-actions .wk-btn-primary {
  background: #000;
  border-color: #000;
  color: #fff;
}

.site-nav {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  min-width: 0;
  padding-inline: 28px;
}

.nav-group {
  display: flex;
  align-items: center;
}

.nav-trigger {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font: 500 15px/1 var(--wk-sans, "Inter", system-ui, sans-serif);
  letter-spacing: -0.035em;
  cursor: pointer;
}

.nav-trigger svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-group.is-open .nav-trigger svg {
  transform: rotate(180deg);
}

/* One shared rule sits directly on the header / panel boundary. JavaScript moves and
   resizes it to the active word, so it flows between labels instead of redrawing. */
.nav-indicator {
  position: absolute;
  z-index: 24;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    width 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 130ms ease;
}

.nav-indicator.is-visible { opacity: 1; }

.mega-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  width: min(calc(100vw - 2 * clamp(24px, 6vw, 80px)), 1200px);
  z-index: -1;
  padding: 8px 24px 12px;
  border: 1px solid var(--wk-hairline, #ebeae9);
  border-radius: var(--wk-radius, 4px);
  background: #fff;
  color: var(--wk-ink, #292929);
  box-shadow: 0 8px 18px rgba(28, 28, 28, 0.13), 0 24px 56px rgba(28, 28, 28, 0.19);
  transform: translateX(-50%);
  visibility: hidden;
  pointer-events: none;
  /* Swap opaque panels immediately so rapid navigation cannot reveal the hero
     through overlapping fade and slide transitions. */
}

.nav-group.is-open .mega-panel {
  z-index: 20;
  visibility: visible;
  pointer-events: auto;
}

.mega-panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -7px;
  height: 7px;
}

.mega-panel-inner {
  display: grid;
  grid-template-columns: minmax(135px, 0.7fr) minmax(320px, 1.65fr) minmax(190px, 1fr);
  gap: clamp(16px, 2vw, 36px);
  max-width: 1664px;
  margin: 0 auto;
  padding: 10px clamp(0px, 2vw, 24px) 0;
}

#panel-careers .mega-links { grid-template-columns: 1fr; }
#panel-careers .mega-links a { min-height: 0; }

.mega-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mega-title {
  display: block;
  margin: 0;
  font-family: var(--wk-display, "Newsreader", Georgia, serif);
  font-size: clamp(30px, 2.4vw, 40px);
  font-weight: var(--wk-display-weight, 375);
  line-height: 1;
  letter-spacing: -0.025em;
}

.mega-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 4px 24px;
}

.mega-links a,
.mega-links button {
  display: grid;
  align-content: start;
  gap: 0;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.mega-links a:hover,
.mega-links a:focus-visible,
.mega-links button:hover,
.mega-links button:focus-visible {
  background: rgba(41, 41, 41, 0.045);
}

.mega-links strong {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.mega-feature {
  display: block;
  align-self: start;
  overflow: hidden;
  border-radius: var(--wk-radius, 4px);
  color: var(--wk-paper, #fff);
  text-decoration: none;
}

.mega-visual {
  display: block;
  position: relative;
  height: 116px;
  overflow: hidden;
  isolation: isolate;
}

.mega-visual-product {
  background: radial-gradient(ellipse at 82% 18%, #76d1c4 0%, transparent 52%), radial-gradient(ellipse at 96% 116%, #a2b3e8 0%, transparent 55%), linear-gradient(125deg, #082c46 0%, #12606a 58%, #254774 100%);
}

.mega-visual-careers {
  background: radial-gradient(ellipse at 76% 5%, #e9b0a1 0%, transparent 54%), radial-gradient(ellipse at 104% 120%, #ba678d 0%, transparent 55%), linear-gradient(135deg, #351d3a 0%, #74405f 62%, #7e4965 100%);
}

.mega-visual-resources {
  background: radial-gradient(ellipse at 78% 9%, #e8ca85 0%, transparent 51%), radial-gradient(ellipse at 103% 116%, #da8672 0%, transparent 52%), linear-gradient(125deg, #49303b 0%, #8b5c54 60%, #a66b4d 100%);
}

.mega-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 72%;
  height: 94%;
  border-radius: 50%;
  filter: blur(13px);
}

.mega-visual-product::before {
  right: -12%;
  bottom: -70%;
  transform: rotate(28deg);
  background: radial-gradient(ellipse at 38% 37%, #c2ede0 0%, #71aeca 39%, #395b89 69%, transparent 73%);
}

.mega-visual-careers::before {
  width: 72%;
  height: 145%;
  right: -2%;
  top: -48%;
  transform: rotate(24deg);
  background: linear-gradient(90deg, transparent, #f2c5a9 31%, #af6689 66%, transparent);
  filter: blur(18px);
}

.mega-visual-resources::before {
  width: 65%;
  height: 150%;
  right: -6%;
  top: -55%;
  border-radius: 48%;
  transform: rotate(-28deg);
  background: linear-gradient(90deg, transparent, #f5d6a0 28%, #dc8d73 65%, transparent);
  filter: blur(19px);
}

.mega-visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: url('/pricing-grain.svg') repeat;
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.mega-feature-copy {
  position: relative;
  z-index: 3;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 13px 16px 14px;
}

.mega-feature-logo {
  display: block;
  width: 108px;
  height: auto;
}

.mega-feature-copy strong {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* Menu: three lines, at the navigation icon size the system asks for. */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: var(--wk-radius, 4px);
  background: none;
  color: var(--wk-text, #292929);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.menu-toggle:hover,
.menu-toggle[aria-expanded="true"] {
  background: var(--wk-gray-100, #f4f2ef);
}

.menu-toggle svg {
  display: block;
  width: 20px;
  height: 20px;
}

.menu-line {
  transform-box: view-box;
  transform-origin: 10px 10px;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 140ms ease;
}

.menu-toggle[aria-expanded="true"] .menu-line-top {
  transform: translateY(5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-line-middle {
  opacity: 0;
  transform: scaleX(0.25);
}

.menu-toggle[aria-expanded="true"] .menu-line-bottom {
  transform: translateY(-5px) rotate(-45deg);
}

.site-menu {
  position: absolute;
  top: 60px;
  left: 12px;
  right: 12px;
  z-index: 5;
  display: grid;
  padding: 8px;
  border: 1px solid var(--wk-hairline, #ebeae9);
  border-radius: var(--wk-radius, 4px);
  background: var(--wk-paper, #ffffff);
  box-shadow: 0 14px 36px rgba(28, 28, 28, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top right;
  /* A Paper sheet, whatever palette the header is in. */
  --wk-text: var(--wk-ink);
  --wk-hairline: var(--wk-ash);
  --wk-gray-100: #f4f2ef;
}

.site-menu[hidden] {
  display: none;
}

.site-menu a,
.site-menu button {
  display: block;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: var(--wk-radius, 4px);
  background: none;
  color: var(--wk-text, #292929);
  font: 500 15px/1.2 var(--wk-sans, "Inter", system-ui, sans-serif);
  letter-spacing: -0.04em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.site-menu a:hover,
.site-menu button:hover {
  background: var(--wk-gray-100, #f4f2ef);
}


/* Contact dialog: the system dialog with a stacked form. */
.contact-dialog {
  max-width: 420px;
}

.contact-form {
  display: grid;
  gap: 14px;
}

.contact-form .wk-dialog-actions {
  margin-top: 6px;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Hero: fills the first screen, running up behind the header; the copy centres in the room
   below the header and its gutter. Flush with both screen edges, footage edge to edge. */
.hero {
  position: relative;
  margin: 0;
  height: 100svh;
  padding-top: calc(72px + var(--wk-shell-gutter));
  padding-bottom: 72px;   /* room for the "Built for" strip, so the copy centres above it */
  min-height: 632px;
  background: var(--wk-carbon, #1c1c1c);
  color: var(--wk-text, #f7f6f5);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The footage: a poster is the first paint, and the loop fades in over it once it is playing.
   Both cover the hero edge to edge. The blurred stand-in (build_home.py inlines it below)
   shows until the poster lands, so the hero is never flat Carbon. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--wk-carbon, #1c1c1c) center / cover no-repeat;
}

.hero-video picture,
.hero-video img,
.hero-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video video {
  opacity: 0;
  transition: opacity 600ms ease;
}

.hero-video video.is-playing {
  opacity: 1;
}

/* hero:generated:start (build_home.py writes the blurred stand-in) */
.hero-video { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAASACADASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAQFA//EACQQAAEEAQMDBQAAAAAAAAAAAAEAAgMRBBIhMQVxkRMUMlGB/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAQD/8QAHBEAAgICAwAAAAAAAAAAAAAAAAECAxEhIkFR/9oADAMBAAIRAxEAPwCZHEKWojC0e9jRTcY99RSUuS6OWhqaPp26oViIXRL0ZMYR7KSVmpoFXVk0tMUnILQ3l3juqk+iONrG7NaKCTnhaFdWXyIMj3X8j5SeQT6nKELErK/ReJfxN5JOyEIOz//Z"); }
@media (orientation: portrait) { .hero-video { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAA5ACADASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAwUBBAYA/8QAJhAAAgIBAgUEAwAAAAAAAAAAAQIAAxEhUQUSMUGBBBQyYVKR0f/EABkBAAIDAQAAAAAAAAAAAAAAAAABAgMEBf/EABwRAAMBAAIDAAAAAAAAAAAAAAABAhEDEiFBYf/aAAwDAQACEQMRAD8AUIsKFnIIULNiOUwRWCdZaIgnWDBBEEJiAouSzQEhvxOhliCY2mn5IxJp9P7i3kPwGrn628/2d4z9DvGtFHt6ApxznVj9yF1iLOKNemWpZXwDGNTNjlc5I1B3EUVDuDkRt6MNfyIvz6Z2G/jEqmsZq5Y7T9GHDaC9xub4V6IN27nxL9hkoq1VKiDCqMCCtbQxN69CZ6rDF0vqM/vvNBwYjmsO69pm64/4H0siLPQ7ZtJWteEbpKtkGJH/2Q=="); } }
/* hero:generated:end */

/* One centred column: headline, lead and button stacked on the centre line of the screen,
   with the 32px page gutter from the brand guide (20px on a phone). */
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  --hero-h1: clamp(48px, 5.6vw, 72px);
  width: 100%;
  padding: 64px 32px;
  text-align: center;
}

.hero-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
}

/* Who it is for: one row of plain Linen text along the foot of the hero, at the same inset
   as the copy. The label is muted, the list is full Linen. The list contributes its items
   straight to the row, so label and items share one gap; home.js widens that gap as the
   page scrolls, until the row is spread evenly across the hero as it leaves the screen. */
.hero-foot {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px var(--hero-foot-gap, 44px);
  margin: 0 32px;
  padding: 0 0 32px;
  font-family: var(--wk-sans, "Inter", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: var(--wk-sans-track, -0.04em);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-foot-label {
  margin: 0;
  color: var(--wk-text-muted, rgba(255, 255, 250, 0.6));
}

.hero-foot-list {
  display: contents;
  color: var(--wk-text, #f7f6f5);
}

.hero-foot-list li {
  list-style: none;
}

.hero h1 {
  /* Above Display XL for the landing hero: up to 108/1, display tracking, balanced over
     two or three centred lines. */
  margin: 0;
  max-width: 11em;
  font-family: var(--wk-display, "Newsreader", Georgia, serif);
  font-weight: var(--wk-display-weight, 375);
  font-variation-settings: var(--wk-display-vs, "opsz" 28);
  font-size: var(--hero-h1);
  line-height: 1;
  letter-spacing: var(--wk-display-track, -0.03em);
  text-wrap: balance;
}

/* Keep "Commercial real estate," on one line wherever it fits, so the phrase never splits.
   Only the narrowest phones let it wrap. */
.hero h1 .nb {
  white-space: nowrap;
}

@media (max-width: 400px) {
  .hero h1 .nb {
    white-space: normal;
  }
}

/* The two calls to action sit side by side under the lead, and stack on narrow screens. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hero-actions .wk-btn {
  text-shadow: none;
}

.lead {
  /* Body from the website scale, 16/1.4 in the text face. */
  margin: 0 0 28px;
  max-width: 32em;
  font-family: var(--wk-sans, "Inter", system-ui, -apple-system, sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  /* Full Linen, not the muted step: the footage behind it is busy and the 60 percent white
     of the muted token disappears against the brighter clips. */
  color: var(--wk-text, #f7f6f5);
  text-wrap: balance;
}

/* What people use West Kite for: a column between two hairlines, with the list cycling one
   line at a time. Only opacity and position change, and the whole thing holds still under
   reduced motion. The script drives it through the CSSOM; the content policy allows no
   style attributes. */
.uses {
  padding: 0 32px;
  border-top: 1px solid var(--wk-hairline, #ebeae9);
}

.uses-col {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 32px 56px;
  border-left: 1px solid var(--wk-hairline, #ebeae9);
  border-right: 1px solid var(--wk-hairline, #ebeae9);
  text-align: center;
}

.uses-label {
  margin: 8px 0 24px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--wk-sans-track, -0.04em);
  color: var(--wk-text-muted, #737373);
}

.uses-window {
  position: relative;
  height: calc(var(--uses-step, 64px) * 7);
  overflow: hidden;
}

.uses-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uses-list li {
  position: absolute;
  /* Three and a half rows down: five rows on show, plus a row at each end where a line
     finishes fading out in full view rather than being cut off by the window edge. */
  top: calc(var(--uses-step, 64px) * 3.5);
  left: 0;
  right: 0;
  margin-top: calc(var(--uses-step, 64px) / -2);
  height: var(--uses-step, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wk-display, "Newsreader", Georgia, serif);
  font-weight: var(--wk-display-weight, 375);
  font-variation-settings: var(--wk-display-vs, "opsz" 28);
  font-size: 54px;
  line-height: 1;
  letter-spacing: var(--wk-display-track, -0.03em);
  color: var(--wk-text, #292929);
  white-space: nowrap;
  opacity: 0;
  transition: transform 700ms ease, opacity 700ms ease;
}

.uses-list li.is-near {
  opacity: 0.26;
}

.uses-list li.is-far {
  opacity: 0.1;
}

.uses-list li.is-active {
  opacity: 1;
}

.uses-cta {
  /* The empty row under the list is the gap; the button needs none of its own. */
  margin-top: 0;
}

@media (max-width: 900px) {
  .site-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: 64px;
    margin-bottom: -64px;
    padding: 0 20px;
  }

  .site-head.is-floating {
    top: 8px;
    margin: 0 12px -64px;
    padding: 0 12px;
  }

  .site-actions,
  .site-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .site-menu {
    top: 56px;
    max-height: calc(100svh - 72px);
    overflow-y: auto;
    transition: opacity 160ms ease,
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 220ms;
  }

  .site-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }

  .mobile-menu-group {
    display: grid;
    padding: 10px 4px 14px;
    border-bottom: 1px solid var(--wk-hairline, #ebeae9);
  }

  .site-menu .mobile-menu-title {
    padding-bottom: 10px;
    font-family: var(--wk-display, "Newsreader", Georgia, serif);
    font-size: 24px;
    font-weight: var(--wk-display-weight, 375);
    line-height: 1.1;
    letter-spacing: -0.025em;
  }

  .mobile-menu-group a:not(.mobile-menu-title) {
    padding-block: 8px;
    color: var(--wk-slate, #737a82);
    font-size: 13px;
  }

  .mobile-menu-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 16px 4px 4px;
  }

  .site-menu .mobile-menu-actions .wk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 12px;
    text-align: center;
  }

  /* The hero still reaches the bottom of the first screen. */
  .hero {
    padding-top: calc(64px + var(--wk-shell-gutter));
    padding-bottom: 104px;
    min-height: 584px;
  }

  .hero-foot {
    margin: 0 20px;
    padding: 0 0 28px;
    gap: 8px var(--hero-foot-gap, 24px);
    font-size: 13px;
  }

  .hero-copy {
    padding: 36px 20px 28px;
  }

  .hero-aside {
    margin-top: 24px;
  }

  .hero h1 {
    font-size: clamp(30px, 8.6vw, 44px);
  }

  .lead {
    max-width: 24em;
    font-size: 16px;
  }

  .demo-link,
  .hero-actions .wk-btn {
    min-height: 44px;
    padding: 0 20px;
    font-size: 15px;
  }

  .uses {
    padding: 0 20px;
  }

  .uses-col {
    padding: 24px 16px 36px;
  }

  .uses-list li {
    font-size: 32px;
  }

  .uses-window {
    --uses-step: 42px;
  }
}

/* Phones: the lockup keeps the mark and drops nothing, but the wordmark can crowd the button. */
@media (max-width: 400px) {
  .site-head {
    padding: 0 16px;
  }

  .hero-copy {
    padding: 28px 16px 24px;
  }

  .lk-word {
    height: 20px;
  }
}

/* A short window, mostly a phone held sideways: let the hero size itself and scroll. */
@media (max-width: 900px) and (max-height: 560px) {
  .hero {
    height: auto;
    min-height: 0;
  }

  .hero-copy {
    padding: 24px 20px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk-mark rect {
    transition: none;
  }

  .hero-video video {
    display: none;
  }

  .uses-list li {
    transition: none;
  }

  .menu-toggle,
  .menu-line,
  .site-menu,
  .site-head {
    transition: none;
  }
}

/* Public catalog and demo entry points share the existing button system. */
.wk-home-listing-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }