@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.8/dist/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}

:root {
  --page: #071018;
  --page-2: #0b1521;
  --surface: #111b29;
  --surface-2: #162232;
  --surface-3: #1d2a3b;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #f6f8fb;
  --muted: rgba(246, 248, 251, 0.68);
  --faint: rgba(246, 248, 251, 0.55);
  --green: #22c55e;
  --green-2: #4ade80;
  --green-soft: rgba(34, 197, 94, 0.14);
  --red: #ef4444;
  --blue: #3b82f6;
  --blue-2: #2dd4bf;
  --blue-soft: rgba(59, 130, 246, 0.16);
  --purple: #a855f7;
  --yellow: #fbbf24;
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.4);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Twemoji Country Flags", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--page);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
}

h1,
h2,
h3 {
  font-family: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.72;
  background:
    radial-gradient(circle at 15% 18%, rgba(34, 197, 94, 0.1), transparent 32%),
    radial-gradient(circle at 86% 20%, rgba(59, 130, 246, 0.12), transparent 34%),
    radial-gradient(circle at 64% 82%, rgba(59, 130, 246, 0.06), transparent 38%),
    radial-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: auto, auto, auto, 24px 24px;
}

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

button {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 70px;
  padding: 0 clamp(18px, 4vw, 48px);
  display: grid;
  grid-template-columns: 240px 1fr auto;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 16, 24, 0.82);
  backdrop-filter: blur(18px) saturate(160%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.brand span {
  display: grid;
  gap: 1px;
}

.brand strong {
  font-size: 16px;
  line-height: 1.1;
}

.brand small {
  color: var(--muted);
  font-size: 12px;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: clamp(13px, 1.7vw, 28px);
  font-size: 14px;
  font-weight: 650;
  color: rgba(246, 248, 251, 0.72);
}

.nav-links a {
  white-space: nowrap;
  transition: color 160ms ease;
}

.nav-links a:hover {
  color: var(--text);
}

/* Hamburger toggle: hidden on desktop; the < 860 media query turns the
   link bar into a tap-to-open dropdown so phones never crowd. */
.nav-toggle {
  display: none;
}

.nav-burger {
  display: none;
}

/* Solutions dropdown: hover/focus menu on desktop; the < 860 query flattens
   it into a labeled group inside the mobile menu. */
.nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(246, 248, 251, 0.72);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: color 160ms ease;
}

.nav-group:hover .nav-group-btn,
.nav-group:focus-within .nav-group-btn {
  color: var(--text);
}

.nav-caret {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.nav-group:hover .nav-caret,
.nav-group:focus-within .nav-caret {
  transform: rotate(180deg);
}

.nav-group-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 232px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(13, 21, 33, 0.98);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 60;
}

/* Invisible bridge so moving the cursor from button to menu doesn't close it. */
.nav-group-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.nav-group:hover .nav-group-menu,
.nav-group:focus-within .nav-group-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(3px);
}

.nav-group-menu a {
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
  color: var(--muted);
}

.nav-group-menu a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.nav-group-menu a[aria-current="page"] {
  color: var(--green-2);
}

.nav-action,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.nav-action {
  padding: 0 22px;
  color: #071018;
  background: linear-gradient(135deg, var(--green) 0%, var(--green) 52%, var(--blue-2) 100%);
  box-shadow: 0 16px 36px rgba(34, 197, 94, 0.14), 0 10px 34px rgba(59, 130, 246, 0.16);
}

.nav-action:hover,
.button:hover {
  transform: translateY(-1px);
}

.nav-action[aria-disabled="true"],
.button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.4);
}

main {
  overflow: hidden;
}

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(540px, 1.18fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: center;
  padding: clamp(42px, 5vw, 66px) clamp(18px, 4vw, 48px) 46px;
  border-bottom: 1px solid var(--line);
}

.hero-copy {
  max-width: 520px;
}

.status,
.section-kicker {
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--green-2);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.section-kicker::before {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--green);
}

.status {
  padding: 10px 13px;
  border: 1px solid rgba(34, 197, 94, 0.38);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
}

.status span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.12);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 22px;
  font-size: clamp(64px, 7.2vw, 108px);
  line-height: 0.96;
  font-weight: 900;
  letter-spacing: -0.045em;
}

h1 span {
  color: #4ade80;
}

.lead {
  color: rgba(246, 248, 251, 0.78);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.48;
  max-width: 630px;
  margin-bottom: 18px;
}

.operation-key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.operation-key span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  color: rgba(246, 248, 251, 0.8);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.operation-key i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05);
}

.operation-key .fruit {
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12);
}

.operation-key .veg {
  background: var(--blue-2);
  box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.14);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button {
  gap: 12px;
  padding: 0 28px;
}

.button svg,
.proof-row svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button.primary {
  color: #071018;
  background: linear-gradient(135deg, var(--green) 0%, var(--green) 54%, var(--blue-2) 100%);
  box-shadow: 0 18px 42px rgba(34, 197, 94, 0.18), 0 10px 34px rgba(59, 130, 246, 0.14);
}

.button.secondary {
  color: var(--text);
  border: 1px solid rgba(96, 165, 250, 0.26);
  background: rgba(59, 130, 246, 0.045);
}

.button.secondary:hover {
  border-color: rgba(96, 165, 250, 0.44);
  background: rgba(59, 130, 246, 0.09);
}

.proof-row {
  margin-top: 34px;
  padding-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  border-top: 1px solid var(--line);
}

.proof-row div {
  min-width: 0;
}

.proof-row svg {
  color: var(--green);
  margin-bottom: 12px;
}

.proof-row div:nth-child(2) svg {
  color: var(--blue-2);
}

.proof-row div:nth-child(3) svg {
  color: color-mix(in srgb, var(--green) 55%, var(--blue-2) 45%);
}

.proof-row div:nth-child(4) svg {
  color: color-mix(in srgb, var(--green) 30%, var(--blue-2) 70%);
}

.proof-row span,
.proof-row small {
  display: block;
}

.proof-row span {
  font-weight: 800;
  font-size: 14px;
}

.proof-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.hero-product {
  min-width: 0;
  width: min(100%, 920px);
  justify-self: center;
}

.device-frame,
.showcase-frame,
.admin-frame {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  box-shadow: var(--shadow);
}

/* iPad-style device frame for the hero screenshot.
   Dark bezel + camera dot + 3D perspective slant so the board reads as
   a tablet held at an angle, not a flat tile. */
.device-frame {
  position: relative;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 36px;
  background:
    linear-gradient(155deg, #1a2330 0%, #131c27 38%, #0c141d 72%, #08101a 100%);
  box-shadow:
    0 60px 140px -34px rgba(0, 0, 0, 0.7),
    0 26px 70px -22px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transform: perspective(1700px) rotateY(-9deg) rotateX(3deg);
  transform-origin: 65% 50%;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.device-frame:hover {
  transform: perspective(1700px) rotateY(-5deg) rotateX(1.5deg);
}

/* Glossy edge highlight along the top — sells the metal-rim look. */
.device-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 36px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 14%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 12%);
  mix-blend-mode: overlay;
  z-index: 2;
}

/* Front-facing camera dot on the top bezel (landscape orientation). */
.device-frame::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2c3a4d 0%, #060a10 80%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 1px rgba(0, 0, 0, 0.6);
  z-index: 3;
}

.device-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3464 / 1860;
  object-fit: cover;
  object-position: top center;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #111827;
}

.workflow-section,
.showcase-section,
.daily-section,
.label-section,
.capability-grid,
.admin-section,
.closing-section {
  padding: clamp(74px, 9vw, 124px) clamp(18px, 4vw, 48px);
}

/* "Who it's for" band on the home page → routes to the industry + solution pages. */
.industries-section {
  padding: clamp(64px, 8vw, 104px) clamp(18px, 4vw, 48px);
  border-top: 1px solid var(--line);
  text-align: center;
}

.industries-section .hero-actions {
  justify-content: center;
  margin-top: 4px;
}

.contact-section {
  padding: clamp(64px, 8vw, 112px) clamp(18px, 4vw, 48px);
  border-top: 1px solid var(--line);
}

.contact-card {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(38px, 5vw, 64px);
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% -12%, rgba(34, 197, 94, 0.12), transparent 52%),
    radial-gradient(circle at 88% 116%, rgba(59, 130, 246, 0.14), transparent 52%),
    rgba(17, 27, 41, 0.72);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--green);
}

.contact-card h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.contact-lead {
  margin: 0 auto 32px;
  max-width: 540px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.58;
}

.contact-email {
  display: block;
  width: fit-content;
  margin: 20px auto 0;
  color: var(--blue-2);
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.contact-email:hover {
  color: var(--green-2);
  border-bottom-color: currentColor;
}

/* ── Text displays that stand in for section screenshots ── */
.spec-panel {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% -12%, rgba(34, 197, 94, 0.08), transparent 55%),
    radial-gradient(circle at 94% 114%, rgba(59, 130, 246, 0.1), transparent 55%),
    rgba(17, 27, 41, 0.7);
  padding: clamp(24px, 2.6vw, 38px);
  box-shadow: var(--shadow);
}

.spec-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--green);
}

.spec-label {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--green-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.spec-label::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--green);
}

.spec-tiles + .spec-label,
.spec-rows + .spec-label,
.daypart-grid + .spec-label {
  margin-top: 26px;
}

.spec-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.spec-tiles span {
  padding: 9px 15px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.spec-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
}

.spec-rows li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.spec-rows li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 13px;
  height: 7px;
  border-left: 2.5px solid var(--green-2);
  border-bottom: 2.5px solid var(--green-2);
  transform: rotate(-45deg);
}

.spec-rows b {
  color: var(--text);
  font-weight: 700;
}

.daypart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.daypart-grid > div {
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.daypart-grid .dp {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.status-chip {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid transparent;
}

.status-chip.s-prog { color: var(--green-2); background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.34); }
.status-chip.s-due { color: var(--yellow); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.34); }
.status-chip.s-over { color: #fca5a5; background: rgba(239, 68, 68, 0.13); border-color: rgba(239, 68, 68, 0.36); }
.status-chip.s-close { color: var(--blue-2); background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.34); }

.spec-steps {
  display: grid;
  gap: 11px;
  margin-top: auto;
  width: fit-content;
  align-self: center;
}

.spec-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.spec-step .num {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
  font-size: 13px;
  color: #071018;
  background: var(--green);
}

.spec-barcode {
  margin: 20px auto 0;
  height: 46px;
  max-width: 200px;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg,
    var(--faint) 0 3px, transparent 3px 6px,
    var(--faint) 6px 7px, transparent 7px 12px,
    var(--faint) 12px 15px, transparent 15px 17px,
    var(--faint) 17px 18px, transparent 18px 23px);
}

.section-heading {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}

.section-heading h2,
.showcase-copy h2,
.daily-copy h2,
.label-copy h2,
.feature-panel h2,
.admin-copy h2,
.closing-section h2 {
  margin-bottom: 16px;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.section-heading p:not(.section-kicker),
.showcase-copy p:not(.section-kicker),
.daily-copy p:not(.section-kicker),
.label-copy p:not(.section-kicker),
.feature-panel p:not(.section-kicker),
.admin-copy p:not(.section-kicker),
.closing-section p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.58;
}

.flow-rail {
  max-width: 1340px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.flow-card,
.feature-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(17, 27, 41, 0.82);
}

.flow-card {
  min-height: 438px;
  padding: 26px;
  display: flex;
  flex-direction: column;
}

.flow-card::before,
.feature-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent, var(--green));
}

.flow-card.priority { --accent: var(--red); }
.flow-card.prep { --accent: var(--green); }
.flow-card.cool { --accent: var(--blue); }
.flow-card.pack { --accent: var(--purple); }

.step {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  font-weight: 900;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, white 20%);
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}

.flow-card h3,
.feature-panel h3 {
  margin: 22px 0 8px;
  color: var(--accent, var(--text));
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
}

.flow-card p {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.flow-shot {
  position: relative;
  margin-top: auto;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.flow-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.showcase-section {
  display: grid;
  grid-template-columns: minmax(320px, 460px) minmax(0, 660px);
  justify-content: center;
  gap: clamp(28px, 5vw, 62px);
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Trim the frame chrome a touch so the smaller screenshot doesn't read as
   over-bordered. */
.showcase-frame {
  padding: 10px;
}

.showcase-copy {
  max-width: 470px;
}

.showcase-tabs {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.showcase-tabs button {
  min-height: 42px;
  padding: 0 15px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.04);
  cursor: pointer;
}

.showcase-tabs button.active {
  color: #071018;
  background: var(--green);
  border-color: rgba(96, 165, 250, 0.7);
}

.showcase-frame,
.admin-frame {
  border-radius: 18px;
  padding: 14px;
  overflow: hidden;
}

.showcase-frame img,
.admin-frame img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.showcase-frame img {
  /* One fixed ratio for every tab so the frame height never changes when the
     screenshot swaps. (It used to vary per tab, which made the centered grid
     row — and everything below it — jump on select.) The board shots are
     pre-cropped to ~16:10 (columns edge-to-edge, no panel padding), so they
     fill this box exactly; object-fit:cover top-crops the taller labels/admin
     dashboards to the same box. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  opacity: 1;
  transition: opacity 140ms ease, transform 140ms ease;
}

.showcase-frame img.is-swapping {
  opacity: 0.42;
  transform: scale(0.992);
}

.label-section {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(0, 470px);
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.label-copy {
  max-width: 520px;
  justify-self: end;
}

.label-copy h2 {
  font-size: clamp(42px, 5.2vw, 76px);
  line-height: 1;
}

.label-copy p:not(.section-kicker) {
  font-size: clamp(18px, 1.35vw, 22px);
}

.label-art {
  min-width: 0;
}

.packlist-section {
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(74px, 9vw, 124px) clamp(18px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 900px);
  justify-content: center;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.packlist-copy {
  max-width: 520px;
}

.packlist-copy h2 {
  margin-bottom: 16px;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.packlist-copy p:not(.section-kicker) {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.58;
}

.packlist-points {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.packlist-points li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.packlist-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.packlist-points strong {
  color: var(--text);
  font-weight: 700;
}

.packlist-shots {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.packlist-shots figure {
  margin: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  padding: 8px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
}

.packlist-shots img {
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 860px) {
  .packlist-section {
    grid-template-columns: 1fr;
    padding: clamp(54px, 9vw, 84px) clamp(18px, 5vw, 28px);
  }
  .packlist-copy {
    max-width: 760px;
  }
}

/* ── Daily Logs (retailer/Kroger audit log) ──
   Two-column: the live board sits behind, upper-left (its toolbar Daily Logs
   button is flagged), and the logs panel pops forward, lower-right, as the
   legible hero of the shot. */
.daily-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.daily-copy {
  max-width: 520px;
}

.daily-art {
  min-width: 0;
  display: flex;
  justify-content: center;
}

.daily-stack {
  position: relative;
  width: 100%;
  max-width: 720px;
  /* Fixed frame height drives the (portrait) logs panel below, so it can
     never render taller than the frame and spill past the section divider. */
  height: clamp(380px, 33vw, 540px);
}

.daily-stack img {
  position: absolute;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.4);
}

.daily-stack .daily-board {
  top: 50%;
  left: 0;
  width: 70%;
  height: auto;
  transform: translateY(-50%);
}

.daily-stack .daily-modal {
  right: 0;
  bottom: 0;
  /* Sized by height (not width) so the tall panel always fits the frame. */
  height: 100%;
  width: auto;
  z-index: 2;
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.capability-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.feature-panel {
  padding: clamp(24px, 3vw, 40px);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.feature-panel:nth-child(1)::before {
  background: var(--green);
}

.feature-panel:nth-child(2)::before {
  background: var(--green);
}

.feature-panel h3 {
  color: var(--text);
  margin-top: 0;
  font-size: clamp(26px, 3vw, 38px);
}

.feature-panel > img {
  margin-top: auto;
  width: 100%;
  aspect-ratio: 1.54 / 1;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Full-width panel: the three Pay List steps read as a large left-to-right
   scan-card -> scan-item -> finalize sequence, each with a numbered caption. */
.barcode-workflow {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.barcode-workflow figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.barcode-workflow img {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1.39 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  background: #091322;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

.barcode-workflow figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.barcode-workflow .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--green);
  color: #04121e;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Stack the three steps on narrow screens so they stay large and readable. */
@media (max-width: 720px) {
  .barcode-workflow {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}

.origins-panel {
  --tank-line: rgba(251, 191, 36, 0.22);
  /* Show Supplies & Pay first, the flags banner below it. */
  order: 2;
}

.flag-tank {
  position: relative;
  margin-top: 28px;
  /* Full-width Origins panel: a wide origins banner with the flags spread
     across it. */
  aspect-ratio: 3.4 / 1;
  min-height: 300px;
  overflow: hidden;
  border-radius: 8px;
  /* De-glowed to match the rest of the page: neutral border + a plain dark
     tank (the green/blue "aquarium" glows were the last neon holdout). */
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
    rgba(8, 19, 29, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.flag-tank::before,
.flag-tank::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.flag-tank::before {
  opacity: 0.4;
  background:
    linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, 0.035) 19px, transparent 20px),
    linear-gradient(180deg, transparent 0 18px, rgba(255, 255, 255, 0.035) 19px, transparent 20px);
  background-size: 38px 38px;
}

.flag-tank::after {
  background:
    linear-gradient(180deg, rgba(8, 19, 29, 0.12) 0%, transparent 18%, transparent 58%, rgba(8, 19, 29, 0.94) 100%),
    linear-gradient(90deg, rgba(8, 19, 29, 0.82) 0%, transparent 16%, transparent 84%, rgba(8, 19, 29, 0.82) 100%);
}

.tank-flag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 30px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  transform: translate(-50%, -50%);
}

.tank-flag:hover {
  z-index: 4;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}

@keyframes flag-drift {
  0% {
    transform: translate(-50%, -50%) translate(calc(var(--dx) * -0.45), calc(var(--dy) * -0.45)) rotate(-5deg);
  }
  50% {
    transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.25), calc(var(--dy) * -0.15)) rotate(4deg);
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(-2deg);
  }
}

/* Flat overlap: the catalog screen behind, the print dialog popping forward
   over its lower-right corner — both shown in full (no cover-crop). */
.overlap-shots {
  position: relative;
  height: clamp(340px, 33vw, 460px);
}

.overlap-shots img {
  position: absolute;
  display: block;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}

/* Catalog screen — flat, top-left. Its grey body washes out a 0.16 border, so
   brighten it to read as crisply as the dialog's edge on its dark body. */
.overlap-shots .back {
  top: 0;
  left: 0;
  width: 88%;
  border-color: rgba(255, 255, 255, 0.32);
}

/* Print dialog — flat, overlapping the lower-right corner. */
.overlap-shots .front {
  top: 14%;
  right: 0;
  width: 70%;
  z-index: 2;
  /* No border — the screenshot is cropped edge-to-edge, so any outline reads
     as a frame. A soft shadow alone lifts it off the catalog behind. */
  border: none;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
}

.admin-section {
  display: grid;
  grid-template-columns: minmax(320px, 0.42fr) minmax(0, 0.78fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}

.admin-copy {
  max-width: 520px;
}

.admin-copy .button {
  margin-top: 12px;
}

.closing-section {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.closing-section .hero-actions {
  justify-content: center;
}

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

  .hero,
  .showcase-section,
  .daily-section,
  .label-section,
  .admin-section {
    grid-template-columns: 1fr;
  }

  .hero {
    align-items: start;
  }

  .hero-copy,
  .showcase-copy,
  .daily-copy,
  .label-copy,
  .admin-copy {
    max-width: 760px;
  }

  .label-copy {
    justify-self: start;
    order: 2;
  }

  .label-art {
    order: 1;
  }

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

  /* Capability grid (origins panel + supplies/pay panel) was always two
     columns at every breakpoint — that's fine on a tablet, but on a phone
     each panel becomes a tiny strip. Collapse to one column once the
     viewport drops below tablet-landscape. */
  .capability-grid {
    grid-template-columns: 1fr;
  }

  /* The board + logs-panel overlap is tuned for the two-column desktop
     layout. Once the section collapses to a single column the portrait
     logs panel would balloon and overflow, so stack the two shots
     vertically instead — board on top, logs panel centered beneath. */
  .daily-stack {
    position: static;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 3vw, 22px);
  }

  .daily-stack img {
    position: static;
    height: auto;
    transform: none;
  }

  .daily-stack .daily-board {
    width: 100%;
    /* (0,2,0) beats the base translateY(-50%); without this the board renders
       shifted up but flex still reserves its slot, leaving a big gap. */
    transform: none;
  }

  .daily-stack .daily-modal {
    width: min(60%, 420px);
    transform: none;
  }
}

/* Below ~1080 the full horizontal nav stops fitting (9 items + brand + CTA),
   so collapse it into the hamburger menu. The full bar shows at 1080+. */
@media (max-width: 1080px) {
  .site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 62px;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .brand small {
    display: none;
  }

  /* Hamburger sits on the right, just before the Book-a-demo button. */
  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 40px;
    margin-left: auto;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
  }

  .nav-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform 200ms ease, opacity 200ms ease;
  }

  /* The link bar becomes a dropdown panel under the nav, toggled by the
     hidden checkbox. */
  .nav-links {
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 0 10px;
    background: rgba(7, 16, 24, 0.98);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  .nav-toggle:checked ~ .nav-links {
    display: flex;
  }

  .nav-links a {
    padding: 13px clamp(20px, 5vw, 44px);
    font-size: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  .nav-links a:first-of-type {
    border-top: 0;
  }

  /* Mobile menu = links to other pages only; drop the home-page section
     anchors (they jump back to the home page on sub-pages anyway). */
  .nav-links a[href*="#"] {
    display: none;
  }

  /* Burger morphs to an X when the menu is open. */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle:checked ~ .nav-burger span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked ~ .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-action {
    min-height: 40px;
    padding: 0 14px;
    font-size: 12px;
  }

  /* Mobile menu: the Solutions group flattens to a small label + inline links. */
  .nav-group {
    display: block;
  }

  /* The Product group only holds home-page section anchors, which are hidden
     on mobile; hide the whole group so there is no empty "Product" label. */
  .nav-group--product {
    display: none;
  }

  .nav-group-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 15px clamp(20px, 5vw, 44px) 5px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: default;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  .nav-caret {
    display: none;
  }

  .nav-group-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    gap: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }

  .nav-group-menu::before {
    display: none;
  }

  .nav-group-menu a {
    padding: 12px clamp(20px, 5vw, 44px);
    border-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 15px;
    white-space: normal;
    color: rgba(246, 248, 251, 0.72);
  }
}

@media (max-width: 860px) {
  .hero {
    padding-top: 48px;
    padding-bottom: 28px;
  }

  h1 {
    font-size: clamp(46px, 12vw, 68px);
  }

  .proof-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
  }

  .proof-row svg {
    margin-bottom: 8px;
  }

  .proof-row span {
    font-size: 12px;
  }

  .proof-row small {
    font-size: 11px;
  }

  /* Strip ALL of the device-frame chrome on mobile — padding, inner outline,
     image border, white gradient background, AND the iPad slant — so the
     screenshot reads as the visual element, not a tiny tilted tile. */
  .device-frame {
    border-radius: 14px;
    padding: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
    transform: none;
  }

  .device-frame:hover {
    transform: none;
  }

  .device-frame::before,
  .device-frame::after {
    display: none;
  }

  .device-frame img {
    border-radius: 13px;
    border: none;
    /* Drop the aspect-ratio override on mobile and let the image render at
     its natural ratio with width:100%. The CSS-set aspect was leaving a
     visible gap on phones because of how iOS Safari handled aspect-ratio
     on a contained image with width:100%. */
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  /* admin-control-room.png is roughly 16:10 (2400×1500 viewport @2x). On
     mobile, a 4:3 crop anchored to top-center keeps the LIVE CONTROL ROOM
     header, the four status tiles, and the start of the Live Activity feed
     in frame — matching the natural reading order of the desktop view. */
  .admin-frame img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top center;
  }

  .overlap-shots {
    min-height: 0;
  }

  /* Tighter section padding on tablets/phones — the desktop 9vw breathing
     room reads as wasted space below ~860px. */
  .workflow-section,
  .showcase-section,
  .daily-section,
  .label-section,
  .capability-grid,
  .admin-section,
  .closing-section {
    padding: clamp(54px, 9vw, 84px) clamp(18px, 5vw, 28px);
  }

  .section-heading {
    margin-bottom: 32px;
  }

  /* Cap heading sizes — clamp(32, 4vw, 56) was fine, but the label-copy
     heading was set to 76px max which steamrolls a phone. */
  .label-copy h2 {
    font-size: clamp(36px, 8vw, 52px);
  }

  /* Aspect-ratio 3:2 was tuned to mirror the right-hand barcode column
     on desktop. Once panels are stacked, drop the aspect lock so the tank
     just uses a sensible fixed height. */
  .flag-tank {
    aspect-ratio: auto;
    min-height: 300px;
  }

  .feature-panel {
    padding: 24px 22px;
    min-height: 0;
  }
}

/* Phones: the hamburger holds the links now, so the bar is just logo + menu
   button + CTA. Trim the CTA padding a touch on the narrowest screens. */
@media (max-width: 600px) {
  .nav-action {
    padding: 0 12px;
  }
}

@media (max-width: 620px) {
  .hero {
    padding-top: 36px;
    padding-bottom: 24px;
  }

  h1 {
    font-size: clamp(40px, 11.5vw, 54px);
    margin-bottom: 16px;
  }

  .lead {
    font-size: 16px;
    line-height: 1.5;
  }

  .status {
    font-size: 11px;
    padding: 8px 11px;
  }

  .hero-actions,
  .showcase-tabs {
    width: 100%;
  }

  .button {
    flex: 1 1 100%;
    padding: 0 18px;
  }

  /* Three icon-tiles wrapped to a single row felt cramped under 400px,
     so let the third one drop to its own line. */
  .proof-row {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 22px;
    padding-top: 18px;
  }

  .proof-row div:nth-child(3) {
    grid-column: auto;
  }

  .workflow-section,
  .showcase-section,
  .daily-section,
  .label-section,
  .capability-grid,
  .admin-section,
  .closing-section {
    padding: 56px clamp(16px, 5vw, 22px);
  }

  /* Headings cap on small viewports so they don't crowd the screen. */
  .section-heading h2,
  .showcase-copy h2,
  .daily-copy h2,
  .feature-panel h2,
  .admin-copy h2,
  .closing-section h2 {
    font-size: clamp(26px, 7vw, 36px);
  }

  .label-copy h2 {
    font-size: clamp(32px, 8.6vw, 44px);
  }

  .feature-panel h3 {
    font-size: 22px;
  }

  .section-heading {
    margin-bottom: 26px;
  }

  .section-heading p:not(.section-kicker),
  .showcase-copy p:not(.section-kicker),
  .daily-copy p:not(.section-kicker),
  .label-copy p:not(.section-kicker),
  .feature-panel p:not(.section-kicker),
  .admin-copy p:not(.section-kicker),
  .closing-section p {
    font-size: 15px;
  }

  .flow-rail {
    grid-template-columns: 1fr;
  }

  .flow-card {
    min-height: 0;
    padding: 22px 20px;
  }

  .showcase-frame,
  .admin-frame {
    padding: 8px;
    border-radius: 12px;
  }

  .showcase-frame img,
  .admin-frame img {
    border-radius: 8px;
  }

  /* Match desktop: cover-fill the frame so narrow shots (the admin
     dashboard) don't letterbox with grey side bars on mobile. Wide board
     tabs crop their side margins, same as on desktop. */
  .showcase-frame img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: top center;
  }

  .feature-panel {
    min-height: 0;
    padding: 22px 18px;
  }

  .flag-tank {
    aspect-ratio: auto;
    min-height: 260px;
  }

  .tank-flag {
    width: 34px;
    height: 34px;
    font-size: 26px;
  }

  /* Stack the catalog screen + print dialog vertically on phones — the slanted
     overlap turns to mush at this width. Reset the 3D transforms/perspective
     and show both in full at their natural aspect. */
  .label-section .overlap-shots,
  .overlap-shots {
    min-height: 0;
    height: auto;
    perspective: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .overlap-shots img {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    aspect-ratio: auto;
  }

  .overlap-shots .back {
    width: 100%;
  }

  .overlap-shots .front {
    width: 88%;
    align-self: center;
  }

  /* Narrow the logs panel a touch more on phones (board stays full-width). */
  .daily-stack .daily-modal {
    width: min(84%, 320px);
    transform: none;
  }
}

/* Very small phones (≤ 380px) */
@media (max-width: 380px) {
  h1 {
    font-size: clamp(34px, 11vw, 42px);
  }

  .proof-row {
    grid-template-columns: 1fr;
  }

  .proof-row div:nth-child(3) {
    grid-column: auto;
  }

  .nav-action {
    padding: 0 10px;
    font-size: 11px;
  }

  .brand strong {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Faded produce backgrounds for the main sections.

   Each section gets two pieces of produce — one in the top-right
   corner, one in the bottom-left — rendered as ::before / ::after
   pseudo-elements with blur() + a radial mask-image so the produce
   actually fades into the corner instead of sitting as a crisp PNG
   on the page. Pure CSS — no HTML changes — and no impact on the
   foreground content because the blur is on the pseudo, not the
   parent.

   Produce is picked so no two adjacent sections repeat. The HERO owns the
   one bold, full-opacity produce moment (dragon fruit — see .hero::after);
   every section below stays a faint ambient corner piece:
     hero     → dragon fruit (signature, bold)
     workflow → kiwi (BL)
     realtime → cherry tomatoes (TR) / avocado (BL)
     pack list → pineapple (TR) / jalapeños (BL)
     labels   → mango (TR) / cucumbers (BL)
     admin    → red onion (TR) / cauliflower (BL)
     closing  → blueberry (TR) / raspberry (BL)
   ───────────────────────────────────────────────────────────────────── */

.workflow-section,
.showcase-section,
.daily-section,
.packlist-section,
.label-section,
.admin-section,
.closing-section {
  position: relative;
  isolation: isolate;
}

.workflow-section::before,
.showcase-section::before,
.daily-section::before,
.packlist-section::before,
.label-section::before,
.admin-section::before,
.closing-section::before,
.workflow-section::after,
.showcase-section::after,
.daily-section::after,
.packlist-section::after,
.label-section::after,
.admin-section::after,
.closing-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 280px;
  height: 280px;
  background-size: contain;
  background-repeat: no-repeat;
  /* Just enough blur to take the pixel-edge bite off the PNGs without
     turning them into smudges. The radial mask, not the blur, is what
     fades them into the corner. */
  filter: blur(1px);
  opacity: 0.34;
}

/* Top-right corner: ::before, fades toward bottom-left of its own box */
.workflow-section::before,
.showcase-section::before,
.daily-section::before,
.packlist-section::before,
.label-section::before,
.admin-section::before,
.closing-section::before {
  top: -30px;
  right: -40px;
  -webkit-mask: radial-gradient(circle at 100% 0%, #000 35%, transparent 88%);
          mask: radial-gradient(circle at 100% 0%, #000 35%, transparent 88%);
}

/* Bottom-left corner: ::after, fades toward top-right of its own box */
.workflow-section::after,
.showcase-section::after,
.daily-section::after,
.packlist-section::after,
.label-section::after,
.admin-section::after,
.closing-section::after {
  bottom: -40px;
  left: -50px;
  -webkit-mask: radial-gradient(circle at 0% 100%, #000 35%, transparent 88%);
          mask: radial-gradient(circle at 0% 100%, #000 35%, transparent 88%);
}

.workflow-section::after  { background-image: url("assets/ingredients/kiwi.png"); }

.daily-section::before { background-image: url("assets/ingredients/strawberries.png"); }
.daily-section::after  { background-image: url("assets/ingredients/broccoli.png"); }

.showcase-section::before { background-image: url("assets/ingredients/cherry_grape_tomatoes.png"); }
.showcase-section::after  { background-image: url("assets/ingredients/avocados.png"); }

/* Pack List is a centered max-width:1480 section, so on wide screens its
   bottom-left corner sits inside the page gutter — which pushes this floater
   inward versus the full-width sections. Subtract the gutter so it tucks into
   the viewport's bottom-left corner like the others. */
.packlist-section::after {
  background-image: url("assets/ingredients/jalapenos.png");
  left: calc(-50px - max(0px, (100vw - 1480px) / 2));
}

/* Pack List's right column is fully occupied by two stacked screenshots.
   Instead of hiding the ::before, reposition the pineapple into the body
   gutter to the RIGHT of the section so it sits beside the screenshot,
   not behind it. Centered radial mask so it fades evenly in all
   directions (it's no longer "tucked into a corner" — it's a floater). */
.packlist-section::before {
  background-image: url("assets/ingredients/pineapple.png");
  width: 280px;
  height: 280px;
  top: 50%;
  right: -220px;
  bottom: auto;
  left: auto;
  /* translateY centers vertically; rotate gives the pineapple a slight
     lean so it doesn't read as a stamp pasted on the page. The negative
     right pushes most of the box into the body's right gutter; on
     narrower viewports the right portion gets clipped by main's
     overflow:hidden, but the radial mask fades the edges anyway so the
     clip isn't visible as a hard cut. */
  transform: translateY(-50%) rotate(-12deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 32%, transparent 80%);
          mask: radial-gradient(circle at 50% 50%, #000 32%, transparent 80%);
}

.label-section::before { background-image: url("assets/ingredients/mango.png"); }
.label-section::after  { background-image: url("assets/ingredients/cucumbers.png"); }

.admin-section::before { background-image: url("assets/ingredients/red_onion.png"); }
.admin-section::after  { background-image: url("assets/ingredients/cauliflower.png"); }

.closing-section::before {
  background-image: url("assets/ingredients/blueberry.png");
  width: 220px;
  height: 220px;
}
.closing-section::after {
  background-image: url("assets/ingredients/raspberry.png");
  width: 220px;
  height: 220px;
}

/* Capability grid (Supplies & Pay + Origins) had no floating produce — give it
   two, peeking from the side gutters so they don't hide behind the wide panels:
   a cantaloupe by the barcode panel (top) and a blackberry by the flags (bottom). */
.capability-grid {
  position: relative;
}

.capability-grid::before,
.capability-grid::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 260px;
  height: 260px;
  background-size: contain;
  background-repeat: no-repeat;
  filter: blur(1px);
  opacity: 0.34;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 34%, transparent 80%);
          mask: radial-gradient(circle at 50% 50%, #000 34%, transparent 80%);
}

.capability-grid::before {
  top: 16%;
  right: -150px;
  background-image: url("assets/ingredients/cantaloupe.png");
  transform: rotate(-10deg);
}

.capability-grid::after {
  bottom: 14%;
  left: -150px;
  background-image: url("assets/ingredients/blackberry.png");
  transform: rotate(8deg);
}

/* The hero's signature produce moment: a single bold cut piece — dragon
   fruit, whose pink cross-section echoes the logo's watermelon — bleeding
   off the bottom edge behind the board, so the live board reads as rising
   out of fresh prep. Full opacity and no blur, BUT the top is masked to
   fade into the dark, so it emerges from the "prep" instead of looking like
   a pasted sticker. This is the ONE bold produce statement; every other
   section keeps its faint ambient corner produce. */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;                /* behind the board + headline, above the page */
  pointer-events: none;
  right: 2%;
  bottom: -85px;              /* nudged up so the slices kiss the board's lower edge */
  width: 620px;
  height: 620px;
  background-image: url("assets/ingredients/dragon_fruit.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  opacity: 1;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 42%);
          mask: linear-gradient(180deg, transparent 0%, #000 42%);
}

/* Hide all decorative produce on mobile/tablet — when sections stack
   single-column, the corner-anchored produce no longer reads as
   ambient texture and instead looks awkward squeezed into narrow
   viewports. Drop them entirely below 860px. */
@media (max-width: 860px) {
  .workflow-section::before,
  .workflow-section::after,
  .showcase-section::before,
  .showcase-section::after,
  .daily-section::before,
  .daily-section::after,
  .packlist-section::before,
  .packlist-section::after,
  .label-section::before,
  .label-section::after,
  .admin-section::before,
  .admin-section::after,
  .closing-section::before,
  .closing-section::after {
    display: none;
  }

  /* Mobile: lay the produce as a full-width "prep-counter" band across the
     bottom of the hero — dragon-fruit slices edge to edge, bleeding off both
     side margins, with the board's bottom resting on the band's faded top.
     Same "board rising out of fresh prep" read as desktop. cover crops the
     square PNG into a horizontal strip; background-position keeps the seedy
     cross-sections in frame. */
  .hero {
    padding-bottom: 70px;            /* room for the band below the board */
  }
  .hero::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 128%;                     /* bleeds off both side edges */
    height: 210px;
    bottom: 0;
    background-size: cover;
    background-position: center 42%;
    -webkit-mask: linear-gradient(180deg, transparent 0%, #000 36%);
            mask: linear-gradient(180deg, transparent 0%, #000 36%);
  }
}

/* "Why Fresco Flow" build-vs-buy section: centered hook, a 2x2 of pillar
   cards whose top accent bars echo the four board columns (Priority red,
   Prep green, Cooling blue, Packaging purple), then the closing line + CTA. */
.why-section {
  padding: clamp(52px, 6vw, 84px) clamp(18px, 4vw, 48px) clamp(40px, 5vw, 64px);
}

.why-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.why-card {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(17, 27, 41, 0.82);
}

.why-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent, var(--green));
}

.why-card--priority { --accent: var(--red); }
.why-card--prep { --accent: var(--green); }
.why-card--cool { --accent: var(--blue); }
.why-card--pack { --accent: var(--purple); }

.why-card h3 {
  margin: 0 0 12px;
  color: var(--accent, var(--text));
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.why-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.why-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

/* The standalone /why page: its lead uses an h1 (not the section h2), and
   the nav highlights the current page. */
.why-section .section-heading h1 {
  margin-bottom: 16px;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.nav-links a[aria-current="page"] {
  color: var(--text);
}

/* /why depth scene: the real board breaks the surface; below a lit
   waterline, frosted-glass strata of the hidden systems taper into the
   dark. Mesh-gradient depth + film grain + glassmorphism + caustic glow +
   rising particles + perspective taper. */
.why-depth {
  position: relative;
  isolation: isolate;
  width: min(100%, 760px);
  margin: clamp(18px, 3vw, 34px) auto clamp(28px, 4vw, 48px);
  padding: clamp(24px, 3vw, 36px) clamp(16px, 3vw, 30px) clamp(30px, 4vw, 46px);
  border-radius: 22px;
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(circle at 16% -12%, rgba(34, 197, 94, 0.1), transparent 50%),
    radial-gradient(circle at 86% 118%, rgba(45, 212, 191, 0.16), transparent 55%),
    radial-gradient(circle at 10% 114%, rgba(59, 130, 246, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(17, 27, 41, 0.82) 0%, rgba(11, 19, 30, 0.92) 56%, #060f18 100%);
  box-shadow: var(--shadow);
}

/* film grain — the matte texture that separates premium from flat */
.why-depth::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.depth-tip {
  position: relative;
  z-index: 2;
  width: min(100%, 560px);
  margin: 0 auto;
}

.depth-tip .device-frame,
.depth-tip .device-frame:hover {
  transform: none;
}

.depth-eyebrow {
  display: block;
  text-align: center;
  color: var(--green-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.depth-eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  margin: 0 9px 3px 0;
  border-radius: 999px;
  background: var(--green);
  vertical-align: middle;
}

.depth-eyebrow--see {
  margin: 0 0 13px;
}

.depth-eyebrow--deep {
  position: relative;
  z-index: 2;
  margin: 0 0 16px;
}

/* luminous waterline seam + downward caustic light */
.depth-waterline {
  position: relative;
  z-index: 1;
  width: 86%;
  height: 2px;
  margin: clamp(18px, 2.6vw, 28px) auto clamp(16px, 2.4vw, 26px);
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.8), transparent);
  box-shadow: 0 0 22px 3px rgba(45, 212, 191, 0.3);
}

.depth-waterline::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 150px;
  background: radial-gradient(62% 100% at 50% 0%, rgba(45, 212, 191, 0.18), transparent 72%);
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

.depth-stack {
  position: relative;
  z-index: 2;
}

.depth-sub {
  position: relative;
  z-index: 2;
  max-width: 580px;
  margin: 0 auto clamp(20px, 2.6vw, 28px);
  text-align: center;
  color: var(--muted);
  font-size: clamp(13.5px, 1.6vw, 15px);
  line-height: 1.55;
}

.depth-sub strong {
  color: var(--text);
  font-weight: 700;
}

.depth-map {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 700px;
  margin: 0 auto;
}

.depth-cat {
  position: relative;
  overflow: hidden;
  padding: 17px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 34px -24px rgba(0, 0, 0, 0.75);
  text-align: left;
  animation: depth-rise-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.depth-cat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent, var(--green));
}

.depth-cat:nth-child(1) { --accent: var(--green); animation-delay: 0.04s; }
.depth-cat:nth-child(2) { --accent: var(--blue); animation-delay: 0.09s; }
.depth-cat:nth-child(3) { --accent: var(--blue-2); animation-delay: 0.14s; }
.depth-cat:nth-child(4) { --accent: var(--green); animation-delay: 0.19s; }
.depth-cat:nth-child(5) { --accent: var(--blue); animation-delay: 0.24s; }
.depth-cat:nth-child(6) { --accent: var(--blue-2); animation-delay: 0.29s; }

.depth-cat header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.depth-cat .depth-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--accent, var(--blue-2));
  background: color-mix(in srgb, var(--accent, var(--blue-2)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--blue-2)) 30%, transparent);
}

.depth-cat .depth-ico svg {
  width: 15px;
  height: 15px;
}

.depth-cat h4 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.depth-cat ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.depth-cat li {
  position: relative;
  padding-left: 15px;
  font-size: 12.5px;
  line-height: 1.42;
  color: var(--muted);
}

.depth-cat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent, var(--blue-2));
  opacity: 0.6;
}

@media (max-width: 620px) {
  .depth-map {
    grid-template-columns: 1fr;
  }
}

@keyframes depth-rise-in {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: none; }
}

.depth-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--blue-2);
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.24);
}

.depth-ico svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.depth-bubble {
  position: absolute;
  bottom: 6%;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(170, 240, 230, 0.55), rgba(45, 212, 191, 0.14) 60%, transparent 72%);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  animation: none;
}

@keyframes depth-bubble {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  14% { opacity: 0.85; }
  82% { opacity: 0.4; }
  100% { transform: translateY(-200px) translateX(9px); opacity: 0; }
}

.depth-close {
  position: relative;
  z-index: 2;
  margin: clamp(24px, 3.2vw, 36px) auto 0;
  max-width: 560px;
  text-align: center;
  color: var(--muted);
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.depth-close span {
  color: var(--green-2);
}

@media (prefers-reduced-motion: reduce) {
  .depth-cat { animation: none; }
  .depth-bubble { display: none; }
}