:root {
  --ink: #1B2A44;
  --ink-soft: #3C4B66;
  --paper: #F1F2EE;
  --paper-raised: #FBFAF6;
  --line: #D8D6CB;
  --amber: #D98E2B;
  --amber-deep: #B5721A;
  --teal: #3E7A63;
  --white: #FFFFFF;
  --shadow: 0 1px 2px rgba(27, 42, 68, 0.06), 0 8px 24px rgba(27, 42, 68, 0.06);
  --shadow-md: 0 4px 16px rgba(27, 42, 68, 0.11), 0 1px 4px rgba(27, 42, 68, 0.06);
  --shadow-lg: 0 10px 36px rgba(27, 42, 68, 0.14), 0 2px 8px rgba(27, 42, 68, 0.07);
  --radius: 10px;
  --transition: 0.18s ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Zilla Slab', serif;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
  text-rendering: optimizeLegibility;
}

p {
  margin: 0;
}

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

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

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

button {
  font-family: inherit;
  cursor: pointer;
}

.mono {
  font-family: 'IBM Plex Mono', monospace;
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-deep);
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--amber);
  display: inline-block;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- NAV ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(241, 242, 238, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: 1180px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Zilla Slab', serif;
  font-weight: 700;
  font-size: 23.5px;
  color: var(--ink);
}

.logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: url('/assets/apple-touch-icon.png') no-repeat center / contain;
  position: relative;
  flex: none;
}

.nav-links {
  display: flex;
  gap: 34px;
  align-items: center;
}

.nav-links a {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color var(--transition);
  position: relative;
}

a.mobile-only-cta {
  display: none;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--amber);
  border-radius: 2px;
  transition: width var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--ink);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, #1B2A44 0%, #243656 100%);
  color: var(--white);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0F1B30 0%, #1B2A44 100%);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-amber {
  background: linear-gradient(135deg, #D98E2B 0%, #E8A040 100%);
  color: var(--ink);
}

.btn-amber:hover {
  background: linear-gradient(135deg, #B5721A 0%, #D98E2B 100%);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(217, 142, 43, 0.32);
}

.btn-amber:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-ghost:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: rgba(27, 42, 68, 0.03);
}

.btn-ghost:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  width: 34px;
  height: 34px;
  position: relative;
}

.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  background: var(--ink);
}

.menu-toggle span {
  top: 16px;
}

.menu-toggle span::before {
  top: -7px;
}

.menu-toggle span::after {
  top: 7px;
}

/* ---------- HERO ---------- */
.hero {
  padding: 88px 0 96px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(38px, 4.9vw, 60.5px);
  line-height: 1.05;
  margin: 18px 0 22px;
}

.hero p.lede {
  font-size: 20px;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 32px;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.hero-note {
  font-size: 15px;
  color: var(--ink-soft);
  font-family: 'IBM Plex Mono', monospace;
}

.hero-note b {
  color: var(--ink);
}

/* ---------- STATS SECTION ---------- */
.stats {
  padding: 48px 0;
  background: #C97D1F;
}

.stats-intro {
  font-family: 'Zilla Slab', serif;
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 28px);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 28px 0;
  white-space: nowrap;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 72px;
  max-width: 900px;
  margin: 0 auto;
}

.stat-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.stat-number {
  font-family: 'Zilla Slab', serif;
  font-size: clamp(42px, 7vw, 84px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  display: inline;
}

.stat-number::after {
  content: '+';
  margin-left: 0.1em;
}

.stat-label {
  font-size: 16px;
  color: var(--ink-soft);
  font-weight: 500;
  margin: 0;
}

/* Responsive: tablet and below */
@media (max-width: 920px) {
  .stats {
    padding: 44px 0;
  }

  .stats-intro {
    margin-bottom: 26px;
  }

  .stats-grid {
    gap: 44px;
  }

  .stat-number {
    font-size: clamp(38px, 6vw, 68px);
  }
}

/* Responsive: mobile */
@media (max-width: 720px) {
  .stats {
    padding: 44px 0;
  }

  .stats-intro {
    font-size: clamp(18px, 4vw, 28px);
    margin-bottom: 32px;
    white-space: normal;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .stat-number {
    font-size: clamp(42px, 12vw, 72px);
  }

  .stat-label {
    font-size: 15px;
  }
}

/* ---------- SIGNATURE MANIFEST CARD (8s Loop) ---------- */
.manifest {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.manifest-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px dashed var(--line);
  background: var(--white);
}

.manifest-head .tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.manifest-head .job {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  color: var(--amber-deep);
  font-weight: 600;
}

/* stage 1: photo capture strip */
.capture-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 6px;
  position: relative;
}

.capture-thumb {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: #E7E3D6;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22.5px;
  color: var(--ink);
  position: relative;
  flex: none;
}
.capture-thumb svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.8;
}

.capture-thumb .cap-check {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: check1 8s linear infinite;
}

.capture-thumb.t2 .cap-check {
  animation-name: check2;
}

.capture-thumb.t3 .cap-check {
  animation-name: check3;
}

.scan-beam {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: linear-gradient(120deg, transparent 10%, rgba(217, 142, 43, 0.6) 50%, transparent 90%);
  opacity: 0;
  animation: beamSweep 8s linear infinite;
  pointer-events: none;
}

.capture-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-left: 4px;
}

@keyframes beamSweep {
  0% { transform: translateX(0); opacity: 0; }
  4% { transform: translateX(0); opacity: 1; }
  13% { transform: translateX(0); opacity: 1; }
  14% { transform: translateX(60px); opacity: 1; }
  23% { transform: translateX(60px); opacity: 1; }
  24% { transform: translateX(120px); opacity: 1; }
  33%, 34% { transform: translateX(120px); opacity: 1; }
  36%, 100% { transform: translateX(120px); opacity: 0; }
}

@keyframes check1 {
  0%, 13% { opacity: 0; }
  15%, 95% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

@keyframes check2 {
  0%, 23% { opacity: 0; }
  25%, 95% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

@keyframes check3 {
  0%, 33% { opacity: 0; }
  35%, 95% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

/* stage 2: processing bar */
.proc-row {
  padding: 14px 20px 6px;
}

.proc-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 8px;
  position: relative;
  height: 15px;
}

.proc-label span {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.proc-label .ps1 { animation-name: pl1; }
.proc-label .ps2 { animation-name: pl2; }
.proc-label .ps3 { animation-name: pl3; }

@keyframes pl1 {
  0%, 3% { opacity: 0; }
  5%, 33% { opacity: 1; }
  35%, 100% { opacity: 0; }
}

@keyframes pl2 {
  0%, 35% { opacity: 0; }
  37%, 43% { opacity: 1; }
  45%, 100% { opacity: 0; }
}

@keyframes pl3 {
  0%, 45% { opacity: 0; }
  47%, 95% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

.proc-bar {
  height: 5px;
  border-radius: 100px;
  background: #EAE8DE;
  overflow: hidden;
}

.proc-fill {
  height: 100%;
  width: 0%;
  background: var(--amber);
  border-radius: 100px;
  animation: procFill 8s linear infinite;
}

@keyframes procFill {
  0%, 35% { width: 0%; }
  45% { width: 100%; }
  95% { width: 100%; }
  97%, 100% { width: 0%; }
}

/* stage 3: inventory rows */
.manifest-body {
  padding: 2px 0 4px;
}

.m-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid #EAE8DE;
  opacity: 0;
  transform: translateY(6px);
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.m-row:last-of-type {
  border-bottom: none;
}

.m-row .thumb {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: #E7E3D6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 17px;
}
.m-row .thumb svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}

.m-row .name {
  font-size: 16px;
  font-weight: 500;
}

.m-row .qty {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14.5px;
  color: var(--ink-soft);
  background: #EAE8DE;
  padding: 3px 9px;
  border-radius: 100px;
}

.m-row.r1 { animation-name: row1; }
.m-row.r2 { animation-name: row2; }
.m-row.r3 { animation-name: row3; }
.m-row.r4 { animation-name: row4; }
.m-row.r5 { animation-name: row5; }

@keyframes row1 {
  0%, 44% { opacity: 0; transform: translateY(6px); }
  47%, 95% { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes row2 {
  0%, 51% { opacity: 0; transform: translateY(6px); }
  54%, 95% { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes row3 {
  0%, 58% { opacity: 0; transform: translateY(6px); }
  61%, 95% { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes row4 {
  0%, 65% { opacity: 0; transform: translateY(6px); }
  68%, 95% { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes row5 {
  0%, 72% { opacity: 0; transform: translateY(6px); }
  75%, 95% { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(6px); }
}

.manifest-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: var(--white);
  border-top: 1px dashed var(--line);
}

.manifest-foot .total {
  font-size: 15px;
  color: var(--ink-soft);
  opacity: 0;
  animation: row5total 8s linear infinite;
}

@keyframes row5total {
  0%, 72% { opacity: 0; }
  75%, 95% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

.stamp {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--teal);
  border: 2px solid var(--teal);
  border-radius: 5px;
  padding: 5px 10px;
  transform: rotate(-4deg);
  opacity: 0;
  animation: stampin 8s linear infinite;
}

@keyframes stampin {
  0%, 79% { opacity: 0; transform: rotate(-4deg) scale(1.3); }
  82%, 95% { opacity: 1; transform: rotate(-4deg) scale(1); }
  97%, 100% { opacity: 0; transform: rotate(-4deg) scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .scan-beam { display: none; }
  .cap-check { animation: none !important; opacity: 1 !important; }
  .proc-fill { animation: none !important; width: 100% !important; }
  .proc-label span { animation: none !important; opacity: 0 !important; }
  .proc-label .ps3 { opacity: 1 !important; }
  .m-row { animation: none !important; opacity: 1 !important; transform: none !important; }
  .manifest-foot .total { animation: none !important; opacity: 1 !important; }
  .stamp { animation: none !important; opacity: 1 !important; transform: rotate(-4deg) scale(1) !important; }
}

/* ---------- SECTION SHELL ---------- */
section {
  padding: 84px 0;
}

/* Prevent sticky nav from covering anchor targets */
section[id] {
  scroll-margin-top: 80px;
}

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-head h2 {
  font-size: clamp(29px, 3.2vw, 40.5px);
  margin-top: 14px;
  line-height: 1.15;
}

.section-head p {
  margin-top: 16px;
  font-size: 18.5px;
  color: var(--ink-soft);
}

/* ---------- PROBLEM / COMPARE ---------- */
.problem {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.compare-card {
  border-radius: var(--radius);
  padding: 28px 26px;
  border: 1px solid var(--line);
  transition: transform var(--transition), box-shadow var(--transition);
}

.compare-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.compare-card.old {
  background: var(--paper);
}

.compare-card.new {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.compare-card h3 {
  font-size: 17px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: inherit;
  font-weight: 600;
}

.compare-card.old h3 {
  color: var(--ink-soft);
}

.compare-card.new h3 {
  color: #9FD8C0;
}

.compare-card li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  font-size: 17px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.compare-card.new li {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.compare-card li:first-of-type {
  border-top: none;
}

.compare-card .mark {
  flex: none;
  font-weight: 700;
}

.compare-card.old .mark {
  color: #B5471A;
}

.compare-card.new .mark {
  color: #7BD9AE;
}

/* ---------- HOW IT WORKS ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.step {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(217, 142, 43, 0.35);
}

.step .num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--amber-deep);
  margin-bottom: 16px;
}

.step h3 {
  font-size: 21.5px;
  margin-bottom: 10px;
}

.step p {
  font-size: 17px;
  color: var(--ink-soft);
}

/* ---------- FEATURES ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.feature {
  background: var(--paper-raised);
  padding: 30px 28px;
  transition: background var(--transition);
}

.feature:hover {
  background: var(--white);
}

.feature .icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #EBE3D2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 19px;
  color: var(--amber-deep);
}
.feature .icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

.feature h3 {
  font-size: 18.5px;
  margin-bottom: 8px;
}

.feature p {
  font-size: 16px;
  color: var(--ink-soft);
}

/* Feature Detail Blocks (Features Page) */
.feature-detail {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.feature-detail:first-of-type {
  border-top: none;
}

.feature-detail .icon {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  background: #EBE3D2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  color: var(--amber-deep);
  flex: none;
}
.feature-detail .icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}

.feature-detail h3 {
  font-size: 21px;
  margin-bottom: 8px;
}

.feature-detail p {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------- PRICING ---------- */
.pricing {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.price-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.price-card.feat {
  border-color: var(--ink);
  box-shadow: 0 10px 30px rgba(27, 42, 68, 0.12);
  position: relative;
}

.price-card .badge {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--amber);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 5px 11px;
  border-radius: 100px;
}

.tier-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 4px;
}

.tier-icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tier-icon img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.tier-name {
  font-size: 24.5px;
}

.tier-sub {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.tier-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}

.tier-price .amt {
  font-family: 'Zilla Slab', serif;
  font-size: 38px;
  font-weight: 700;
}

.tier-price .per {
  font-size: 15.5px;
  color: var(--ink-soft);
}

.tier-tax {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

.tier-list-wrap {
  position: relative;
  flex: 1;
  margin-bottom: 26px;
}

.tier-list {
  margin-bottom: 0;
}

.tier-list[aria-hidden="true"] {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}

.tier-list-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12px;
}

.tier-list-overlay span {
  background: rgba(241, 242, 238, .92);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.tier-list li {
  display: flex;
  gap: 10px;
  font-size: 15.5px;
  padding: 7px 0;
  color: var(--ink-soft);
}

.tier-list li .chk {
  flex: none;
  color: var(--teal);
  font-weight: 700;
}

.price-legend {
  text-align: center;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-top: 14px;
}

/* ---------- REQUEST A DEMO CTA & SECTION ---------- */
.demo-hero {
  background: var(--ink);
  color: var(--white);
}

.demo-hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.demo-hero .eyebrow {
  color: #E9B863;
}

.demo-hero .eyebrow::before {
  background: var(--amber);
}

.demo-hero h1 {
  color: var(--white);
  font-size: clamp(32px, 4vw, 46px);
  margin: 14px 0 18px;
  line-height: 1.12;
}

.demo-hero p {
  color: #C4CCDA;
  font-size: 18px;
  margin-bottom: 26px;
  max-width: 48ch;
}

.demo-list {
  display: grid;
  gap: 14px;
}

.demo-list li {
  display: flex;
  gap: 12px;
  font-size: 16px;
  color: #DDE3EC;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.demo-list .chk {
  color: #7BD9AE;
  font-weight: 700;
  flex: none;
}

/* Small CTA Band */
.cta-band {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  padding: 44px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-band h3 {
  color: var(--white);
  font-size: 24px;
}

.cta-band p {
  color: #C4CCDA;
  font-size: 16px;
  margin-top: 6px;
}

/* ---------- BREADCRUMB & CONTENT PAGE HERO ---------- */
.breadcrumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  color: var(--ink-soft);
  padding: 22px 0 0;
}

.breadcrumb a {
  color: var(--ink-soft);
}

.breadcrumb a:hover {
  color: var(--ink);
}

.breadcrumb .sep {
  margin: 0 8px;
  opacity: 0.5;
}

.breadcrumb .current {
  color: var(--ink);
  font-weight: 600;
}

.page-hero {
  padding: 36px 0 64px;
}

.page-hero .eyebrow {
  margin-bottom: 16px;
}

.page-hero h1 {
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.08;
  margin-bottom: 18px;
}

.page-hero p.lede {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 60ch;
}

.page-hero .hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ---------- FAQ ACCORDION ---------- */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item {
  background: var(--paper-raised);
}

.faq-item summary {
  padding: 20px 24px;
  font-family: 'Zilla Slab', serif;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

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

.faq-item summary::after {
  content: "+";
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  color: var(--amber-deep);
  flex: none;
  transition: transform 0.15s ease;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item .faq-answer {
  padding: 0 24px 22px;
  font-size: 16.5px;
  color: var(--ink-soft);
  max-width: 64ch;
}

/* ---------- ABOUT PAGE ---------- */
.about-body {
  max-width: 70ch;
  display: grid;
  gap: 22px;
  font-size: 18px;
  color: var(--ink-soft);
}

.about-body h2 {
  font-size: 26px;
  color: var(--ink);
  margin-top: 18px;
}

.about-body p b {
  color: var(--ink);
}

.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.about-values .value {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
}

.about-values h3 {
  font-size: 17.5px;
  margin-bottom: 8px;
}

.about-values p {
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* ---------- BLOG ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
  justify-content: start;
  gap: 24px;
}

.blog-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.blog-card .tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--amber-deep);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.blog-card h3 {
  font-size: 19px;
  color: var(--ink);
}

.blog-card p {
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* ---------- BLOG POST ---------- */
.post-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.post-meta span {
  white-space: nowrap;
}

.post-meta .tag {
  color: var(--amber-deep);
}

.post-meta .sep {
  opacity: 0.5;
}

.post-hero-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 4px 0 8px;
  display: block;
}

.post-hero-wide-wrap {
  max-width: 1180px;
  margin: 4px auto 8px;
  padding: 0 32px;
}

.post-hero-img-wide {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: block;
}

.post-hero-caption {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 10px;
}

@media (max-width: 720px) {
  .post-hero-wide-wrap {
    padding: 0 20px;
  }
}

.post-body sup {
  font-size: 0.7em;
}

.post-body sup a {
  color: var(--amber-deep);
  font-weight: 600;
  text-decoration: none;
  padding: 0 2px;
}

.post-body sup a:hover {
  text-decoration: underline;
}

.stat-callout {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  margin: 12px 0;
}

.stat-callout .stat-number {
  font-family: 'Zilla Slab', serif;
  font-weight: 700;
  font-size: 64px;
  color: var(--amber);
  line-height: 1;
  margin-bottom: 10px;
}

/* Text (non-numeric) stat-number: wrap, scale down, and drop the trailing "+" */
.stat-callout .stat-number.stat-word {
  font-size: clamp(30px, 7vw, 52px);
  overflow-wrap: break-word;
  word-break: break-word;
}

.stat-callout .stat-number.stat-word::after {
  content: none;
}

.stat-callout .stat-caption {
  color: #FFFFFF;
  font-size: 17px;
  max-width: 46ch;
  margin: 0 auto 8px;
}

.stat-callout .stat-source {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #9AA6BC;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footnotes {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.footnotes h2 {
  font-size: 20px;
  margin-bottom: 14px;
}

.footnotes ol {
  padding-left: 22px;
  display: grid;
  gap: 10px;
}

.footnotes li {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.footnotes li a {
  color: var(--ink);
  text-decoration: underline;
  word-break: break-word;
}

.footnotes li a.back-ref {
  text-decoration: none;
  color: var(--amber-deep);
  font-weight: 600;
}

/* ---------- FOOTER ---------- */
footer {
  padding: 44px 0 40px;
}

.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 26px;
}

.foot-links a {
  font-size: 15px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.foot-links a:hover {
  color: var(--ink);
}

.foot-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  font-family: 'IBM Plex Mono', monospace;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .compare { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .price-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .demo-hero .wrap { grid-template-columns: 1fr; }
  .feature-detail { grid-template-columns: 1fr; }
  .about-values { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 32px 26px;
    gap: 16px;
    display: none;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-cta .btn-ghost {
    display: none;
  }
  .nav-cta .btn-amber {
    display: none;
  }
  a.mobile-only-cta {
    display: flex;
    width: 100%;
    margin-top: 6px;
  }
  .nav-links a.mobile-only-cta:first-of-type {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  .menu-toggle {
    display: block;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .wrap {
    padding: 0 20px;
  }
  .nav {
    padding: 16px 20px;
    flex-wrap: wrap;
    row-gap: 12px;
  }
  section {
    padding: 64px 0;
  }
}

/* ---------- REQUEST A DEMO FORM ---------- */
.demo-form {
  display: grid;
  gap: 18px;
  margin-top: 8px;
}

.form-row {
  display: grid;
  gap: 6px;
}

.form-row label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.form-row input,
.form-row select {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-row select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233C4B66' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.form-row input:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(27, 42, 68, 0.1);
}

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

.form-status {
  font-size: 14.5px;
  text-align: center;
  min-height: 1.4em;
  margin-top: 4px;
}

/* ---------- KEYWORD PILL COLLECTION ---------- */
.pill-collection {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 32px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 100px;
  background: var(--amber);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .pill {
    font-size: 14px;
    padding: 9px 16px;
  }
}

/* ---------- DESKTOP TYPOGRAPHY INCREASE ---------- */
/* Applies only at 721px+ (immediately above the 720px mobile breakpoint),
   so mobile sizing is completely untouched. Sizes below are grounded in
   2026 web typography conventions (16-18px body minimum, 17-18px preferred
   for desktop reading comfort, H1 44-56px, H2 34-44px, H3 24-28px), applied
   to headings, subheadings, and paragraph/reading text. Small intentional
   UI elements (eyebrows, badges, breadcrumbs, mono labels, pills, footnote
   lists) are deliberately left at their original size, since every current
   typography guide treats compact captions/labels as a correct exception,
   not something to inflate. */
@media (min-width: 721px) {
  .hero h1 {
    font-size: clamp(40px, 5.2vw, 66px);
  }
  .hero p.lede {
    font-size: 21px;
  }
  .section-head h2 {
    font-size: clamp(30px, 3.4vw, 44px);
  }
  .section-head p {
    font-size: 19px;
  }
  .page-hero h1 {
    font-size: clamp(36px, 4.6vw, 56px);
  }
  .page-hero p.lede {
    font-size: 20px;
  }
  .demo-hero p {
    font-size: 19px;
  }
  .compare-card h3 {
    font-size: 18px;
  }
  .compare-card li {
    font-size: 17.5px;
  }
  .step h3 {
    font-size: 22.5px;
  }
  .step p {
    font-size: 17.5px;
  }
  .feature h3 {
    font-size: 19.5px;
  }
  .feature p {
    font-size: 16.5px;
  }
  .feature-detail h3 {
    font-size: 22px;
  }
  .feature-detail p {
    font-size: 17.5px;
  }
  .tier-name {
    font-size: 26px;
  }
  .tier-sub {
    font-size: 15.5px;
  }
  .tier-price .amt {
    font-size: 40px;
  }
  .tier-tax {
    font-size: 15px;
  }
  .tier-list li {
    font-size: 16px;
  }
  .price-legend {
    font-size: 15px;
  }
  .demo-list li {
    font-size: 16.5px;
  }
  .cta-band h3 {
    font-size: 25px;
  }
  .cta-band p {
    font-size: 16.5px;
  }
  .faq-item summary {
    font-size: 19px;
  }
  .faq-item .faq-answer {
    font-size: 17px;
  }
  .about-body {
    font-size: 18.5px;
  }
  .about-body h2 {
    font-size: 27px;
  }
  .about-values h3 {
    font-size: 18px;
  }
  .about-values p {
    font-size: 16px;
  }
  .blog-card h3 {
    font-size: 20px;
  }
  .blog-card p {
    font-size: 16px;
  }
  .nav-links a {
    font-size: 16.5px;
  }
  .btn {
    font-size: 16.5px;
  }
  .foot-links a {
    font-size: 15.5px;
  }
  .footnotes li {
    font-size: 15px;
  }
  .stat-callout .stat-caption {
    font-size: 18px;
  }
}

/* ---------- BENTO FEATURE GRID (Features page) ---------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(190px, auto);
  gap: 20px;
  margin-top: 8px;
}

.bento-tile {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
}

.bento-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink-soft);
}

.bento-lg {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-md {
  grid-column: span 2;
  grid-row: span 1;
}

.bento-sm {
  grid-column: span 1;
  grid-row: span 1;
}

.bento-tall {
  grid-column: span 1;
  grid-row: span 2;
}

.bento-tile.bento-accent {
  background: var(--ink);
  border-color: var(--ink);
}

.bento-tile.bento-accent h3 {
  color: #FFFFFF;
}

.bento-tile.bento-accent p {
  color: #C7CEDB;
}

.bento-tile.bento-accent .icon {
  background: rgba(217, 142, 43, 0.18);
  color: var(--amber);
}

.bento-tile .icon {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: #EBE3D2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber-deep);
  flex: none;
}

.bento-tile .icon svg {
  width: 22px;
  height: 22px;
}

.bento-tile h3 {
  font-family: 'Zilla Slab', serif;
  font-weight: 700;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.2;
}

.bento-lg h3 {
  font-size: 23px;
}

.bento-tile p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.bento-sm p {
  font-size: 14px;
}

.bento-lg .bento-body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
}

.bento-lg .bento-text {
  flex: 1;
  min-width: 0;
}

/* Compact static preview of the manifest UI, used only inside the
   large bento tile. Deliberately simplified (not the full animated
   version from the homepage hero) to stay lightweight and legible
   at a much smaller size. */
.mini-manifest {
  flex: 1;
  min-width: 200px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
}

.mini-manifest .mm-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mini-manifest .mm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 8px;
}

.mini-manifest .mm-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mini-manifest .mm-thumb {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #EBE3D2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.mini-manifest .mm-thumb svg {
  width: 14px;
  height: 14px;
  stroke: var(--ink-soft);
}

.mini-manifest .mm-name {
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 600;
  flex: 1;
}

.mini-manifest .mm-qty {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  background: #EAE8DE;
  padding: 2px 7px;
  border-radius: 100px;
}

.mini-manifest .mm-stamp {
  align-self: flex-end;
  margin-top: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  background: var(--teal);
  padding: 4px 10px;
  border-radius: 6px;
}

@media (max-width: 920px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .bento-lg {
    grid-column: span 2;
    grid-row: span 1;
  }
  .bento-md {
    grid-column: span 2;
  }
  .bento-sm {
    grid-column: span 1;
  }
  .bento-tall {
    grid-column: span 1;
    grid-row: span 1;
  }
  .bento-lg .bento-body {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-lg,
  .bento-md,
  .bento-sm,
  .bento-tall {
    grid-column: span 1;
    grid-row: span 1;
  }
}

.tags-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}