/* ShapedOps — shared stylesheet (home + manufacturers + 404) */

:root {
  --ink: #0c0d0a;
  --ink-1: #111310;
  --ink-2: #171914;
  --ink-3: #20231c;
  --line: rgba(236, 238, 226, 0.09);
  --line-2: rgba(236, 238, 226, 0.16);
  --text: #ecebe3;
  --muted: #a3a296;
  --faint: #6f6e64;

  --lime: #a8ff00;
  --lime-2: #c6ff5c;
  --lime-deep: #5c7a00;
  --lime-ink: #142000;
  --lime-wash: rgba(168, 255, 0, 0.08);

  --paper: #ecebe2;
  --paper-2: #e1dfd3;
  --paper-3: #d4d1c3;
  --paper-ink: #17180f;
  --paper-muted: #5c5b50;
  --paper-line: rgba(23, 24, 15, 0.12);

  --kraft: #b99a6b;
  --warn: #ff8f6b;

  --wa-bg: #0b141a;
  --wa-bar: #1f2c34;
  --wa-in: #202c33;
  --wa-out: #005c4b;
  --wa-tick: #53bdeb;

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 14px;
  --wrap: 1240px;
  --gutter: 32px;
  --header-h: 68px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  /* enabled after load (site.js) so deep links jump instead of gliding
     through every scroll-driven scene on the way down */
  html.smooth { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--lime); color: var(--lime-ink); }

:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--lime); color: var(--lime-ink); padding: 10px 16px; border-radius: 8px;
  font-weight: 600; transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------------------------------------------------------- type */

.display, h1, h2 {
  font-family: var(--f-display);
  font-stretch: 116%;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(42px, 6.1vw, 88px); }
h2 { font-size: clamp(34px, 4.4vw, 62px); }
h3 {
  font-family: var(--f-display);
  font-stretch: 108%;
  font-weight: 650;
  font-size: clamp(20px, 1.7vw, 24px);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}
h1 .soft, h2 .soft { color: var(--faint); }
h1 .mark, h2 .mark { color: var(--lime); }

p { margin: 0; }
.lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--muted); max-width: 58ch; }
.body-muted { color: var(--muted); }

.mono, .kicker {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.kicker::before { content: ""; width: 7px; height: 7px; background: var(--lime); flex: none; }

/* spec-sheet section label: 02 ─── HOW AN ORDER MOVES */
.sec-label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(36px, 5vw, 64px);
}
.sec-label .n { color: var(--lime); }
.sec-label .rule { height: 1px; background: var(--line-2); }
.sec-label .tag { color: var(--faint); }

/* ------------------------------------------------------------- buttons */

.btn {
  --bg: var(--lime);
  --fg: var(--lime-ink);
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-display); font-stretch: 108%; font-weight: 650; font-size: 15.5px; letter-spacing: 0;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.35s var(--ease-out), background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn .arr { display: inline-block; transition: transform 0.35s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
.btn:hover { background: var(--lime-2); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.btn-ghost {
  --bg: transparent; --fg: var(--text);
  border-color: var(--line-2);
}
.btn-ghost:hover { background: rgba(236, 238, 226, 0.05); border-color: rgba(236, 238, 226, 0.3); }

.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 8px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--lime-2);
  border-bottom: 1px solid rgba(198, 255, 92, 0.35); padding-bottom: 3px;
  transition: border-color 0.25s ease, gap 0.3s var(--ease-out);
}
.link-arrow:hover { border-color: var(--lime); gap: 12px; }

/* -------------------------------------------------------------- header */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(12, 13, 10, 0.78);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-color: var(--line);
}
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
/* how far down the page you are — makes a long page easier to place yourself in */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: left; will-change: transform; pointer-events: none; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand img { width: 30px; height: 30px; }
.brand-word {
  font-family: var(--f-display); font-stretch: 125%; font-weight: 750; font-size: 16px; letter-spacing: 0.04em;
}
.brand-word b { font-weight: 750; color: var(--lime); }

.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a:not(.btn) {
  font-size: 14px; color: var(--muted); transition: color 0.2s ease; position: relative;
}
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--text); }

.menu-btn {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line-2);
  background: transparent; cursor: pointer; position: relative;
}
.menu-btn span {
  position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--text);
  transition: transform 0.35s var(--ease-out), opacity 0.2s ease;
}
.menu-btn span:nth-child(1) { top: 16px; }
.menu-btn span:nth-child(2) { top: 21px; }
.menu-btn span:nth-child(3) { top: 26px; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--ink);
  padding: 28px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-menu a:not(.btn) {
  font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: 30px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.mobile-menu .btn { margin-top: 28px; justify-content: center; }
.menu-open { overflow: hidden; }

/* ------------------------------------------------------------- journey */
/* One 3D scene sits behind the whole homepage; the camera follows the
   scroll. Through the journey it is the subject; on the pages after it, the
   same line stays behind them, dimmed, so the site reads as one place. */

.journey { position: relative; }
.journey-stage {
  position: fixed; left: 0; right: 0; top: 0; z-index: -1;
  height: 100vh; height: 100lvh;
  pointer-events: none; overflow: hidden;
}
.journey-canvas {
  display: block; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.4s ease;
}
.journey-canvas.ready { opacity: 1; }
.past-journey .journey-canvas.ready { opacity: 0.3; }
.no-webgl .journey-stage { display: none; }

/* ---------------------------------------------------------------- pages */
/* The homepage reads as a stack of screens. On laptops and up every section
   after the journey is sized to one screen, and site.js glides to the
   nearest page edge when a scroll stops close to one. (CSS scroll-snap is
   not used: with screen-tall pages it pulls short scrolls back, which feels
   stuck.) Pages carry their own header space, so anchors land at their top. */
html:has(#journey) { scroll-padding-top: 0; }
@media (min-width: 901px) and (min-height: 640px) {
  main > .section {
    min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center;
    padding: calc(var(--header-h) + 24px) 0 32px;
  }
  main > .section > .wrap { width: 100%; }
  main > .section .section-head { margin-bottom: clamp(22px, 4vh, 44px); }
  main > .section .sec-label { margin-bottom: clamp(16px, 3vh, 28px); }
  /* questions in two columns so all eight fit on the page */
  .faq { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; border-top: 1px solid var(--line-2); }
  .faq details:first-of-type { border-top: 0; }
  .faq .ans { padding-right: 16px; font-size: 15px; }
  .spec { row-gap: 12px; padding: 20px 22px; }
  .spec h3 { font-size: clamp(19px, 1.6vw, 23px); margin-bottom: 8px; }
  .spec p { font-size: 15px; line-height: 1.5; }
  .spec .n { display: none; }
  .spec .link-arrow { margin-top: 10px; }
  .spec-vis { min-height: 110px; }
  #features { padding-top: calc(var(--header-h) + 12px); padding-bottom: 16px; }
  #features .sec-label { margin-bottom: clamp(12px, 2vh, 24px); }
  #features .section-head { margin-bottom: clamp(16px, 3vh, 32px); }
  .specs-nav { margin-top: 12px; }
  .specs-btn { width: 40px; height: 40px; }
  .phone-scene { min-height: min(640px, calc(100svh - var(--header-h) - 80px)); }
  .step4 { padding-top: 20px; }
  .step4 h3 { margin: 12px 0 8px; }
  .ind-foot { margin-top: clamp(24px, 4vh, 44px); }
  .cta-grid { align-items: center; }
  .field textarea { min-height: 72px; }
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative; z-index: 1;
  min-height: max(760px, 100svh);
  padding-top: calc(var(--header-h) + clamp(40px, 7vh, 88px));
  overflow: hidden;
  isolation: isolate;
}
/* drafting grid behind the scene (until the 3D line is up) */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 70%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 70% 70%, #000 10%, transparent 75%);
  opacity: 0.55; transition: opacity 1.2s ease;
}
.journey.gl-ready .hero::before { opacity: 0; }
/* legibility scrim behind the headline */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(12,13,10,0.92) 0%, rgba(12,13,10,0.55) 34%, rgba(12,13,10,0) 58%);
}
.hero-copy { position: relative; max-width: 700px; padding-bottom: 150px; }
.hero h1 { font-size: clamp(42px, 5.1vw, 76px); }
.hero .kicker { margin-bottom: 28px; }
.hero h1 { margin-bottom: 28px; }
.hero .lede { margin-bottom: 38px; max-width: 50ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-meta {
  margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-family: var(--f-mono); font-size: 12px; color: var(--faint); letter-spacing: 0.04em;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(168,255,0,0.14); }

/* stage legend pinned to hero bottom — mirrors the 3D stations */
.hero-legend {
  position: absolute; left: 0; right: 0; bottom: 28px;
}
.hero-legend ol {
  list-style: none; margin: 0; padding: 18px 0 0;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px;
  border-top: 1px solid var(--line);
}
.hero-legend li { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); transition: color 0.4s ease; }
.hero-legend li b { display: block; color: var(--muted); font-weight: 500; margin-bottom: 4px; transition: color 0.4s ease; }
.hero-legend li.hit, .hero-legend li.hit b { color: var(--lime); }
.hero-legend .doc-flag { color: var(--lime-deep); }

/* ------------------------------------------------------------ chapters */
/* Each chapter is one screen tall: its card is read while the camera holds on
   that station, then the next chapter scrolls in as the camera glides on. */

.chapter {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 40px) 0 48px;
  scroll-margin-top: 0;
}
.chapter > .wrap { width: 100%; }
.anchor { display: block; height: 0; scroll-margin-top: 0; }

.chapter-card {
  max-width: 468px;
  padding: 30px 30px 26px;
  background: rgba(12, 13, 10, 0.8);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.ch-kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.ch-kicker .n { color: var(--lime); }
.ch-doc {
  font-size: 10.5px; letter-spacing: 0.04em; text-transform: none; color: var(--lime-2);
  border: 1px solid rgba(168,255,0,0.22); background: rgba(168,255,0,0.05); padding: 3px 8px; border-radius: 6px;
}
.ch-title { font-size: clamp(26px, 2.5vw, 36px); margin-bottom: 16px; }
.ch-lede { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0; }
.ch-lede + .ch-lede { margin-top: 12px; }
.ch-turn b { color: var(--text); font-weight: 500; }
.ch-rows { margin: 22px 0 0; }
.ch-rows div {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.ch-rows dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding-top: 3px; }
.ch-rows div:nth-child(2) dt { color: var(--lime); }
.ch-rows dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.ch-chips { margin: 20px 0 14px; }
.ch-chips .chip { font-size: 13px; padding: 6px 12px; }
.ch-note { font-size: 13px; color: var(--faint); margin: 0 0 22px; }

/* stage rail: a slim bar under the header showing which chapter you are on,
   and a way to jump between them. Shown only while the chapters (not the
   hero) are on screen — class set by site.js. */
.journey-rail {
  position: fixed; z-index: 90; left: 0; right: 0; top: var(--header-h);
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 10px;
  padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background: rgba(12, 13, 10, 0.97); border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.45s var(--ease-out), visibility 0s linear 0.35s;
}
.in-journey .journey-rail { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.in-journey .scroll-progress { opacity: 0; }
.journey-rail a {
  display: block; padding: 9px 0 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  border-top: 2px solid var(--line-2); transition: color 0.3s ease, border-color 0.4s ease;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}
.journey-rail a b { font-weight: 500; margin-right: 6px; }
.journey-rail a:hover { color: var(--muted); }
.journey-rail a.done { border-top-color: var(--lime-deep); }
.journey-rail a.on { color: var(--lime); }
.journey-rail a.on { border-top-color: var(--lime); }
@media (max-width: 1180px) { .journey-rail span { display: none; } }

/* up to 1200px there is no room beside the headline for the line, so the
   copy sits on a solid band and the line shows in the gap below it */
@media (max-width: 1200px) {
  .hero { min-height: auto; padding-bottom: 28px; }
  .hero::after { display: none; }
  .hero-copy { padding-bottom: 0; }
  .hero-copy::before {
    content: ""; position: absolute; z-index: -1; inset: -400px -100vw -64px;
    background: linear-gradient(180deg, var(--ink) 0, var(--ink) calc(100% - 150px), rgba(12, 13, 10, 0));
  }
  .hero-legend { position: relative; bottom: auto; margin-top: min(62vw, 560px); }
}

/* phones: the scene gets the top of the screen to itself, then each card
   scrolls up over it — a card beside the scene would leave no room for it */
@media (max-width: 900px) {
  /* the chapter bar does the legend's job here; the line gets the band to itself */
  .hero { padding-bottom: 46vh; padding-bottom: 46svh; }
  .hero-legend { display: none; }
  .chapter { display: block; min-height: 0; padding: 54vh 0 6vh; padding: 54svh 0 6svh; }
  .chapter-card { max-width: none; padding: 22px 20px 18px; background: rgba(12, 13, 10, 0.92); border-radius: 16px; }
  .ch-title { font-size: 25px; margin-bottom: 12px; }
  .ch-lede { font-size: 15px; }
  .ch-rows { margin-top: 16px; }
  .ch-rows div { grid-template-columns: 78px 1fr; gap: 10px; padding: 9px 0; }
  .ch-rows dd { font-size: 14px; }

  .journey-rail { gap: 0 6px; }
  .journey-rail a { text-align: center; padding: 8px 0; }
  .journey-rail a b { margin: 0; }
}
/* ------------------------------------------------------------ sections */

.section { position: relative; padding: clamp(64px, 8vw, 120px) 0; }
/* Sections below the journey skip layout and paint until they come near the
   screen, which keeps the first load light on phones. Not used inside the
   journey, whose cards sit over the pinned 3D scene. "auto" remembers each
   section's real height once rendered. */
.defer-render { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
.section-tight { padding: clamp(72px, 8vw, 112px) 0; }
.section-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 72px); }
.section-head .lede { justify-self: end; }

/* order facts (feature cards) */

.order-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 12.5px; }
.order-facts div { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; color: var(--muted); }
.order-facts b { color: var(--text); font-weight: 500; }
.order-facts .ok { color: var(--lime-2); }

/* ---------------------------------------------------------------- paper */

.paper {
  background: var(--paper);
  color: var(--paper-ink);
  --muted: var(--paper-muted);
  --faint: #8a887b;
  --line: var(--paper-line);
  --line-2: rgba(23, 24, 15, 0.2);
}
.paper .sec-label .n { color: var(--lime-deep); }
.paper .kicker::before { background: var(--paper-ink); }
.paper h2 .soft { color: #9a988b; }
.paper .btn-ghost { --fg: var(--paper-ink); }

/* -------------------------------------------------------- client side */

.client-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.client-copy .lede { margin: 24px 0 32px; }
.client-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.client-points li { display: grid; grid-template-columns: 40px 1fr; padding: 16px 0; border-bottom: 1px solid var(--line); }
.client-points li span { font-family: var(--f-mono); font-size: 12px; color: var(--lime); padding-top: 3px; }
.client-points li b { display: block; font-weight: 600; margin-bottom: 2px; }
.client-points li p { color: var(--muted); font-size: 15px; }

.phone-scene { display: grid; place-items: center; perspective: 1400px; min-height: 640px; }
.phone {
  --rx: 6deg; --ry: -16deg;
  position: relative; width: 300px; height: 620px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.9s var(--ease-out);
}
.phone-face {
  position: absolute; inset: 0; border-radius: 46px;
  background: #0a0b09;
  box-shadow: inset 0 0 0 2px #2a2d25, inset 0 0 0 9px #050605;
  padding: 11px;
  transform: translateZ(9px);
}
/* side thickness */
.phone::before, .phone::after { content: ""; position: absolute; top: 20px; bottom: 20px; width: 18px; background: linear-gradient(90deg, #1a1c17, #2c2f27 50%, #15170f); border-radius: 8px; }
.phone::before { right: -9px; transform: rotateY(90deg) translateZ(0); transform-origin: left; left: auto; }
.phone::after { left: -9px; transform: rotateY(-90deg); transform-origin: right; }
.phone-back { position: absolute; inset: 0; border-radius: 46px; background: #15170f; transform: translateZ(-9px); box-shadow: 0 60px 90px -30px rgba(0,0,0,0.9); }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--wa-bg); }
.phone-notch { position: absolute; top: 10px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; z-index: 5; }
.phone-shadow { position: absolute; bottom: -40px; left: 50%; width: 260px; height: 40px; margin-left: -130px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,0.6), transparent); filter: blur(6px); transform: translateZ(-60px); }

.screen { position: absolute; inset: 0; transition: transform 0.8s var(--ease-out), opacity 0.5s ease; display: flex; flex-direction: column; }
.screen-portal { transform: translateX(100%); background: #f4f3ee; color: #1b1c14; }
.phone.on-portal .screen-wa { transform: translateX(-28%); opacity: 0.4; }
.phone.on-portal .screen-portal { transform: none; }

.wa-top { padding: 44px 14px 10px; background: var(--wa-bar); display: flex; align-items: center; gap: 10px; color: #e9edef; }
.wa-top .av { width: 34px; height: 34px; border-radius: 50%; background: var(--paper-ink); display: grid; place-items: center; }
.wa-top .av img { width: 20px; height: 20px; }
.wa-top b { font-size: 14px; font-weight: 600; display: block; }
.wa-top small { font-size: 11px; color: #8696a0; }
.wa-chat {
  flex: 1; padding: 14px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  background-color: var(--wa-bg);
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 14px 14px;
}
.wa-day { align-self: center; font-size: 10.5px; color: #8696a0; background: #182229; padding: 3px 9px; border-radius: 6px; margin-bottom: 4px; }
.wa-msg {
  align-self: flex-start; max-width: 86%;
  background: var(--wa-in); color: #e9edef; border-radius: 2px 9px 9px 9px;
  padding: 7px 9px 5px; font-size: 12.8px; line-height: 1.38;
  opacity: 0; transform: translateY(12px) scale(0.97); transform-origin: left bottom;
  transition: opacity 0.4s ease, transform 0.55s var(--ease-out);
}
.wa-msg.show { opacity: 1; transform: none; }
.wa-msg .t { display: block; text-align: right; font-size: 10px; color: rgba(233,237,239,0.5); margin-top: 2px; }
.wa-msg a { color: #53bdeb; text-decoration: underline; text-underline-offset: 2px; }
.wa-msg .doc { display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,0.18); border-radius: 6px; padding: 7px; margin-bottom: 5px; }
.wa-msg .doc i { width: 22px; height: 28px; background: #e05a4a; border-radius: 2px; flex: none; position: relative; }
.wa-msg .doc i::after { content: "PDF"; position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 6.5px; font-style: normal; font-weight: 700; color: #fff; }
.wa-msg .doc small { display: block; color: #8696a0; font-size: 10px; }
.wa-input { padding: 8px 10px 22px; display: flex; gap: 8px; align-items: center; background: var(--wa-bg); }
.wa-input span { flex: 1; height: 34px; border-radius: 18px; background: var(--wa-bar); }
.wa-input i { width: 34px; height: 34px; border-radius: 50%; background: #00a884; }

.portal-top { padding: 46px 16px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e0ded4; background: #fff; }
.portal-top .lg { width: 30px; height: 30px; border-radius: 8px; background: #1b1c14; position: relative; flex: none; }
.portal-top .lg::after { content: ""; position: absolute; inset: 9px; border: 2px solid var(--lime); border-radius: 2px; }
.portal-top b { font-size: 13.5px; display: block; }
.portal-top small { font-size: 10.5px; color: #77766b; }
.portal-body { padding: 14px; display: grid; gap: 12px; overflow: hidden; }
.pcard { background: #fff; border: 1px solid #e3e1d7; border-radius: 12px; padding: 12px; }
.pcard h4 { margin: 0 0 8px; font-size: 10.5px; font-family: var(--f-mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #77766b; }
.pstage { font-family: var(--f-display); font-stretch: 110%; font-weight: 700; font-size: 18px; }
.psteps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 10px; }
.psteps i { height: 5px; border-radius: 3px; background: #e5e3d9; }
.psteps i.on { background: #6fb300; }
.pdoc { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid #efede5; font-size: 12px; }
.pdoc:first-of-type { border-top: 0; }
.pdoc span { color: #3f7a00; font-family: var(--f-mono); font-size: 10.5px; }
.pinv { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.pinv b { font-family: var(--f-mono); font-size: 14px; }
.ppay { margin-top: 10px; width: 100%; height: 36px; border-radius: 9px; border: 0; background: #17180f; color: #fff; font-weight: 600; font-size: 12.5px; }

/* ----------------------------------------------------------- spec list */

/* one sideways row of cards, so the section stays one screen tall: three
   in view on wide screens, two on tablets, and on phones one with the next
   peeking in. The arrows (site.js) page through it with a mouse. */
.specs {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px;
}
.specs::-webkit-scrollbar { display: none; }
.spec {
  flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start;
  display: grid; grid-template-columns: 1fr; row-gap: 20px; align-content: start;
  border: 1px solid var(--line-2); border-radius: 16px; padding: 26px 24px; background: var(--ink-1);
}
@media (max-width: 1180px) { .spec { flex-basis: calc((100% - 20px) / 2); } }
.specs-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.specs-count { margin-right: auto; color: var(--faint); }
.specs-btn {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ink-1);
  color: var(--text); font-size: 18px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.specs-btn:hover:not(:disabled) { border-color: var(--lime); }
.specs-btn:disabled { opacity: 0.35; cursor: default; }
.spec .n { font-family: var(--f-mono); font-size: 13px; color: var(--lime); align-self: start; }
.spec h3 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 12px; }
.spec p { color: var(--muted); max-width: 46ch; }
.spec-vis { min-height: 150px; display: grid; align-items: center; }

/* reminders timeline */
.remind { position: relative; padding: 42px 0 18px; }
.remind-line { height: 2px; background: var(--ink-3); position: relative; }
.remind-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--lime-deep), var(--lime)); transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--ease); }
.in .remind-line::after { transform: scaleX(1); }
.remind-pts { position: absolute; left: 0; right: 0; top: 42px; }
.remind-pt { position: absolute; top: -7px; transform: translateX(-50%); text-align: center; }
/* end labels hug the edges so they never spill out of the column */
.remind-pt:first-child { transform: translateX(-8px); text-align: left; }
.remind-pt:first-child i { margin: 0; }
.remind-pt:last-child { transform: translateX(calc(-100% + 8px)); text-align: right; }
.remind-pt:last-child i { margin: 0 0 0 auto; }
.remind-pt i { display: block; width: 16px; height: 16px; border-radius: 50%; margin: 0 auto; background: var(--ink); border: 2px solid var(--ink-3); transition: border-color 0.4s ease, background 0.4s ease; }
.in .remind-pt i { border-color: var(--lime); background: var(--ink-2); }
.in .remind-pt:nth-child(2) i { transition-delay: 0.7s; }
.in .remind-pt:nth-child(3) i { transition-delay: 1.3s; }
.in .remind-pt:nth-child(4) i { transition-delay: 1.9s; }
.remind-pt b { display: block; white-space: nowrap; margin-top: 12px; font-family: var(--f-mono); font-weight: 500; font-size: 12px; color: var(--text); }
.remind-pt small { display: block; font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); margin-top: 2px; white-space: nowrap; }
/* inside a feature card the timeline is narrow: milestones only (full labels live on /payment-reminders) */
.spec .remind-pt small { display: none; }
.spec .remind-pt b { font-size: 11px; }
.spec .remind-pt:nth-child(2) { left: 33% !important; }
.spec .remind-pt:nth-child(3) { left: 60% !important; }
@media (max-width: 360px) { .spec .remind-pt .u { display: none; } }

/* briefing card */
.brief { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px; max-width: 440px; }
.brief-h { font-family: var(--f-display); font-stretch: 108%; font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.brief-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.brief-tabs span { font-family: var(--f-mono); font-size: 10.5px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--faint); }
.brief-tabs span.on { color: var(--lime-ink); background: var(--lime); border-color: var(--lime); }
.brief-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.brief-grid div { background: var(--ink-1); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.brief-grid small { display: block; font-family: var(--f-mono); font-size: 9.5px; color: var(--faint); letter-spacing: 0.04em; text-transform: uppercase; }
.brief-grid b { display: block; font-family: var(--f-display); font-stretch: 110%; font-weight: 650; font-size: 22px; margin-top: 4px; }

/* excel import */
.import { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; gap: 10px; max-width: 480px; }
.import-sheet, .import-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.import-sheet { background: #fff; }
.import-sheet .h { background: #1d6f42; height: 18px; }
.import-sheet i { display: block; height: 16px; border-bottom: 1px solid #e3e3e3; background: linear-gradient(90deg, #fff 0 33%, #f6f6f6 33% 34%, #fff 34% 66%, #f6f6f6 66% 67%, #fff 67%); }
.import-arrow { font-family: var(--f-mono); color: var(--lime); text-align: center; }
.import-table { background: var(--ink-2); padding: 6px; display: grid; gap: 4px; }
.import-table i { display: block; height: 14px; border-radius: 4px; background: var(--ink-3); opacity: 0; transform: translateX(-10px); transition: opacity 0.5s ease, transform 0.6s var(--ease-out); }
.import-table i.dup { background: rgba(255,143,107,0.18); box-shadow: inset 0 0 0 1px rgba(255,143,107,0.4); }
.in .import-table i { opacity: 1; transform: none; }
.in .import-table i:nth-child(2) { transition-delay: 0.12s; } .in .import-table i:nth-child(3) { transition-delay: 0.24s; }
.in .import-table i:nth-child(4) { transition-delay: 0.36s; } .in .import-table i:nth-child(5) { transition-delay: 0.48s; }
.in .import-table i:nth-child(6) { transition-delay: 0.6s; }
.import-note { grid-column: 1 / -1; font-family: var(--f-mono); font-size: 11px; color: var(--faint); margin-top: 6px; }
.import-note b { color: var(--warn); font-weight: 500; }

/* team + partners */
.people { display: flex; flex-wrap: wrap; gap: 8px; max-width: 440px; }
.person { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-2); }
.person i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--f-mono); font-size: 11px; background: var(--ink-3); color: var(--muted); }
.person b { font-weight: 500; font-size: 13px; }
.person small { font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); margin-left: 4px; }
.person.partner i { background: rgba(168,255,0,0.14); color: var(--lime-2); }

/* analytics mini */
.chart { max-width: 460px; }
.chart-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.chart-kpis div { border-top: 1px solid var(--line-2); padding-top: 8px; }
.chart-kpis small { display: block; font-family: var(--f-mono); font-size: 10px; color: var(--faint); letter-spacing: 0.05em; text-transform: uppercase; }
.chart-kpis b { font-family: var(--f-display); font-stretch: 110%; font-weight: 600; font-size: 17px; }
.chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; border-bottom: 1px solid var(--line-2); }
.chart-bars i { flex: 1; background: var(--ink-3); border-radius: 4px 4px 0 0; height: var(--h); transform: scaleY(0); transform-origin: bottom; transition: transform 1.4s var(--ease-out); }
.chart-bars i:last-child { background: var(--lime); }
.in .chart-bars i { transform: none; }
.chart-bars i:nth-child(2) { transition-delay: 0.08s; } .chart-bars i:nth-child(3) { transition-delay: 0.16s; }
.chart-bars i:nth-child(4) { transition-delay: 0.24s; } .chart-bars i:nth-child(5) { transition-delay: 0.32s; } .chart-bars i:nth-child(6) { transition-delay: 0.4s; }
.chart-x { display: flex; gap: 10px; margin-top: 6px; }
.chart-x span { flex: 1; text-align: center; font-family: var(--f-mono); font-size: 10px; color: var(--faint); }
.illus-note { font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); margin-top: 10px; }

/* ----------------------------------------------------------- industries */

.ind-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.ind-tab {
  height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2);
  background: transparent; cursor: pointer; font-size: 14.5px; color: var(--muted);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ind-tab:hover { color: var(--text); border-color: rgba(236,238,226,0.3); }
.ind-tab[aria-selected="true"] { background: var(--text); color: var(--ink); border-color: var(--text); }

.track { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: var(--line-2); }
.stn { position: relative; padding-right: 12px; }
.stn .dot { width: 48px; height: 48px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; color: var(--muted); position: relative; z-index: 1; transition: border-color 0.4s ease, color 0.4s ease, background 0.4s ease; }
.stn.doc .dot { border-color: rgba(168,255,0,0.45); color: var(--lime-2); }
.stn b { display: block; margin-top: 16px; font-family: var(--f-display); font-stretch: 108%; font-weight: 600; font-size: 16px; line-height: 1.2; }
.stn small { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 11px; color: var(--faint); line-height: 1.4; }
.stn.doc small { color: var(--lime-2); }
.track-panel { animation: fadeUp 0.6s var(--ease-out); }
.track-panel[hidden] { display: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ind-foot { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; border-top: 1px solid var(--line); padding-top: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }

/* --------------------------------------------------- implementation */

.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
.step4 { padding: 28px 28px 0 0; position: relative; }
.step4 + .step4 { padding-left: 28px; border-left: 1px solid var(--line); }
.step4 .n { font-family: var(--f-mono); font-size: 12px; color: var(--lime); }
.step4 h3 { margin: 18px 0 12px; }
.step4 p { color: var(--muted); font-size: 15px; }

.pricing {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 64px);
  border: 1px solid var(--line-2); border-radius: 20px; padding: clamp(28px, 4vw, 52px);
  background: linear-gradient(135deg, rgba(168,255,0,0.045), transparent 45%), var(--ink-1);
}
.pricing h2, .pricing h3 { font-size: clamp(26px, 2.8vw, 38px); font-stretch: 114%; margin: 16px 0 16px; }
.pricing ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; }
.pricing li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.pricing li:first-child { border-top: 1px solid var(--line); }
.pricing li::before { content: ""; width: 10px; height: 10px; margin-top: 7px; border: 1.5px solid var(--lime); border-radius: 2px; }
.pricing li b { color: var(--text); font-weight: 500; }

/* ------------------------------------------------------------ founder */

.founder { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.founder blockquote { margin: 0; font-family: var(--f-display); font-stretch: 106%; font-weight: 500; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.25; letter-spacing: -0.015em; text-wrap: pretty; }
.founder blockquote em { font-style: normal; color: var(--lime); }
.founder .sig { margin-top: 28px; display: flex; align-items: center; gap: 14px; }
.founder .sig .av { width: 48px; height: 48px; border-radius: 50%; background: var(--ink-3); border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-stretch: 116%; font-size: 16px; }
.founder .sig b { display: block; font-weight: 600; }
.founder .sig small { color: var(--faint); font-family: var(--f-mono); font-size: 12px; }

/* ---------------------------------------------------------------- faq */

.faq { max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line-2); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 28px; gap: 20px; align-items: center;
  padding: 24px 0;
  font-family: var(--f-display); font-stretch: 106%; font-weight: 600; font-size: clamp(18px, 1.6vw, 21px); letter-spacing: -0.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-2); position: relative; transition: border-color 0.2s ease, background 0.2s ease; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 1.5px; background: var(--text); transition: transform 0.35s var(--ease-out); }
.faq summary .pm::after { transform: rotate(90deg); }
.faq details[open] summary .pm { background: var(--lime); border-color: var(--lime); }
.faq details[open] summary .pm::before, .faq details[open] summary .pm::after { background: var(--lime-ink); }
.faq details[open] summary .pm::after { transform: rotate(0deg); }
.faq summary:hover .pm { border-color: rgba(236,238,226,0.35); }
.faq .ans { padding: 0 56px 26px 0; color: var(--muted); font-size: 16px; max-width: 70ch; }

/* ---------------------------------------------------------------- cta */

.cta-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.cta-grid h2 { margin: 18px 0 22px; }
.cta-side { display: grid; gap: 0; margin-top: 36px; border-top: 1px solid var(--line); }
.cta-side a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); transition: color 0.2s ease; }
.cta-side a:hover { color: var(--text); }
.cta-side a span:last-child { font-family: var(--f-mono); font-size: 13px; color: var(--text); }

.form-card { background: var(--ink-1); border: 1px solid var(--line-2); border-radius: 20px; padding: clamp(22px, 3vw, 36px); }
.form-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 26px; }
.form-tab { height: 42px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; color: var(--muted); font-size: 14.5px; font-weight: 500; transition: background 0.25s ease, color 0.25s ease; }
.form-tab[aria-selected="true"] { background: var(--text); color: var(--ink); }
.form-panel[hidden] { display: none; }
.form-intro { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0;
  background: var(--ink); border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--text); font: inherit; font-size: 15px;
  padding: 12px 14px; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { resize: vertical; min-height: 92px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(-45deg, transparent 50%, var(--muted) 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--lime-deep); box-shadow: 0 0 0 3px rgba(168,255,0,0.12); }
.field input::placeholder, .field textarea::placeholder { color: #55554c; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-actions { margin-top: 22px; display: grid; gap: 12px; }
.form-actions .btn { width: 100%; justify-content: center; }
.form-status { min-height: 20px; font-size: 14px; color: var(--muted); text-align: center; }
.form-status.ok { color: var(--lime-2); }
.form-status.err { color: var(--warn); }
.form-fine { font-family: var(--f-mono); font-size: 11px; color: var(--faint); text-align: center; letter-spacing: 0.02em; }

/* ------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--line); padding: 72px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; }
.foot-grid h4 { margin: 0 0 16px; font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a { color: var(--muted); font-size: 14.5px; transition: color 0.2s ease; }
.foot-grid a:hover { color: var(--text); }
.foot-about p { color: var(--muted); font-size: 14.5px; max-width: 34ch; margin-top: 16px; }
.foot-bottom { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--f-mono); font-size: 11.5px; color: var(--faint); letter-spacing: 0.02em; }
.foot-bottom a:hover { color: var(--lime-2); }

/* ----------------------------------------------------- reveal (JS only) */

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 1s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.08s; } .js .reveal.d2 { transition-delay: 0.16s; } .js .reveal.d3 { transition-delay: 0.24s; }

/* split headline: words rise in */
.js .split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.js .split .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease-out); }
.js .split.in .w > span { transform: none; }

/* ------------------------------------------------------------ subpage */

.page-hero { padding: calc(var(--header-h) + clamp(56px, 9vw, 120px)) 0 clamp(56px, 7vw, 96px); position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 80% 30%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 70% at 80% 30%, #000 10%, transparent 70%);
  opacity: 0.6;
}
.crumbs { font-family: var(--f-mono); font-size: 12px; color: var(--faint); margin-bottom: 30px; }
.crumbs a:hover { color: var(--text); }
.crumbs span { margin: 0 8px; }
.page-hero h1 { max-width: 16ch; margin: 22px 0 28px; }
.page-hero .lede { margin-bottom: 36px; }

.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line); }
.card3 { padding: 30px 28px 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.3s ease; }
.card3:hover { background: rgba(236,238,226,0.02); }
.card3 .n { font-family: var(--f-mono); font-size: 12px; color: var(--lime); }
.card3 h3 { margin: 22px 0 12px; }
.card3 p { color: var(--muted); font-size: 15px; }

.quote-pain { font-family: var(--f-display); font-stretch: 106%; font-weight: 500; font-size: clamp(24px, 2.8vw, 40px); line-height: 1.25; letter-spacing: -0.015em; max-width: 30ch; }
.quote-pain em { font-style: normal; color: var(--lime); }

.err-page { min-height: 100svh; display: grid; place-items: center; text-align: left; padding: calc(var(--header-h) + 40px) 0 80px; }
.err-code { font-family: var(--f-mono); color: var(--lime); font-size: 13px; letter-spacing: 0.08em; }

/* ------------------------------------------------ manufacturers page */

.m-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.m-hero h1 { font-size: clamp(42px, 5.2vw, 80px); max-width: 13ch; }
.m-hero .lede { max-width: 50ch; }

/* job card: a paper traveller being stamped, with the live feed floating in front */
.jc-scene { position: relative; min-height: 620px; display: grid; place-items: center; perspective: 1500px; }
.jc-rig {
  position: relative; transform-style: preserve-3d; will-change: transform;
  transform: rotateX(var(--rx, 9deg)) rotateY(var(--ry, -15deg)) rotateZ(1.5deg);
  transition: transform 0.9s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .jc-rig { animation: jcFloat 8s ease-in-out infinite; }
}
@keyframes jcFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.jobcard {
  position: relative; width: 400px; padding: 30px 26px 18px;
  background: linear-gradient(170deg, #f3efe2, #e8e2cf);
  color: var(--paper-ink); border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 50px 80px -30px rgba(0,0,0,0.75), 0 18px 30px -12px rgba(0,0,0,0.5);
}
.jc-hole { position: absolute; top: 11px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px #d9d1b8; }
.jc-head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 12px; border-bottom: 3px double var(--paper-ink); }
.jc-head b { display: block; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 23px; letter-spacing: 0.06em; line-height: 1; }
.jc-head small { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 10px; color: var(--paper-muted); }
.jc-no { font-family: var(--f-mono); font-size: 10px; color: var(--paper-muted); text-align: right; }
.jc-no span { display: block; font-size: 15px; font-weight: 500; color: var(--paper-ink); }
.jc-fields { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0 18px; margin: 12px 0 0; }
.jc-fields div { min-width: 0; padding: 6px 0; border-bottom: 1px dashed rgba(23,24,15,0.2); }
.jc-fields dt { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-muted); }
.jc-fields dd { margin: 1px 0 0; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-stages { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1.5px solid var(--paper-ink); }
.jc-stages li {
  display: grid; grid-template-columns: 30px 1fr 86px; align-items: center;
  height: 37px; border-bottom: 1px solid var(--paper-line); font-size: 13px; font-weight: 500;
  transition: background 0.4s ease;
}
.jc-stages li span { font-family: var(--f-mono); font-size: 10.5px; color: var(--paper-muted); transition: color 0.3s ease; }
.jc-stages li.on span { color: var(--lime-deep); }
.jc-stages li.cur { background: rgba(168, 255, 0, 0.16); }
.jc-stages .stamp {
  --r: -7deg;
  justify-self: center; font-style: normal;
  font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em;
  color: #34520a; border: 1.5px solid currentColor; border-radius: 3px; padding: 1px 6px;
  opacity: 0; transform: rotate(var(--r)) scale(1.9);
  mix-blend-mode: multiply;
  transition: transform 0.32s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.14s ease;
}
.jc-stages li:nth-child(2n) .stamp { --r: 5deg; }
.jc-stages li:nth-child(3n) .stamp { --r: -3deg; }
.jc-stages li.on .stamp { opacity: 0.85; transform: rotate(var(--r)) scale(1); }
.jc-stages li:last-child .stamp { color: #1d4d00; font-weight: 600; font-size: 12px; border-width: 2px; padding: 1px 9px; }
.jc-foot { margin-top: 10px; font-family: var(--f-mono); font-size: 9.5px; color: var(--paper-muted); text-align: right; letter-spacing: 0.06em; text-transform: uppercase; }
.jobcard.resetting .stamp { transition: opacity 0.5s ease; }

.jc-feed {
  position: absolute; left: -84px; bottom: -40px; width: 300px;
  transform: translateZ(90px);
  background: rgba(17, 19, 16, 0.96);
  border: 1px solid var(--line-2); border-radius: 14px; padding: 14px 16px 6px;
  box-shadow: 0 40px 60px -24px rgba(0,0,0,0.8);
}
.jc-feed-h { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding-bottom: 8px; }
.jc-feed-h .live { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
/* the pulse ring animates transform + opacity only, so it never triggers a repaint */
.jc-feed-h .live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(168,255,0,0.45); animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { from { transform: scale(1); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
/* nothing in the job card animates while it's off screen (class set by site.js) */
.jc-scene.is-off *, .jc-scene.is-off { animation-play-state: paused !important; }
.jc-events { list-style: none; margin: 0; padding: 0; min-height: 147px; }
.jc-events li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); animation: evIn 0.55s var(--ease-out); }
.jc-events .ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 8.5px; font-weight: 500; font-style: normal; }
.jc-events .ic.wa { background: #103b2a; color: #45d483; }
.jc-events .ic.wa::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: radial-gradient(circle at 50% 45%, #000 55%, transparent 57%); mask: radial-gradient(circle at 50% 45%, #000 55%, transparent 57%); }
.jc-events .ic.pdf { background: var(--paper); color: var(--paper-ink); }
.jc-events .ic.done { background: var(--lime); color: var(--lime-ink); }
.jc-events b { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.jc-events small { display: block; font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes evIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* today vs with ShapedOps */
.compare { margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line-2); }
.cmp-row { display: grid; grid-template-columns: 1fr 1.05fr 1.35fr; gap: clamp(20px, 3vw, 44px); padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cmp-row b { font-family: var(--f-display); font-stretch: 108%; font-weight: 600; font-size: 18px; line-height: 1.25; }
.cmp-row > span:nth-child(2) { color: var(--faint); font-size: 15.5px; }
.cmp-row > span:nth-child(2) em { font-family: var(--f-mono); font-style: normal; font-size: 13px; }
.cmp-row > span:nth-child(3) { color: var(--text); font-size: 15.5px; padding-left: 22px; position: relative; }
.cmp-row > span:nth-child(3)::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; background: var(--lime); }
.cmp-head { padding: 14px 0; }
.cmp-row.cmp-head > span { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.cmp-row.cmp-head > span:nth-child(3) { color: var(--lime); padding-left: 0; }
.cmp-row.cmp-head > span:nth-child(3)::before { display: none; }

/* the seven stages, with a rail that fills as you scroll */
.stage-rows { --fill: 0; list-style: none; margin: 0; padding: 0; position: relative; }
.stage-rows::before, .stage-rows::after { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--line-2); }
.stage-rows::after { background: linear-gradient(var(--lime-deep), var(--lime)); transform: scaleY(var(--fill)); transform-origin: top; will-change: transform; }
.stage-rows li { position: relative; display: grid; grid-template-columns: 48px 1fr auto; gap: clamp(20px, 3vw, 40px); align-items: start; padding: 24px 0; }
.stage-rows li + li::before { content: ""; position: absolute; left: 80px; right: 0; top: 0; height: 1px; background: var(--line); }
.stage-rows .sn {
  width: 48px; height: 48px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line-2);
  display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; color: var(--muted);
  position: relative; z-index: 1; transition: border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.stage-rows li.lit .sn { border-color: var(--lime); color: var(--lime); box-shadow: 0 0 0 5px rgba(168,255,0,0.07); }
.stage-rows h3 { margin: 10px 0 8px; }
.stage-rows p { color: var(--muted); font-size: 15.5px; max-width: 58ch; }
.stage-rows .outs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 12px; }
.stage-rows .outs em {
  font-style: normal; font-family: var(--f-mono); font-size: 11.5px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--faint); white-space: nowrap; transition: color 0.4s ease, border-color 0.4s ease;
}
.stage-rows li.lit .outs em { color: var(--muted); }
.stage-rows li.lit .outs em.pdf { color: var(--lime-2); border-color: rgba(168,255,0,0.45); }
.stage-rows li.lit .outs em.wa { color: #6fdc9b; border-color: rgba(69,212,131,0.4); }

/* on the record (paper) */
.record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); }
.record-grid .kicker { margin-bottom: 20px; }
.doclist { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--paper-ink); }
.doclist li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--paper-line); }
.doclist b { font-family: var(--f-display); font-stretch: 110%; font-weight: 650; font-size: clamp(19px, 1.7vw, 23px); }
.doclist span { font-family: var(--f-mono); font-size: 12px; color: var(--paper-muted); text-align: right; }
.doc-note { margin-top: 20px; font-size: 14.5px; color: var(--paper-muted); max-width: 46ch; }
.paper-chips .chip { background: rgba(255, 255, 255, 0.4); color: var(--paper-ink); font-size: 15px; padding: 10px 16px; }

.cards3 .card3 .n { letter-spacing: 0.06em; text-transform: uppercase; }
.card3 .link-arrow { display: flex; width: fit-content; margin-top: 16px; }
.spec .link-arrow { margin-top: 16px; }
.client-points .link-arrow { display: flex; width: fit-content; margin-top: 10px; }

/* closing band */
.cta-band {
  display: grid; grid-template-columns: 1.4fr 0.6fr; gap: clamp(28px, 4vw, 64px); align-items: end;
  border: 1px solid var(--line-2); border-radius: 22px; padding: clamp(28px, 5vw, 64px);
  background: radial-gradient(ellipse 60% 90% at 100% 100%, rgba(168,255,0,0.09), transparent 60%), var(--ink-1);
}
.cta-band h2 { margin: 18px 0 20px; }
.cta-band .body-muted { max-width: 52ch; }
.cta-band-actions { display: grid; gap: 12px; justify-items: stretch; }
.cta-band-actions .btn { justify-content: center; }
.cta-band-actions .link-arrow { justify-self: center; margin-top: 6px; }

@media (max-width: 1080px) {
  .jobcard { width: 360px; }
  .jc-feed { left: -40px; width: 270px; }
}

@media (max-width: 900px) {
  .m-hero-grid { grid-template-columns: 1fr; }
  .jc-scene { min-height: 0; padding: 24px 0 70px; }
  .jc-rig { --rx: 6deg; --ry: -8deg; }
  .jobcard { width: min(380px, calc(100vw - 72px)); }
  .jc-feed { position: relative; left: auto; bottom: auto; width: min(290px, 80vw); margin: -40px -10px 0 auto; transform: translateZ(60px); }
  .jc-scene { padding-bottom: 24px; }

  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: 1fr; gap: 8px; }
  .cmp-row > span:nth-child(2)::before { content: "Today — "; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

  .stage-rows li { grid-template-columns: 48px 1fr; }
  .stage-rows .outs { grid-column: 2; justify-content: flex-start; padding-top: 0; }
  .stage-rows li + li::before { left: 68px; }

  .record-grid { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; }
  .cta-band-actions { justify-items: start; }
  .cta-band-actions .btn { width: 100%; }
  .cta-band-actions .link-arrow { justify-self: start; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .nav a.nav-hide-md { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; --header-h: 62px; }
  /* a live blur behind the header is repainted on every scroll frame — too costly on phones */
  .site-header.scrolled { background: rgba(12, 13, 10, 0.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav { display: none; }
  .menu-btn { display: block; }


  .section-head { grid-template-columns: 1fr; }
  .section-head .lede { justify-self: start; }

  /* features: one card with the next peeking in; swiping replaces the arrows */
  .specs { gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scroll-padding-left: var(--gutter); }
  .spec { flex-basis: 84%; padding: 22px 20px; }
  .spec-vis { min-height: 0; }
  .specs-nav { display: none; }
  .client-grid { grid-template-columns: 1fr; }
  .phone-scene { min-height: 560px; }
  .phone { transform: scale(0.88) rotateX(var(--rx)) rotateY(var(--ry)); }

  /* stations as a compact two-column grid instead of a long vertical track */
  .track { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .track::before { display: none; }
  .stn { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; padding: 0; }
  .stn .dot { width: 40px; height: 40px; border-radius: 10px; font-size: 11px; }
  .stn b { font-size: 15px; }
  .stn b { margin-top: 4px; }
  .stn small { grid-column: 2; margin-top: 2px; }
  .stn:not(.doc) small { display: none; }
  .ind-foot { grid-template-columns: 1fr; }

  .steps4 { grid-template-columns: 1fr 1fr; }
  .step4, .step4 + .step4 { padding: 26px 20px 26px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .step4:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--line); }
  .pricing { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; }
  .cards3 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .spec { gap: 14px; }
  .fgrid { grid-template-columns: 1fr; }
  .step4, .step4 + .step4 { padding: 20px 14px 20px 0; }
  .step4:nth-child(2n) { padding-left: 14px; }
  .step4 h3 { font-size: 18px; margin: 12px 0 8px; }
  .step4 p { font-size: 14px; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-ctas .btn { flex: 1 1 100%; justify-content: center; }
  .import { grid-template-columns: 1fr 26px 1fr; }
  .brief-grid b { font-size: 18px; }
  .faq .ans { padding-right: 0; }
  /* four labelled points do not fit side by side at phone width */
  .remind-pt small { display: none; }
  .remind-pt b { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .split .w > span { opacity: 1; transform: none; }
}