/* Hallmark · genre: modern-minimal · macrostructure: Marquee Hero · H9 hero knobs: cinematic infrastructure video + proximity mesh, animation=video-loop + topology-flow, scale=full-viewport
 * theme: custom · vibe: "cinematic infrastructure with visible network flow" · paper: oklch(97.5% 0.008 72) · accent: oklch(68% 0.185 47)
 * display: Sora 700 · body: Manrope 400 · axes: light / geometric-sans / warm
 * audience: startups + technical teams · use: purchase scoped backend work · context: user-provided
 * F1 knobs: tiles=6, spans=equal (client-directed), palette=neutral · F3 knobs: columns=3, rules=every-row · F4 knobs: 1.0–4.0, layout=horizontal
 * nav: N9 edge-aligned minimal, wordmark=center, CTA=ink pill · footer: Ft8 Marquee scroll, preserved by user request
 * enrichment: E2 full-bleed muted video + transparent generative connection network with traveling signals · studied: no · contrast: pass (46–50) · slop: pass (51–55) · honest: pass (56) · chrome: pass (57)
 * tokens: pass (58) · icons: pass (60) · responsive: pass (36, 59, 61–69) · Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
 */

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
  background: var(--color-paper);
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.58;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body:has(dialog[open]) {
  overflow: clip;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

a {
  color: inherit;
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.2em;
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}

button,
a,
summary {
  -webkit-tap-highlight-color: var(--color-transparent);
}

button {
  border: 0;
}

:focus-visible {
  outline: var(--rule-heavy) solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

.cart-trigger:focus-visible,
.menu-trigger:focus-visible,
.button--primary:focus-visible,
.product__add:focus-visible,
.icon-button:focus-visible {
  outline-color: var(--color-paper);
  box-shadow: 0 0 0 var(--space-2xs) var(--color-ink);
}

.proof-policy__links a:focus-visible,
.site-footer a:focus-visible,
.hero-video-toggle:focus-visible {
  outline-color: var(--color-focus-on-dark);
}

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

h1,
h2,
h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(var(--text-2xl), 5.2vw, var(--text-4xl));
  line-height: 1.01;
}

h3 {
  font-size: var(--text-md);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

main [id] {
  scroll-margin-top: var(--space-3xl);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: var(--z-tooltip);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-180%);
  transition: transform var(--dur-short) var(--ease-out);
  white-space: nowrap;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Navigation · N9 edge-aligned minimal */
.site-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background: var(--color-paper);
}

.nav-pill {
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--page-gutter);
  background: var(--color-paper);
  color: var(--color-ink);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
}

.wordmark {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark__labs,
.wordmark > span > span,
.wordmark--footer > span {
  color: var(--color-accent);
}

.wordmark__mark {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-pill__links {
  display: none;
  align-items: stretch;
  align-self: stretch;
  margin-inline-start: auto;
}

.nav-pill__links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.cart-trigger,
.menu-trigger {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding-inline: var(--space-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.cart-trigger {
  margin-inline-start: auto;
}

.cart-trigger__count {
  min-width: 1.35rem;
  height: 1.35rem;
  display: inline-grid;
  place-items: center;
  background: var(--color-signal-warm);
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}

.menu-trigger__label {
  display: none;
}

.cart-trigger__count.is-bumped {
  animation: count-bump var(--dur-mid) var(--ease-out);
}

.menu-trigger {
  background: var(--color-ink);
  color: var(--color-paper);
}

.menu-trigger__icon {
  width: 1rem;
  height: 0.75rem;
  position: relative;
  border-block: var(--rule-strong) solid currentColor;
}

.mobile-menu {
  position: absolute;
  inset: calc(100% - var(--rule-strong)) var(--space-md) auto;
  z-index: var(--z-dropdown);
  display: grid;
  background: var(--color-paper-raised);
  color: var(--color-ink);
  border: var(--rule-strong) solid var(--color-ink);
  box-shadow: var(--shadow-float);
}

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

.mobile-menu a {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding-inline: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mobile-menu a:last-child {
  border-block-end: 0;
}

/* Shared controls */
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.button--primary {
  background: var(--color-ink);
  color: var(--color-paper);
}

.button--quiet {
  background: var(--color-transparent);
  color: var(--color-ink);
}

.button--paper {
  background: var(--color-paper);
  color: var(--color-ink);
}

.button--full {
  width: 100%;
}

.button:active,
.cart-trigger:active,
.menu-trigger:active,
.product__add:active {
  transform: translateY(1px);
}

.button.is-disabled,
.button[aria-disabled="true"],
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Hero · full-bleed infrastructure video */
.hero {
  position: relative;
  display: grid;
  padding: 0;
  background: var(--color-surface-dark);
  isolation: isolate;
}

.system-map {
  position: relative;
  grid-area: 1 / 1;
  min-width: 0;
  min-height: clamp(64rem, 125svh, 68rem);
  overflow: clip;
  background: var(--color-surface-dark);
  color: var(--color-dark-ink);
  border-radius: 0;
}

.system-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  background: linear-gradient(90deg, var(--color-surface-dark-2), var(--color-transparent) 48%);
  opacity: 0.34;
  pointer-events: none;
}

.system-map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  background: linear-gradient(0deg, var(--color-surface-dark), var(--color-transparent) 48%);
  opacity: 0.76;
  pointer-events: none;
}

.hero-video-toggle {
  position: absolute;
  inset: var(--space-md) var(--space-md) auto auto;
  z-index: var(--z-dropdown);
  width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--color-surface-dark-2);
  color: var(--color-dark-ink);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 0.76;
  transition:
    opacity var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.hero-video-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-video-toggle__play {
  display: none;
}

.hero-video-toggle:active {
  transform: translateY(1px);
}

.hero-video-toggle[data-state="paused"] .hero-video-toggle__pause {
  display: none;
}

.hero-video-toggle[data-state="paused"] .hero-video-toggle__play {
  display: block;
}

.hero-video {
  position: absolute;
  z-index: var(--z-base);
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: var(--color-surface-dark);
  opacity: 0.82;
}

/* Safari may honor the operating-system caption preference for decorative video. */
.hero-video::cue,
.hero-video::-webkit-media-text-track-container,
.hero-video::-webkit-media-text-track-display {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.hero-network {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  width: 100%;
  height: 100%;
  display: block;
  background: var(--color-transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.86;
}

.hero__copy {
  position: relative;
  z-index: var(--z-raised);
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  width: calc(100% - (var(--space-md) * 2));
  margin: 0 var(--space-md) var(--space-md);
  padding: var(--space-lg);
  background: var(--color-paper-raised);
  color: var(--color-ink);
}

.availability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
}

.availability > span {
  width: 0.65rem;
  height: 0.65rem;
  background: var(--color-success);
  border-radius: var(--radius-pill);
}

.hero h1 {
  max-width: 10ch;
  margin-block-start: var(--space-sm);
  font-size: clamp(2.35rem, 11vw, 5.25rem);
  line-height: 0.98;
}

.signal-underline {
  width: min(25rem, 100%);
  height: 0.75rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr 1.1fr 1fr;
  margin-block-start: var(--space-xs);
}

.signal-underline i:nth-child(1) {
  background: var(--color-ink);
}

.signal-underline i:nth-child(2) {
  background: var(--color-accent);
}

.signal-underline i:nth-child(3) {
  background: var(--color-rule-2);
}

.signal-underline i:nth-child(4) {
  background: var(--color-accent-dark);
}

.signal-underline i:nth-child(5) {
  background: var(--color-paper-3);
}

.hero__lede {
  max-width: 62ch;
  margin-block-start: var(--space-lg);
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

.hero__assurance {
  margin-block-start: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.hero-reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: hero-in var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* Premise + interactive service explorer */
.premise {
  display: grid;
  gap: var(--space-2xl);
  padding: var(--space-hero-end) var(--page-gutter) var(--space-3xl);
  background: var(--color-paper);
}

.premise__lead {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.premise__body {
  display: grid;
  gap: var(--space-xl);
}

.premise__body h2 {
  max-width: 13ch;
}

.premise__copy {
  display: grid;
  gap: var(--space-md);
  max-width: 58ch;
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.service-explorer {
  min-width: 0;
  display: grid;
  gap: 0;
  overflow: clip;
  background: var(--color-paper-2);
  border-radius: var(--radius-lg);
}

.service-explorer__visual {
  min-width: 0;
  min-height: 22rem;
  display: grid;
  align-content: center;
  gap: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-surface-tech);
  color: var(--color-dark-ink);
  transition:
    opacity var(--dur-mid) var(--ease-in-out),
    transform var(--dur-mid) var(--ease-in-out);
}

.service-explorer__visual[data-layer="database"] {
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.service-explorer__visual[data-layer="cloud"] {
  background: var(--color-paper);
  color: var(--color-ink);
}

.service-explorer__visual[data-layer="integration"] {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.service-explorer__visual.is-switching {
  opacity: 0;
  transform: translateY(8px);
}

.service-explorer__route {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(1.5rem, 0.35fr) minmax(4.5rem, 1fr) minmax(1.5rem, 0.35fr) minmax(0, 0.8fr);
  align-items: center;
  gap: var(--space-xs);
}

.service-explorer__route > span,
.service-explorer__route > strong {
  min-width: 0;
  min-height: 5.5rem;
  display: grid;
  place-items: center;
  padding: var(--space-xs);
  border: var(--rule-strong) solid currentColor;
  text-align: center;
  overflow-wrap: anywhere;
}

.service-explorer__route > span {
  font-size: var(--text-sm);
}

.service-explorer__route > strong {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  transform: rotate(-2deg);
}

.service-explorer__route > i {
  height: var(--rule-strong);
  background: currentColor;
}

.service-explorer__visual > p {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 4vw, var(--text-2xl));
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.service-explorer__content {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-xl);
  padding: var(--space-xl);
}

.drawn-arrow,
.closing-cta__arrow {
  width: 8rem;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-explorer__tabs {
  display: grid;
}

.service-explorer__tabs button {
  min-height: 52px;
  padding: var(--space-sm) 0;
  background: var(--color-transparent);
  color: var(--color-muted);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
  font-family: var(--font-display);
  font-size: clamp(var(--text-md), 4vw, var(--text-xl));
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-align: start;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}

.service-explorer__tabs button[aria-selected="true"] {
  color: var(--color-accent-dark);
  transform: none;
}

.service-explorer__answer {
  max-width: 48ch;
  display: grid;
  gap: var(--space-xs);
}

.service-explorer__answer p {
  color: var(--color-ink-2);
}

/* Shop · dark reel / product mosaic */
.shop-section {
  display: grid;
  gap: var(--space-2xl);
  padding: var(--space-3xl) var(--page-gutter) var(--space-4xl);
  background: var(--color-surface-dark);
  color: var(--color-dark-ink);
}

.section-heading,
.architecture__heading,
.stack__heading,
.delivery__heading,
.faq__heading {
  display: grid;
  gap: var(--space-lg);
  align-items: end;
}

.section-heading h2,
.architecture__heading h2,
.stack__heading h2,
.delivery__heading h2,
.faq__heading h2 {
  max-width: 15ch;
}

.section-heading > p,
.architecture__heading > p,
.stack__heading > p,
.delivery__heading > p,
.faq__heading > p {
  max-width: 54ch;
  color: inherit;
  opacity: 0.78;
  font-size: var(--text-md);
}

.product-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.product {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: var(--space-md);
  height: 100%;
  padding: var(--space-md);
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--radius-lg);
}

.product:nth-child(1) {
  background: var(--color-paper-2);
}

.product:nth-child(2) {
  background: var(--color-paper-3);
}

.product:nth-child(3) {
  background: var(--color-paper);
}

.product:nth-child(4) {
  background: var(--color-accent);
}

.product:nth-child(5) {
  background: var(--color-signal-lilac);
}

.product:nth-child(6) {
  background: var(--color-signal-mint);
}

.product__visual {
  position: relative;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: clip;
  background: var(--color-paper-raised);
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: var(--radius-md);
}

.product__meta {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--space-md);
}

.product__meta > div {
  min-width: 0;
}

.product__meta h3 {
  max-width: 18ch;
}

.product__meta p:not(.product__price) {
  margin-block-start: var(--space-2xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.product__price {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-accent-dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.product:nth-child(4) .product__price {
  color: var(--color-ink);
}

.product__add {
  align-self: end;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.product__add::after {
  content: "+";
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1;
}

.product__add[data-state="success"] {
  background: var(--color-success);
  color: var(--color-paper);
}

.product__add[data-state="success"]::after {
  content: "✓";
}

.product__add[data-state="loading"] {
  opacity: 0.72;
  cursor: wait;
}

.product__add[data-state="error"] {
  background: var(--color-error);
  color: var(--color-paper);
}

.product__code,
.product__path,
.product__signal,
.product__lines,
.database-ring,
.database-key,
.database-value,
.cloud-node,
.cloud-line,
.cloud-region,
.integration-node,
.integration-link,
.integration-caption,
.sprint-axis,
.sprint-caption,
.product__visual--sprint > i {
  position: absolute;
}

.product__visual--endpoint {
  background: var(--color-paper);
}

.product__code {
  inset: 14% auto auto 8%;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.product__path {
  inset: 17% 8% auto auto;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.product__signal {
  width: 0.75rem;
  height: 0.75rem;
  inset: auto auto 18% 8%;
  background: var(--color-success);
  border-radius: var(--radius-pill);
}

.product__lines {
  inset: auto 8% 15% 22%;
  display: grid;
  gap: var(--space-xs);
}

.product__lines i {
  height: var(--rule-strong);
  display: block;
  background: var(--color-rule-2);
}

.product__lines i:nth-child(1) {
  width: 7rem;
}

.product__lines i:nth-child(2) {
  width: 5rem;
}

.product__lines i:nth-child(3) {
  width: 8rem;
}

.product__visual--database {
  background: var(--color-surface-tech-dark);
  color: var(--color-dark-ink);
}

.database-ring {
  width: 64%;
  height: 2.2rem;
  inset-inline-start: 18%;
  border: var(--rule-strong) solid currentColor;
  border-radius: 50%;
}

.database-ring--one {
  inset-block-start: 19%;
}

.database-ring--two {
  inset-block-start: 35%;
}

.database-ring--three {
  inset-block-start: 51%;
}

.database-key {
  inset: auto auto 10% 10%;
  font-weight: 600;
}

.database-value {
  inset: auto 10% 10% auto;
  font-size: var(--text-sm);
}

.product__visual--cloud {
  display: grid;
  place-items: center;
  background: var(--color-paper);
}

.cloud-node {
  inset: 35% auto auto 10%;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.cloud-node--live {
  inset-inline: auto 10%;
  background: var(--color-signal-mint);
}

.cloud-line {
  height: var(--rule-strong);
  inset: 50% 30%;
  background: var(--color-ink);
}

.cloud-region {
  inset: auto 10% 12% auto;
  font-size: var(--text-sm);
}

.product__visual--integration {
  display: grid;
  place-items: center;
  background: var(--color-paper-2);
}

.integration-node {
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  inset: 25% auto auto 12%;
  background: var(--color-paper);
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}

.integration-node:nth-of-type(3) {
  inset-inline: auto 12%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.integration-link {
  height: var(--rule-strong);
  inset: 45% 34%;
  background: var(--color-ink);
}

.integration-caption {
  inset: auto 10% 10%;
  font-size: var(--text-sm);
  text-align: center;
}

.product__visual--sprint {
  display: flex;
  align-items: end;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-accent-soft);
}

.product__visual--sprint > i {
  position: relative;
  width: 15%;
  height: var(--bar);
  display: block;
  background: var(--color-accent);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.sprint-axis {
  height: var(--rule-strong);
  inset: auto var(--space-lg) var(--space-lg);
  background: var(--color-ink);
}

.sprint-caption {
  inset: var(--space-sm) var(--space-sm) auto auto;
  font-size: var(--text-sm);
}

.product__visual--personalized {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-paper);
}

.product__visual--personalized > span {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 0.8;
  color: var(--color-accent);
}

.product__visual--personalized > div {
  display: grid;
  gap: var(--space-xs);
}

.product__visual--personalized i {
  height: var(--rule-strong);
  display: block;
  background: var(--color-ink);
}

.product__visual--personalized i:nth-child(2) {
  width: 70%;
}

.product__visual--personalized i:nth-child(3) {
  width: 42%;
}

.product__visual--personalized > p {
  grid-column: 1 / -1;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

/* Principles · F1 irregular five-tile mosaic */
.principles {
  display: grid;
  gap: var(--space-2xl);
  padding: var(--space-4xl) var(--page-gutter);
  background: var(--color-paper-2);
}

.principles__intro {
  display: grid;
  gap: var(--space-lg);
}

.principles__intro h2 {
  max-width: 13ch;
}

.principles__intro > p {
  max-width: 52ch;
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.principles__list {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.principles__list article {
  min-width: 0;
  min-height: 16rem;
  display: grid;
  align-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-paper-raised);
  border-radius: var(--radius-lg);
}

.principles__list article:nth-child(1) {
  background: var(--color-paper-raised);
}

.principles__list article:nth-child(2) {
  background: var(--color-paper-3);
}

.principles__list article:nth-child(3) {
  background: var(--color-paper-2);
}

.principles__list article:nth-child(4) {
  background: var(--color-ink);
  color: var(--color-paper);
}

.principles__list article:nth-child(5) {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.principles__list article > span {
  width: max-content;
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
}

.principles__list article > p {
  max-width: 34ch;
}

.principle-visual--acceptance > p {
  font-size: var(--text-md);
  line-height: 1.7;
}

.principle-visual--acceptance strong {
  display: inline-block;
  min-width: 4.5rem;
  font-family: var(--font-display);
}

.principle-visual--risk > div {
  min-height: 6rem;
  display: flex;
  align-items: end;
  gap: var(--space-sm);
}

.principle-visual--risk i {
  flex: 1;
  display: block;
  background: var(--color-ink);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.principle-visual--risk i:nth-child(1) {
  height: 38%;
}

.principle-visual--risk i:nth-child(2) {
  height: 67%;
}

.principle-visual--risk i:nth-child(3) {
  height: 48%;
}

.principle-visual--risk i:nth-child(4) {
  height: 82%;
  background: var(--color-accent);
}

/* Reference architecture */
.architecture {
  display: grid;
  gap: var(--space-2xl);
  padding: var(--space-4xl) var(--page-gutter);
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.architecture-board {
  min-width: 0;
  display: grid;
  gap: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-paper-raised);
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: var(--radius-lg);
}

.architecture-board__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--text-sm);
}

.architecture-board__legend > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.legend-dot {
  width: 0.65rem;
  height: 0.65rem;
  display: inline-block;
  background: var(--color-paper-3);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-pill);
}

.legend-dot--owned {
  background: var(--color-accent);
}

.architecture-board__flow {
  min-width: 0;
  display: grid;
  gap: var(--space-sm);
}

.architecture-node {
  min-width: 0;
  min-height: 7rem;
  display: grid;
  align-content: center;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: var(--radius-md);
}

.architecture-node:nth-of-type(1) {
  background: var(--color-paper-3);
}

.architecture-node:nth-of-type(2) {
  background: var(--color-paper);
}

.architecture-node:nth-of-type(3) {
  background: var(--color-accent-soft);
}

.architecture-node:nth-of-type(4) {
  background: var(--color-paper-3);
}

.architecture-node:nth-of-type(5) {
  background: var(--color-accent);
}

.architecture-node > span,
.architecture-node > small {
  font-size: var(--text-xs);
}

.architecture-node > strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1;
}

.architecture-node--owned {
  box-shadow: inset 0 0 0 var(--rule-strong) var(--color-accent);
}

.architecture-arrow {
  display: grid;
  place-items: center;
  min-height: 2rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  transform: rotate(90deg);
}

.architecture-board__notes {
  display: grid;
  gap: var(--space-sm);
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.architecture-board__notes p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
}

.architecture-board__notes span {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Stack · F3 spec sheet */
.stack {
  display: grid;
  gap: var(--space-2xl);
  padding: var(--space-4xl) var(--page-gutter);
  background: var(--color-paper);
}

.stack-table {
  border-block-start: var(--rule-strong) solid var(--color-ink);
}

.stack-row {
  min-width: 0;
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
}

.stack-row > * {
  min-width: 0;
}

.stack-row--head {
  display: none;
}

.stack-row strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.stack-row span {
  color: var(--color-ink-2);
}

/* Delivery · F4 step sequence */
.delivery {
  display: grid;
  gap: var(--space-2xl);
  padding: var(--space-3xl) var(--page-gutter) var(--space-4xl);
  background: var(--color-paper-3);
}

.delivery-steps {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  padding: 0;
  list-style: none;
}

.delivery-steps li {
  min-width: 0;
  min-height: 15rem;
  display: grid;
  align-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-paper-raised);
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: var(--radius-lg);
}

.delivery-steps li:nth-child(1) {
  background: var(--color-paper-raised);
}

.delivery-steps li:nth-child(2) {
  background: var(--color-paper-2);
}

.delivery-steps li:nth-child(3) {
  background: var(--color-paper-raised);
}

.delivery-steps li:nth-child(4) {
  background: var(--color-accent);
}

.delivery-steps > li > span {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.delivery-steps li > div {
  display: grid;
  gap: var(--space-xs);
}

.delivery-steps p {
  color: var(--color-ink-2);
}

/* Honest proof policy */
.proof-policy {
  display: grid;
  gap: var(--space-2xl);
  padding: var(--space-4xl) var(--page-gutter);
  background: var(--color-surface-tech);
  color: var(--color-dark-ink);
}

.proof-policy > * {
  min-width: 0;
}

.proof-policy > div:first-child {
  display: grid;
  gap: var(--space-lg);
}

.proof-policy h2 {
  max-width: 11ch;
}

.proof-policy p {
  max-width: 58ch;
  color: var(--color-dark-muted);
  font-size: var(--text-md);
}

.proof-policy__links {
  align-self: end;
  display: grid;
  border-block-start: var(--rule-hair) solid var(--color-dark-muted);
}

.proof-policy__links a {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  border-block-end: var(--rule-hair) solid var(--color-dark-muted);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* FAQ */
.faq {
  display: grid;
  gap: var(--space-2xl);
  padding: var(--space-4xl) var(--page-gutter);
  background: var(--color-paper);
}

.faq__heading a {
  font-weight: 600;
  text-decoration-color: var(--color-accent);
  white-space: nowrap;
}

.faq__list {
  border-block-start: var(--rule-strong) solid var(--color-ink);
}

.faq details {
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
}

.faq summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.025em;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: var(--text-xl);
  line-height: 1;
  transition: transform var(--dur-short) var(--ease-out);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details > div {
  display: grid;
  grid-template-rows: 1fr;
  overflow: clip;
}

.faq details p {
  max-width: 66ch;
  padding-block: 0 var(--space-lg);
  color: var(--color-ink-2);
}

/* Closing CTA · warm signal panel */
.closing-cta {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  margin: var(--space-lg) var(--page-gutter) var(--space-4xl);
  padding: var(--space-2xl) var(--space-lg);
  overflow: clip;
  background: var(--color-signal-warm);
  color: var(--color-ink);
  border-radius: var(--radius-lg);
}

.closing-cta__arrow {
  width: clamp(6rem, 18vw, 12rem);
}

.closing-cta > div {
  display: grid;
  gap: var(--space-sm);
}

.closing-cta h2 {
  max-width: 15ch;
}

.closing-cta p {
  max-width: 48ch;
  font-size: var(--text-md);
}

.closing-cta .button {
  justify-self: start;
}

/* Footer · Ft8 kinetic statement + legal close */
.site-footer {
  background: var(--color-surface-dark);
  color: var(--color-dark-ink);
  border-block-start: var(--rule-strong) solid var(--color-dark-ink);
}

.footer-marquee {
  overflow: clip;
  border-block-end: var(--rule-strong) solid var(--color-dark-ink);
}

.footer-marquee__track {
  width: max-content;
  display: flex;
  gap: var(--space-2xl);
  padding-block: var(--space-lg);
  animation: footer-marquee 40s linear infinite;
}

.footer-marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 5vw, var(--text-4xl));
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}

.footer-marquee:hover .footer-marquee__track,
.footer-marquee:focus-within .footer-marquee__track {
  animation-play-state: paused;
}

.site-footer__meta {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--page-gutter);
}

.wordmark--footer {
  font-size: var(--text-xl);
}

.site-footer__meta > a,
.site-footer__meta nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
}

.site-footer__meta nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
}

.site-footer__meta > span {
  color: var(--color-dark-muted);
  font-size: var(--text-sm);
}

/* Cart dialog */
.cart-dialog {
  width: min(36rem, calc(100% - var(--space-lg)));
  max-height: calc(100dvh - var(--space-lg));
  padding: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dialog);
}

.cart-dialog::backdrop {
  background: var(--color-overlay);
}

.cart-dialog[open] {
  animation: dialog-in var(--dur-mid) var(--ease-out);
}

.cart-dialog__inner {
  display: grid;
  max-height: calc(100dvh - var(--space-lg));
}

.cart-dialog header,
.cart-dialog footer {
  padding: var(--space-lg);
}

.cart-dialog header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.cart-dialog header p {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.cart-dialog header h2 {
  font-size: var(--text-3xl);
}

.icon-button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-pill);
  font-size: var(--text-xl);
  cursor: pointer;
}

.cart-dialog__items {
  min-height: 10rem;
  display: grid;
  align-content: start;
  overflow-y: auto;
  padding: var(--space-md) var(--space-lg);
}

.cart-empty {
  min-height: 8rem;
  display: grid;
  place-content: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  text-align: center;
}

.cart-empty p {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
}

.cart-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 56px;
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.cart-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cart-item span {
  font-variant-numeric: tabular-nums;
}

.cart-item button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--color-transparent);
  border-radius: var(--radius-pill);
  font-size: var(--text-lg);
  cursor: pointer;
}

.cart-dialog footer {
  display: grid;
  gap: var(--space-md);
  background: var(--color-paper-2);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
}

.cart-total strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

.cart-dialog footer > p {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.cart-status {
  position: fixed;
  z-index: var(--z-toast);
  inset: auto var(--space-md) var(--space-md);
  pointer-events: none;
}

/* Interactive and pointer-capable states */
@media (hover: hover) and (pointer: fine) {
  .nav-pill__links a:hover {
    background: var(--color-transparent);
    color: var(--color-accent-dark);
  }

  .cart-trigger:hover,
  .button--primary:hover,
  .product__add:hover {
    background: var(--color-accent);
    color: var(--color-accent-ink);
  }

  .menu-trigger:hover {
    background: var(--color-surface-dark-2);
  }

  .button--quiet:hover,
  .button--paper:hover {
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .service-explorer__tabs button:hover {
    color: var(--color-ink-2);
  }

  .proof-policy__links a:hover {
    color: var(--color-signal-warm);
  }

  .site-footer__meta a:hover {
    color: var(--color-signal-warm);
  }

  .hero-video-toggle:hover {
    opacity: 1;
  }
}

@media (pointer: coarse) {
  .button,
  .cart-trigger,
  .menu-trigger,
  .product__add,
  .service-explorer__tabs button {
    min-height: 48px;
  }
}

@media (min-width: 23rem) {
  .system-map {
    min-height: clamp(58rem, 118svh, 62rem);
  }

  .hero h1 {
    font-size: clamp(2.75rem, 11vw, 5.25rem);
  }
}

/* Tablet */
@media (min-width: 40rem) {
  .nav-pill {
    gap: var(--space-sm);
    padding-inline: var(--page-gutter);
  }

  .menu-trigger__label {
    display: inline;
  }

  .service-explorer__tabs button[aria-selected="true"] {
    transform: translateX(var(--space-sm));
  }

  .proof-policy__links a {
    gap: var(--space-md);
  }

  .hero {
    padding-block-end: 0;
  }

  .system-map {
    min-height: max(51rem, calc(100svh - var(--nav-height)));
  }

  .hero__copy {
    width: min(46rem, calc(100% - var(--space-2xl)));
    margin: 0 0 var(--space-xl) var(--space-xl);
    padding: var(--space-xl);
  }

  .hero h1 {
    font-size: var(--text-display);
  }

  .premise__body,
  .principles__intro,
  .section-heading,
  .architecture__heading,
  .stack__heading,
  .delivery__heading,
  .faq__heading {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product--personalized {
    grid-column: 1 / -1;
  }

  .principles__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .principles__list article:nth-child(3),
  .principles__list article:nth-child(5) {
    grid-column: 1 / -1;
  }

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

  .stack-row {
    grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
    gap: var(--space-lg);
  }

  .stack-row--head {
    display: grid;
    padding-block: var(--space-sm);
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .delivery-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-policy {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .closing-cta {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: var(--space-2xl);
  }

  .closing-cta .button {
    grid-column: 2;
  }

  .site-footer__meta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .site-footer__meta nav,
  .site-footer__meta > span {
    grid-column: 1 / -1;
  }
}

/* Desktop */
@media (min-width: 60rem) {
  .proof-policy__links a {
    font-size: var(--text-md);
  }

  .nav-pill__links {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin-inline-start: 0;
  }

  .nav-pill {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .nav-pill .wordmark {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .menu-trigger {
    display: none;
  }

  .cart-trigger {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin-inline-start: 0;
  }

  .mobile-menu {
    display: none;
  }

  .hero {
    padding-block-end: 0;
  }

  .system-map {
    min-height: max(47rem, calc(100svh - var(--nav-height)));
  }

  .hero__copy {
    position: relative;
    inset: auto;
    width: min(48rem, 54%);
    margin: 0 0 var(--space-xl) var(--page-gutter);
    padding: var(--space-xl) var(--space-2xl) var(--space-xl) var(--space-xl);
  }

  .premise {
    padding-block-start: var(--space-4xl);
  }

  .service-explorer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  }

  .service-explorer__visual {
    min-height: 42rem;
    padding: var(--space-2xl);
  }

  .service-explorer__content {
    min-height: 42rem;
    padding: var(--space-2xl);
  }

  .service-explorer__tabs button {
    font-size: var(--text-2xl);
  }

  .product-grid {
    grid-template-columns: repeat(var(--knl-product-columns, 3), minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .product__visual {
    min-height: 0;
  }

  .principles__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(9rem, auto);
  }

  .principles__list article:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }

  .principles__list article:nth-child(2) {
    grid-column: span 2;
  }

  .principles__list article:nth-child(3) {
    grid-column: span 2;
  }

  .principles__list article:nth-child(4) {
    grid-column: span 2;
  }

  .principles__list article:nth-child(5) {
    grid-column: span 4;
  }

  .principles__list article {
    min-height: 0;
  }

  .architecture-board {
    padding: var(--space-xl);
  }

  .architecture-board__flow {
    grid-template-columns:
      minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .architecture-arrow {
    transform: none;
  }

  .delivery-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .closing-cta {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .closing-cta .button {
    grid-column: auto;
    justify-self: end;
  }

  .site-footer__meta {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .site-footer__meta nav,
  .site-footer__meta > span {
    grid-column: auto;
  }
}

@media (min-width: 90rem) {
  .premise,
  .shop-section,
  .principles,
  .architecture,
  .stack,
  .delivery,
  .proof-policy,
  .faq {
    padding-inline: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
  }

  .hero__copy {
    margin-inline-start: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
  }

}

@keyframes hero-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes count-bump {
  50% {
    transform: scale(1.12);
  }
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes footer-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - var(--space-xl)));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }

  .hero-reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero-video,
  .hero-video-toggle {
    display: none;
  }

  .system-map {
    background: var(--color-surface-dark) url("media/hero-infrastructure-poster.jpg") center / cover no-repeat;
  }

  .footer-marquee__track {
    transform: none;
    animation: none;
  }
}

/* WordPress, WooCommerce and native Gutenberg surfaces. */
body.single-product.product {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: var(--color-paper) !important;
  color: var(--color-ink) !important;
}

body.single-product .wp-site-blocks,
body.single-product .wp-block-group.woocommerce.product {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  background: var(--color-paper);
  color: var(--color-ink);
}

.wp-site-blocks,
.knl-main,
.knl-main--page {
  overflow: clip;
}

.knl-block[style*="--knl-bg"] {
  background: var(--knl-bg) !important;
}

.knl-block[style*="--knl-text"] {
  color: var(--knl-text) !important;
}

.knl-block[style*="--knl-text"] :is(h1, h2, h3, h4, h5, h6, p, a, summary, li) {
  color: inherit;
}

.knl-block[style*="--knl-accent"] :is(.availability > span, .legend-dot--owned, .product__add, .button--primary) {
  background-color: var(--knl-accent) !important;
  color: var(--color-accent-ink) !important;
}

.wp-site-blocks > *,
.knl-main > *,
.knl-main--page > *,
.entry-content > * {
  margin-block: 0;
}

.knl-main--page > .wp-block-post-content > :not(.alignfull):not(.alignwide),
.knl-legal-content,
.woocommerce .woocommerce-notices-wrapper,
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
  width: min(100% - (2 * var(--page-gutter)), 62rem);
  margin-inline: auto;
}

.knl-main--page > .wp-block-post-content {
  width: 100%;
  max-width: none !important;
  margin-inline: 0 !important;
}

.knl-main--page > .wp-block-post-content > .knl-block:not(.knl-legal-content) {
  width: 100%;
  max-width: none !important;
  margin-inline: 0 !important;
}

.knl-main > .wp-block-post-content > .closing-cta,
.knl-main--page > .wp-block-post-content > .closing-cta {
  width: auto;
  margin: var(--space-lg) var(--page-gutter) clamp(6rem, 10vw, 10rem) !important;
}

.admin-bar .site-header {
  top: 32px;
}

.knl-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
  gap: var(--space-2xl);
  align-items: end;
  padding: clamp(9rem, 15vw, 13rem) var(--page-gutter) clamp(4rem, 8vw, 7rem);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background:
    linear-gradient(135deg, transparent 68%, color-mix(in oklch, var(--color-accent-soft) 68%, transparent) 68%),
    var(--color-paper);
}

.knl-page-hero h1 {
  max-width: 14ch;
  margin: var(--space-md) 0 0;
  font-size: var(--text-display-s);
  letter-spacing: -.055em;
}

.knl-page-hero__body {
  max-width: 38rem;
}

.knl-page-hero__body > p {
  margin: 0 0 var(--space-xl);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.55;
}

.knl-feature-grid,
.knl-reviews,
.knl-contact,
.knl-legal-content {
  padding: clamp(4.5rem, 8vw, 8rem) var(--page-gutter);
}

.knl-feature-grid:nth-of-type(even) {
  background: var(--color-paper-2);
}

.knl-feature-grid__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .7fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.knl-feature-grid__heading h2 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 4.6rem);
  letter-spacing: -.05em;
}

.knl-feature-grid__heading p {
  max-width: 42rem;
  margin: var(--space-xs) 0 0;
  color: var(--color-muted);
  font-size: var(--text-md);
}

.knl-feature-grid__items {
  display: grid;
  grid-template-columns: repeat(var(--knl-columns, 3), minmax(0, 1fr));
  border-top: var(--rule-strong) solid var(--color-ink);
  border-left: var(--rule-hair) solid var(--color-rule);
}

.knl-feature-grid__items article {
  min-height: 17rem;
  padding: var(--space-xl);
  border-right: var(--rule-hair) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.knl-feature-grid__items article > span {
  color: var(--color-accent-dark);
  font: 750 var(--text-xs)/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.knl-feature-grid__items h3 {
  margin: clamp(3rem, 7vw, 6rem) 0 var(--space-sm);
  font-size: var(--text-xl);
  letter-spacing: -.035em;
}

.knl-feature-grid__items p {
  margin: 0;
  color: var(--color-muted);
}

.knl-product-card__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-paper-3);
}

.knl-product-card__image img {
  transition: transform var(--dur-long) var(--ease-out), filter var(--dur-mid) var(--ease-out);
}

.knl-product-card:hover .knl-product-card__image img {
  transform: scale(1.025);
  filter: saturate(1.06) contrast(1.02);
}

.product__meta > div {
  min-width: 0;
}

.product__meta h3 a {
  color: inherit;
  text-decoration: none;
}

.product__includes {
  display: grid;
  gap: var(--space-2xs);
  max-width: 34ch;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.product__add {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 2.85rem;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: var(--radius-pill);
  color: var(--color-paper);
  font-weight: 750;
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}

.product__add:hover,
.product__add:focus-visible {
  color: var(--color-paper);
  background: var(--color-ink);
}

/* Hallmark · component: testimonial carousel · genre: modern-minimal · theme: existing KernelNest custom
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (46–50) · Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
 */
.knl-reviews {
  background: var(--color-surface-dark);
  color: var(--color-dark-ink);
}

.knl-reviews__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: end;
  margin-bottom: var(--space-xl);
}

.knl-reviews__intro {
  min-width: 0;
}

.knl-reviews__heading h2 {
  max-width: 15ch;
  margin: 0;
  color: inherit;
  font-size: clamp(2.25rem, 5vw, 4.6rem);
  letter-spacing: -.05em;
}

.knl-reviews__heading p {
  max-width: 48rem;
  margin: var(--space-md) 0 0;
  color: var(--color-dark-muted);
  font-size: var(--text-md);
}

.knl-review-controls {
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
  min-width: 0;
  visibility: hidden;
}

.knl-reviews.is-ready.has-review-overflow .knl-review-controls {
  visibility: visible;
}

.knl-review-control {
  position: relative;
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  background: var(--color-surface-dark-2);
  color: var(--color-dark-ink);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.knl-review-control svg {
  width: var(--space-lg);
  height: var(--space-lg);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--rule-strong);
}

@media (hover: hover) and (pointer: fine) {
  .knl-review-control:not(:disabled):hover {
    background: var(--color-paper-3);
    color: var(--color-ink);
    transform: translateY(-1px);
  }
}

.knl-review-control:focus-visible {
  outline-color: var(--color-focus-on-dark);
}

.knl-review-control:not(:disabled):active {
  transform: translateY(1px);
}

.knl-review-control:disabled,
.knl-review-control[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

.knl-review-control[data-state="loading"] svg,
.knl-review-control[data-state="error"] svg,
.knl-review-control[data-state="success"] svg {
  opacity: 0;
}

.knl-review-control[data-state="loading"]::after,
.knl-review-control[data-state="error"]::after,
.knl-review-control[data-state="success"]::after {
  position: absolute;
  display: grid;
  place-items: center;
  font: 750 var(--text-sm)/1 var(--font-display);
}

.knl-review-control[data-state="loading"]::after {
  content: "";
  width: var(--space-md);
  height: var(--space-md);
  border: var(--rule-strong) solid currentColor;
  border-inline-end-color: var(--color-transparent);
  border-radius: var(--radius-pill);
  animation: knl-review-spin 800ms linear infinite;
}

.knl-review-control[data-state="error"] {
  color: var(--color-error-soft);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-error);
}

.knl-review-control[data-state="error"]::after {
  content: "!";
}

.knl-review-control[data-state="success"] {
  color: var(--color-success-soft);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-success);
}

.knl-review-control[data-state="success"]::after {
  content: "✓";
}

@keyframes knl-review-spin {
  to {
    transform: rotate(1turn);
  }
}

.knl-review-dots {
  display: flex;
  align-items: center;
}

.knl-review-dot {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--color-transparent);
  color: var(--color-dark-muted);
  cursor: pointer;
}

.knl-review-dot::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  transform: scaleX(1);
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.knl-review-dot[aria-current="true"] {
  color: var(--color-signal-warm);
}

.knl-review-dot[aria-current="true"]::before {
  transform: scale(1.35);
}

@media (hover: hover) and (pointer: fine) {
  .knl-review-dot:hover {
    color: var(--color-dark-ink);
  }
}

.knl-review-dot:focus-visible {
  outline-color: var(--color-focus-on-dark);
}

.knl-review-dot:active::before {
  transform: scale(.8);
}

.knl-review-dot:disabled,
.knl-review-dot[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

.knl-review-dot[data-state="loading"]::before {
  animation: knl-review-spin 800ms linear infinite;
}

.knl-review-dot[data-state="error"] {
  color: var(--color-error-soft);
}

.knl-review-dot[data-state="success"] {
  color: var(--color-success-soft);
}

.knl-review-track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}

.knl-review-track::-webkit-scrollbar {
  display: none;
}

.knl-review-track.has-review-tail::after {
  content: "";
  flex: 0 0 var(--review-tail-space, 0px);
  align-self: stretch;
  pointer-events: none;
}

.knl-review-track:focus-visible {
  outline-color: var(--color-focus-on-dark);
}

.knl-review-track--count-0 {
  display: block;
  overflow: visible;
}

.knl-review-card,
.knl-review-empty {
  padding: var(--space-xl);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface-dark-2);
  color: var(--color-dark-ink);
}

.knl-review-card {
  flex: 0 0 min(92%, 20.5rem);
  display: flex;
  min-height: 22rem;
  flex-direction: column;
  scroll-snap-align: none;
}

.knl-review-card.is-page-start {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.knl-review-card blockquote {
  flex: 1 1 auto;
  margin: var(--space-lg) 0 var(--space-xl);
  color: var(--color-dark-ink);
  font: 500 var(--text-md)/1.55 var(--font-body);
  letter-spacing: -.01em;
}

.knl-review-card blockquote p {
  margin: 0;
}

.knl-review-stars {
  color: var(--color-signal-warm);
  font-size: var(--text-lg);
  line-height: 1;
  letter-spacing: .08em;
}

.knl-review-context {
  margin: 0;
  color: var(--color-signal-warm);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.knl-review-author {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.knl-review-avatar {
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 2.8rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-signal-warm);
  color: var(--color-accent-ink);
  font: 750 var(--text-sm)/1 var(--font-display);
}

.knl-review-person {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
}

.knl-review-person strong {
  color: var(--color-dark-ink);
  font-family: var(--font-display);
}

.knl-review-meta {
  color: var(--color-dark-muted);
  font-size: var(--text-sm);
}

.knl-review-empty {
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, .6fr) auto;
  gap: var(--space-lg);
  align-items: center;
}

.knl-review-empty h3,
.knl-review-empty p {
  margin: 0;
}

@media (min-width: 641px) {
  .knl-review-card {
    flex-basis: calc((100% - var(--space-md)) / 2);
  }
}

@media (min-width: 901px) {
  .knl-reviews__heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .knl-review-controls {
    justify-content: flex-end;
  }

  .knl-review-card {
    flex-basis: calc((100% - var(--space-md) - var(--space-md)) / 3);
  }
}

.knl-contact {
  display: grid;
  grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 8vw, 8rem);
  background: var(--color-paper-2);
}

.knl-contact-copy h2 {
  max-width: 11ch;
  margin: 0 0 var(--space-lg);
  font-size: clamp(2.3rem, 5vw, 4.8rem);
  letter-spacing: -.055em;
}

.knl-contact-copy > p {
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.knl-contact-copy aside {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--rule-strong) solid var(--color-ink);
  color: var(--color-muted);
}

.knl-contact-form-wrap {
  padding: clamp(1.25rem, 4vw, 3rem);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-raised);
}

.knl-contact-form,
.woocommerce form.checkout,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-Reviews form {
  display: grid;
  gap: var(--space-lg);
}

.knl-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.knl-contact-form label,
.woocommerce form label {
  display: grid;
  gap: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.knl-contact-form input,
.knl-contact-form select,
.knl-contact-form textarea,
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea,
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  font: 500 var(--text-base)/1.4 var(--font-body);
  outline: 2px solid transparent;
  outline-offset: 1px;
}

.knl-contact-form textarea,
.woocommerce textarea {
  resize: vertical;
}

.knl-contact-form :is(input, select, textarea):hover:not(:disabled),
.woocommerce :is(input, select, textarea):hover:not(:disabled) {
  border-color: var(--color-ink-2);
}

.knl-contact-form :is(input, select, textarea):active:not(:disabled),
.woocommerce :is(input, select, textarea):active:not(:disabled) {
  border-color: var(--color-focus);
}

.knl-contact-form :is(input, select, textarea):disabled,
.woocommerce :is(input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .55;
  background: var(--color-paper-3);
}

.knl-contact-form :is(input, select, textarea):user-invalid,
.knl-contact-form :is(input, select, textarea)[aria-invalid="true"],
.woocommerce :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.knl-contact-form input:focus,
.knl-contact-form select:focus,
.knl-contact-form textarea:focus,
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  border-color: var(--color-focus);
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.knl-contact-form .button {
  min-height: 3.25rem;
}

.knl-form-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: var(--space-md) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-left: var(--space-2xs) solid var(--color-accent);
  background: var(--color-paper);
  list-style: none;
}

.knl-form-notice.is-success {
  border-left-color: var(--color-success);
  background: var(--color-success-soft);
}

.knl-form-notice.is-error,
.woocommerce-error {
  border-left-color: var(--color-error);
  background: var(--color-error-soft);
}

.knl-form-privacy {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.knl-legal-content {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-4xl);
}

.knl-legal-content > h2 {
  margin: var(--space-2xl) 0 var(--space-md);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-2xl);
  letter-spacing: -.035em;
}

.knl-legal-content > h3 {
  margin: var(--space-xl) 0 var(--space-sm);
  font-size: var(--text-lg);
}

.knl-legal-content p,
.knl-legal-content li {
  color: var(--color-ink-2);
}

.knl-legal-content a {
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.woocommerce .products,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none;
}

.woocommerce ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
}

.woocommerce div.product {
  padding: clamp(7rem, 12vw, 10rem) var(--page-gutter) var(--space-4xl);
}

body.single-product .knl-product-shell {
  width: 100%;
  max-width: none;
  padding: clamp(7.5rem, 11vw, 10rem) var(--page-gutter) 0;
}

body.single-product .knl-product-shell > :is(.knl-product-breadcrumb, .knl-product-main, .knl-product-details) {
  width: min(100%, var(--page-max));
  max-width: var(--page-max) !important;
  margin-inline: auto !important;
}

body.single-product .knl-product-breadcrumb {
  margin-bottom: var(--space-xl) !important;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

body.single-product .knl-product-main {
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

body.single-product .knl-product-gallery,
body.single-product .knl-product-summary {
  min-width: 0;
}

body.single-product .knl-product-gallery :is(.wp-block-woocommerce-product-image-gallery, .woocommerce-product-gallery) {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.single-product .knl-product-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

body.single-product .woocommerce-product-gallery__trigger {
  display: none !important;
}

body.single-product .knl-product-summary {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

body.single-product .knl-product-summary h1 {
  margin: var(--space-sm) 0 0;
  font-size: clamp(2.7rem, 5.7vw, 5.3rem);
  letter-spacing: -.06em;
}

body.single-product .knl-product-kicker {
  color: var(--color-accent-dark);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.single-product .knl-product-delivery-note {
  padding: var(--space-md);
  border-left: var(--space-2xs) solid var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

body.single-product .knl-product-details {
  padding: clamp(3rem, 7vw, 6rem) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}

body.single-product .knl-product-details .wc-block-components-tabs__content {
  max-width: 58rem;
}

body.single-product .knl-product-details :is(h2, h3) {
  max-width: 22ch;
  margin: var(--space-2xl) 0 var(--space-md);
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  letter-spacing: -.035em;
}

body.single-product .knl-product-details p,
body.single-product .knl-product-details li {
  color: var(--color-ink-2);
}

body.single-product .knl-product-details ul {
  display: grid;
  gap: var(--space-sm);
  padding-left: var(--space-lg);
}

body.single-product .knl-product-shell > .knl-block {
  width: calc(100% + (2 * var(--page-gutter)));
  max-width: none !important;
  margin-inline: calc(-1 * var(--page-gutter)) !important;
}

.woocommerce div.product .product_title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: -.055em;
}

.woocommerce div.product div.images img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.woocommerce div.product .summary {
  display: grid;
  align-content: start;
  gap: var(--space-md);
}

.knl-product-includes {
  padding: var(--space-lg);
  border-top: var(--rule-strong) solid var(--color-ink);
  background: var(--color-paper-2);
}

.knl-product-includes h2 {
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.knl-product-includes ul {
  display: grid;
  gap: var(--space-xs);
}

.woocommerce div.product form.cart .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.wc-block-components-button,
.wp-element-button {
  min-height: 3rem;
  padding: var(--space-sm) 1.25rem;
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: 750;
}

.woocommerce table.shop_table,
.wc-block-cart-items,
.wc-block-components-sidebar-layout .wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
  border-color: var(--color-rule);
  border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.wc-block-cart-items td,
.wc-block-cart-items th {
  padding: var(--space-md);
  border-color: var(--color-rule);
}

.wc-block-cart,
.wc-block-checkout,
.woocommerce-cart-form,
.cart-collaterals,
.woocommerce-checkout {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-3xl);
}

.knl-commerce-page .entry-content,
.knl-commerce-page > .wp-block-post-content {
  width: 100%;
  max-width: none;
}

.knl-commerce-page .wp-block-woocommerce-cart,
.knl-commerce-page .wp-block-woocommerce-checkout {
  width: min(100% - (2 * var(--page-gutter)), var(--page-max));
  margin-inline: auto !important;
}

.knl-commerce-page--checkout .wp-block-woocommerce-checkout {
  padding-top: clamp(3rem, 7vw, 6rem);
}

.knl-order-confirmation {
  width: min(100% - (2 * var(--page-gutter)), var(--page-max));
  padding: clamp(8rem, 13vw, 11rem) 0 var(--space-4xl);
}

.knl-order-next {
  margin: var(--space-2xl) 0 !important;
  padding: var(--space-xl);
  border-top: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-accent-soft);
}

.knl-order-next h2,
.knl-order-next p {
  margin: 0;
}

.knl-order-next h2 {
  margin-bottom: var(--space-md);
  font-size: var(--text-xl);
}

.wc-block-components-sidebar,
.woocommerce-checkout-review-order,
.cart_totals {
  padding: var(--space-lg);
  border-top: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-paper-2);
}

.woocommerce #reviews #comments ol.commentlist {
  padding: 0;
  list-style: none;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
  margin: 0 0 var(--space-md);
  padding: var(--space-lg);
  border-color: var(--color-rule);
  border-radius: 0;
}

.woocommerce .star-rating,
.woocommerce p.stars a {
  color: var(--color-accent-dark);
}

@media (max-width: 900px) {
  .knl-page-hero,
  .knl-contact,
  .knl-feature-grid__heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .knl-feature-grid__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .woocommerce .products,
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.single-product .knl-product-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body.single-product .knl-product-gallery,
  body.single-product .knl-product-summary {
    flex-basis: auto !important;
  }
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

@media (max-width: 640px) {
  .knl-page-hero {
    gap: var(--space-lg);
    padding-top: 7.75rem;
  }

  .knl-page-hero h1 {
    font-size: clamp(2.5rem, 13vw, 4rem);
  }

  .knl-feature-grid,
  .knl-reviews,
  .knl-contact,
  .knl-legal-content {
    padding-inline: var(--space-md);
  }

  .knl-feature-grid__items,
  .woocommerce .products,
  .woocommerce ul.products,
  .knl-form-row,
  .knl-review-empty {
    grid-template-columns: minmax(0, 1fr);
  }

  .knl-review-dots {
    margin-inline: calc(-1 * var(--space-2xs));
  }

  .knl-review-dot:not(.is-near) {
    display: none;
  }

  .knl-feature-grid__items article {
    min-height: 14rem;
    padding: var(--space-lg);
  }

  .knl-contact-form-wrap,
  .knl-review-card,
  .knl-review-empty {
    padding: var(--space-lg);
  }

  .woocommerce div.product {
    padding-inline: var(--space-md);
  }

  body.single-product .knl-product-shell {
    padding-inline: var(--space-md);
  }

  body.single-product .knl-product-shell > .knl-block {
    width: calc(100% + (2 * var(--space-md)));
    margin-inline: calc(-1 * var(--space-md)) !important;
  }
}

@media (max-width: 480px) {
  .faq summary {
    gap: var(--space-xs);
    font-size: var(--text-sm);
    white-space: nowrap;
  }
}

@media (max-width: 340px) {
  .faq summary {
    gap: var(--space-2xs);
    font-size: var(--text-xs);
  }
}