/* Fonts: self-hosted Noto Sans (UI), Noto Serif (section heads), Noto Sans Mono (labels).
   Latin + Latin Extended only (covers English and the ₹ sign). font-display: swap. */
/* latin-ext */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-sans-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-sans-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-sans-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-sans-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-sans-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-sans-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-sans-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-sans-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */ @font-face { font-family: 'Noto Sans Mono'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-sans-mono-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Noto Sans Mono'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-sans-mono-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */ @font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-serif-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-serif-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */ @font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-serif-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/noto-serif-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   LineSure by ProcMart: site styles
   Tokens follow the LineSure web style guide (Design/ folder).
   ========================================================================== */

:root {
  /* Core */
  --orange: #F36D44; --orange-hover-light: #E35E36; --orange-hover-dark: #F7835F; --orange-700: #C2481F;
  --blue: #2D5F9A; --blue-hover: #1F4A7C; --blue-300: #7FA8DA;
  /* Charcoal neutral scale */
  --night: #12151C; --charcoal: #1F2430; --slate-700: #343A47; --slate-600: #4A5160; --slate-500: #6B7280;
  --slate-300: #C9CCD3; --line: #E7E7EC; --paper: #F7F7F9; --white: #FFFFFF;
  /* Status (product UI and data only; always pair with a label) */
  --status-running: #1E8E5A; --status-watch: #E9A23B; --status-fault: #D6453D; --status-offline: #6B7280;
  /* Verdict text */
  --pass: #1E8E5A; --fail: #B4233C;

  --font-sans: 'Noto Sans', system-ui, sans-serif;
  --font-serif: 'Noto Serif', Georgia, serif;
  --font-mono: 'Noto Sans Mono', monospace;

  --transition: background-color .15s ease, color .15s ease;
  --header-h: 76px; /* updated from JS to the real sticky-header height */
}

/* Light · Paper
   [data-inv] sections use the opposite palette to the page (as in the design). */
:root, [data-theme="light"], [data-theme="dark"] [data-inv] {
  color-scheme: light;
  --bg: var(--white); --surface: var(--paper); --border: var(--line);
  --text: var(--charcoal); --text-muted: var(--slate-600); --text-subtle: var(--slate-500);
  --primary: var(--orange); --primary-hover: var(--orange-hover-light); --on-primary: var(--charcoal);
  --accent: var(--blue); --link: var(--blue); --link-hover: var(--blue-hover);
  --outline-border: var(--charcoal); --outline-hover: var(--paper);
  --text-orange: var(--orange-700);
  --lock-ink: #1F2430; --lock-accent: #2D5F9A; --logo-filter: none;
}

/* Dark · Night (site default) */
[data-theme="dark"], [data-theme="light"] [data-inv] {
  color-scheme: dark;
  --bg: var(--night); --surface: var(--charcoal); --border: var(--slate-700);
  --text: var(--white); --text-muted: var(--slate-300); --text-subtle: var(--slate-300);
  --primary: var(--orange); --primary-hover: var(--orange-hover-dark); --on-primary: var(--charcoal);
  --accent: var(--blue-300); --link: var(--blue-300); --link-hover: var(--white);
  --outline-border: var(--slate-300); --outline-hover: var(--charcoal);
  --text-orange: var(--orange);
  --lock-ink: #FFFFFF; --lock-accent: #7FA8DA; --logo-filter: brightness(0) invert(1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: var(--header-h); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
[hidden] { display: none !important; }

.app {
  background: var(--bg); color: var(--text); font-family: var(--font-sans);
  font-size: 17px; line-height: 1.55; min-height: 100vh;
}
.page[hidden] { display: none; }

/* ---------- Keyframes ---------- */
@keyframes ls-draw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes ls-fade { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes ls-pop { 0% { opacity: 0; transform: scale(0) } 70% { opacity: 1; transform: scale(1.25) } 100% { opacity: 1; transform: scale(1) } }
@keyframes ls-ring { 0% { opacity: .9; transform: scale(1) } 100% { opacity: 0; transform: scale(3.2) } }
@keyframes ls-spin { to { transform: rotate(360deg) } }
@keyframes ls-sweep { from { transform: translateX(0) } to { transform: translateX(1200px) } }
@keyframes ls-sweep-sm { from { transform: translateX(0) } to { transform: translateX(360px) } }
@keyframes ls-flow { to { transform: translateX(80px) } }
@keyframes ls-swing { from { transform: rotate(-40deg) } to { transform: rotate(40deg) } }
@keyframes ls-blink { 0%, 100% { opacity: .2 } 50% { opacity: 1 } }
@keyframes ls-grow { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes ls-travel { 0% { left: 0% } 45%, 55% { left: 50% } 100% { left: 100% } }
@keyframes ls-dash { to { stroke-dashoffset: -40 } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Buttons & links ---------- */
.btn {
  font: inherit; font-family: var(--font-sans); font-size: 16px; line-height: 1.2;
  border-radius: 999px; cursor: pointer; white-space: nowrap; transition: var(--transition);
  font-weight: 700; padding: 14px 24px; border: 0;
  background: var(--primary); color: var(--on-primary);
}
.btn:hover { background: var(--primary-hover); }
.btn--outline {
  font-weight: 600; padding: 13px 23px; border: 1px solid var(--outline-border);
  background: transparent; color: var(--text);
}
.btn--outline:hover { background: var(--outline-hover); }

.text-link { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--link); }
.text-link:hover { color: var(--link-hover); }

/* ---------- Header ---------- */
.site-header-wrap { position: sticky; top: 0; z-index: 20; }
.site-header {
  display: flex; justify-content: space-between; align-items: center; gap: 16px 28px; flex-wrap: wrap;
  padding: 14px 32px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.lockup { display: inline-flex; align-items: center; gap: 10px; }
.lockup svg { display: block; overflow: visible; flex-shrink: 0; }
.lockup__word {
  font-family: var(--font-sans); font-weight: 700; font-size: 24px; line-height: 1;
  letter-spacing: -0.01em; color: var(--lock-ink);
}
.brand__divider { width: 1px; height: 30px; background: var(--border); }
.brand__by { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.brand__by img { height: 17px; width: auto; display: block; filter: var(--logo-filter); }

.site-nav { margin-left: auto; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.site-nav a { color: var(--text-muted); text-decoration: none; }
.site-nav a.is-active { color: var(--text); }
.site-nav a:hover { color: var(--link-hover); }

/* ---------- Shared type ---------- */
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.eyebrow--muted { color: var(--text-subtle); }
.mono-label { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--text-subtle); }
.mono-num { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--accent); }
.lead { margin: 0; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.muted { color: var(--text-muted); }

.fade-0  { animation: ls-fade .6s ease-out 0s both; }
.fade-1  { animation: ls-fade .6s ease-out .1s both; }
.fade-25 { animation: ls-fade .6s ease-out .25s both; }
.fade-4  { animation: ls-fade .6s ease-out .4s both; }

/* ---------- Hero ---------- */
.hero {
  background: var(--bg); overflow: hidden;
  min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: space-between;
}
.hero__inner {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(32px, 6.5svh, 96px) 32px 16px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(16px, 2.6svh, 28px);
  flex: 0 0 auto; justify-content: flex-start;
}
.hero__title {
  margin: 0; font-size: clamp(44px, min(7vw, 8.6svh), 92px); font-weight: 700; line-height: 1.02;
  letter-spacing: -0.035em; max-width: 1240px; text-wrap: balance;
}
.hero__title span { color: var(--text-subtle); }
.hero__lead { max-width: 680px; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding-top: 8px; }
/* illustration fills the remaining height and sits on the bottom edge of the screen */
.hero__chart {
  width: 100%; max-width: 1440px; margin: 0 auto; padding: 8px 0 clamp(16px, 4svh, 56px);
  flex: 1; display: flex; align-items: flex-end; justify-content: center;
}
.hero__chart svg { width: 100%; height: auto; max-height: max(150px, 30svh); display: block; overflow: visible; }

/* ---------- Numbered sections ---------- */
.sec { background: var(--bg); color: var(--text); }
.sec--surface { background: var(--surface); }
.sec__inner {
  max-width: 1200px; margin: 0 auto; padding: clamp(72px, min(11vw, 15svh), 152px) 32px;
  display: flex; flex-direction: column; align-items: center; gap: clamp(40px, min(6vw, 8svh), 80px);
}
.sec__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; max-width: 880px; }
.sec__kicker { display: flex; align-items: center; gap: 14px; }
.sec__kicker .rule { width: 32px; height: 1px; background: var(--text-subtle); }
.sec__kicker .label { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
.sec__title {
  margin: 0; font-family: var(--font-serif); font-size: clamp(32px, 4.6vw, 56px); font-weight: 600;
  line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance;
}
.sec__head .lead { max-width: 680px; }

/* SVG text helpers */
svg .t-mono { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; fill: var(--text); }
svg .t-mono.subtle { fill: var(--text-subtle); }
svg .t-mono.accent { fill: var(--accent); }
svg .t-sans { font-family: var(--font-sans); font-size: 16px; fill: var(--text-muted); }

.grid { width: 100%; display: grid; gap: 18px; }
.grid--250 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid--320 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--440 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }

.card { background: var(--bg); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.sec--surface .card, .card--bg { background: var(--bg); }
.sec:not(.sec--surface) .card { background: var(--surface); }
.card__title { font-size: 20px; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.card__text { font-size: 19px; font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.card svg.icon { width: 100%; max-width: 220px; height: 80px; }

/* Reveal-on-scroll containers: content keeps its space (no layout jump) but stays
   hidden, with its animations held at frame 0, until it scrolls into view */
.reveal-slot { width: 100%; }
.reveal-slot:not(.is-seen) > * { visibility: hidden; }
.reveal-slot > svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---------- Loop (How it works) ---------- */
.loop { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: center; }
.loop__svg { width: 100%; max-width: 560px; height: auto; max-height: min(520px, 52svh); display: block; margin: 0 auto; overflow: visible; }
.loop__node { cursor: pointer; }
.loop__node circle { transition: fill .3s; }
.loop__ring { transform-origin: 280px 260px; transition: transform .9s cubic-bezier(.6, 0, .2, 1); }
.loop__panel { display: flex; flex-direction: column; gap: 20px; max-width: 480px; }
.loop__title { font-family: var(--font-serif); font-size: clamp(36px, 4vw, 52px); font-weight: 600; line-height: 1.1; }
.loop__body { margin: 0; font-size: 20px; line-height: 1.5; color: var(--text-muted); min-height: 3em; text-wrap: pretty; }
.loop__expert {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--accent);
  border-radius: 10px; font-size: 16px; font-weight: 600;
}
.dot { width: 10px; height: 10px; border-radius: 999px; background: var(--accent); flex-shrink: 0; }
.loop__tabs { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
.loop__tab {
  font: inherit; font-size: 14px; font-weight: 600; padding: 10px 16px; min-height: 44px; border-radius: 999px;
  cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text);
  transition: background .2s, color .2s;
}
.loop__tab.is-active { background: var(--text); color: var(--bg); }

/* ---------- Compare cards ---------- */
.compare { width: 100%; max-width: 1040px; }
.compare .card { gap: 18px; border: 1px solid var(--border); }
.compare .card.is-accent { border-color: var(--accent); }
.compare .card.is-accent .mono-label { color: var(--accent); }
.compare__lines { display: flex; flex-direction: column; gap: 12px; font-size: 18px; font-weight: 600; line-height: 1.4; }
.compare__lines span + span { color: var(--text-muted); font-weight: 400; }

/* ---------- Monitor cards ---------- */
.mon-card { background: var(--surface); border-radius: 10px; padding: 40px 32px 32px; display: flex; flex-direction: column; gap: 24px; }
.mon-card svg { width: 100%; height: 160px; }
.mon-card__title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Outcomes ---------- */
.timeline {
  width: 100%; max-width: 1000px; background: var(--bg); border-radius: 10px;
  padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 36px;
}
.timeline__row { display: flex; flex-direction: column; gap: 12px; }
.timeline__bars { display: flex; gap: 4px; height: 48px; }
.timeline__bars > div { border-radius: 8px; transform-origin: left center; background: var(--border); }
.timeline__bars .fault {
  background: var(--status-fault); display: flex; align-items: center; padding: 0 14px; font-size: 14px;
  font-weight: 700; color: var(--charcoal); overflow: hidden; white-space: nowrap;
}
.timeline__bars .planned { background: var(--accent); }
.timeline__legend { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--text-muted); }
.timeline__legend span { width: 12px; height: 12px; border-radius: 3px; background: var(--accent); }
.grow { animation: ls-grow .9s cubic-bezier(.6, 0, .2, 1) both; }

.benefits { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 40px 32px; }
.benefit { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--text); padding-top: 20px; }
.benefit__title { font-size: 20px; font-weight: 700; }
.benefit__text { font-size: 16px; color: var(--text-muted); }

/* ---------- Why ProcMart ---------- */
.chain { width: 100%; max-width: 960px; position: relative; padding-top: 4px; }
.chain__line { position: absolute; left: 12%; right: 12%; top: 31px; height: 2px; background: var(--border); }
.chain__track { position: absolute; left: 12%; right: 12%; top: 24px; height: 16px; }
.chain__track div {
  position: absolute; top: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 999px;
  background: var(--primary); animation: ls-travel 4.5s cubic-bezier(.6, 0, .4, 1) infinite;
}
.chain__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; text-align: center; }
.chain__step { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.chain__num {
  width: 60px; height: 60px; border-radius: 999px; border: 2px solid var(--text); background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px;
}
.chain__num.is-accent { border-color: var(--accent); color: var(--accent); }
.chain__name { font-size: 16px; font-weight: 700; }
.chain__tag { font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); }

.stats {
  width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px;
  background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stat { background: var(--bg); padding: 32px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.stat__value { font-size: clamp(44px, 5vw, 64px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 15px; color: var(--text-muted); }
.why__note { margin: 0; font-size: 18px; line-height: 1.55; color: var(--text-muted); max-width: 640px; text-align: center; text-wrap: pretty; }

/* ---------- Closing CTA ---------- */
.cta { background: var(--bg); border-top: 1px solid var(--border); }
.cta__inner {
  max-width: 1200px; margin: 0 auto; padding: clamp(96px, 12vw, 160px) 32px 40px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px;
}
.cta__title { margin: 0; font-size: clamp(40px, 6vw, 76px); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; max-width: 900px; text-wrap: balance; }
.cta__lead { margin: 0; font-size: 20px; line-height: 1.5; color: var(--text-muted); max-width: 560px; text-wrap: pretty; }
.hero-baseline { width: 100%; height: 96px; display: block; }

/* ---------- Pilot page ---------- */
.pilot-hero__inner {
  max-width: 1200px; margin: 0 auto; padding: clamp(96px, 12vw, 152px) 32px clamp(64px, 8vw, 104px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px;
}
.pilot-hero__title { margin: 0; font-size: clamp(44px, 7vw, 88px); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; max-width: 900px; text-wrap: balance; }
.pilot-hero .lead { max-width: 640px; }
.gantt {
  width: 100%; max-width: 1000px; margin-top: clamp(40px, 6vw, 72px); background: var(--surface);
  border-radius: 10px; padding: clamp(20px, 4vw, 40px); text-align: left;
}
.gantt__head {
  display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--text-subtle);
}
.gantt__row { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.gantt__label { display: flex; flex-direction: column; gap: 2px; }
.gantt__label b { font-size: 16px; font-weight: 700; }
.gantt__label span { font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); }
.gantt__track { position: relative; height: 28px; }
.gantt__bar { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 8px; transform-origin: left center; }
.gantt__notes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 20px;
  padding-top: 24px; font-size: 15px; line-height: 1.5; color: var(--text-muted);
}
.fit-card { gap: 20px; }
.fit-card .bullet { width: 14px; height: 14px; border-radius: 999px; background: var(--accent); }

.measures { width: 100%; max-width: 880px; border-top: 1px solid var(--border); min-height: 1px; }
.measure {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--border);
}
.measure__num { font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
.measure__text { font-size: 18px; font-weight: 600; }
.measure__tag { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); }
.measure__tag::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--status-running); }
.signoff { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.signoff p { margin: 0; font-family: var(--font-serif); font-size: clamp(26px, 3vw, 36px); font-weight: 600; line-height: 1.2; }

/* ---------- Apply page ---------- */
.apply {
  max-width: 1200px; margin: 0 auto; padding: 72px 32px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 56px; align-items: start;
}
.apply__intro { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.apply__title { margin: 0; font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.apply__lead { margin: 0; font-size: 20px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.apply__steps { display: flex; flex-direction: column; gap: 14px; padding: 16px 0 8px; }
.apply__step { display: flex; align-items: center; gap: 14px; }
.apply__step span:first-child {
  width: 36px; height: 36px; border-radius: 999px; border: 2px solid var(--accent); display: flex; align-items: center;
  justify-content: center; font-family: var(--font-mono); font-size: 13px; color: var(--accent); flex-shrink: 0;
}
.apply__step span:last-child { font-size: 16px; font-weight: 600; }
.apply__main { flex: 1; min-width: 0; }

.success { border: 1px solid var(--border); border-radius: 10px; padding: 40px 32px; display: flex; flex-direction: column; gap: 16px; }
.success__tag { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
.success__tag::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--status-running); }
.success__title { margin: 0; font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.success p:last-child { margin: 0; font-size: 18px; color: var(--text-muted); text-wrap: pretty; }

.form { display: flex; flex-direction: column; gap: 24px; }
.form__alert { border: 1px solid var(--fail); border-radius: 10px; padding: 16px 20px; font-size: 16px; color: var(--text); }
.form__alert strong { color: var(--fail); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.btn:disabled { opacity: .6; cursor: progress; }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; }
.form__grid--top { align-items: start; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 15px; font-weight: 600; }
.field__label .opt, legend .opt { font-weight: 400; color: var(--text-subtle); }
.field__hint { font-size: 14px; color: var(--text-subtle); }
.field__error { font-size: 14px; color: var(--fail); }
.input {
  font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); outline: none; width: 100%;
}
.input:focus { border-color: var(--accent); }
textarea.input { resize: vertical; }
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fieldset--equip { gap: 10px; }
.fieldset--equip legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.fieldset--equip .field__hint { margin-top: -4px; }
.fieldset--existing { gap: 8px; }
.fieldset--existing legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--border);
  border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 44px;
}
.chip--radio { padding: 10px 20px; }
.chip input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.chip input[type="radio"] { margin: 0; accent-color: var(--accent); }
.consent { border-top: 1px solid var(--border); padding-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.consent label { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--accent); }
.consent .field__error { padding-left: 30px; }
.form__submit { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form__submit .field__error { font-size: 15px; }

/* ---------- FAQ page ---------- */
.faq {
  max-width: 960px; margin: 0 auto; padding: clamp(96px, 12vw, 152px) 32px clamp(80px, 10vw, 120px);
  display: flex; flex-direction: column; gap: 56px;
}
.faq__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.faq__title { margin: 0; font-size: clamp(40px, 6vw, 72px); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; }
.faq__list { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; justify-content: space-between;
  align-items: center; gap: 24px; padding: 28px 0; font-family: var(--font-serif); font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600; line-height: 1.3; color: var(--text);
}
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.faq__sign { font-family: var(--font-mono); font-size: 24px; font-weight: 400; color: var(--accent); flex-shrink: 0; width: 28px; text-align: center; }
.faq__a { padding: 0 56px 32px 0; font-size: 18px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; animation: ls-fade .35s ease-out both; }
.faq__cta { display: flex; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); }
.site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 56px 32px 32px; display: flex; flex-direction: column; gap: 40px; }
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px; }
.site-footer__about { display: flex; flex-direction: column; gap: 12px; grid-column: 1 / -1; max-width: 640px; }
.site-footer__about p { margin: 0; font-size: 15px; color: var(--text-muted); text-wrap: pretty; }
.site-footer__about p.addr { font-size: 14px; color: var(--text-subtle); }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 600; }
.site-footer__legal {
  border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between;
  gap: 16px 32px; flex-wrap: wrap; font-size: 14px; color: var(--text-subtle);
}
.site-footer__legal > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.site-footer__legal > div:last-child { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer__legal a { color: var(--text-subtle); }

/* ==========================================================================
   Scroll-triggered motion
   .anim       — every animation inside waits (paused on its first frame) until
                 the element scrolls into view; JS adds .in-view.
   .enter      — children fade up with the design's ls-fade, staggered.
   .enter-head — section heading rhythm: kicker, title, lead (0 / .1s / .25s).
   ========================================================================== */
.anim:not(.in-view),
.anim:not(.in-view) *,
.reveal-slot:not(.in-view) * { animation-play-state: paused !important; }

.enter > *, .enter-head > * { animation: ls-fade .6s ease-out both; }
.enter > :nth-child(2) { animation-delay: .08s; }
.enter > :nth-child(3) { animation-delay: .16s; }
.enter > :nth-child(4) { animation-delay: .24s; }
.enter > :nth-child(5) { animation-delay: .32s; }
.enter > :nth-child(6) { animation-delay: .40s; }
.enter > :nth-child(7) { animation-delay: .48s; }
.enter > :nth-child(8) { animation-delay: .56s; }
.enter-head > :nth-child(2) { animation-delay: .1s; }
.enter-head > :nth-child(3) { animation-delay: .25s; }

/* Loop step panel: re-fades on every step change (JS toggles .is-swapping) */
.loop__swap { animation: ls-fade .45s ease-out both; }

/* ---------- Theme switch (footer, secondary) ---------- */
.theme-switch {
  display: inline-flex; align-items: center; padding: 2px; gap: 2px;
  border: 1px solid var(--border); border-radius: 999px;
}
.theme-switch button {
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
  padding: 6px 12px; min-height: 28px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-subtle); transition: var(--transition);
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] { background: var(--bg); color: var(--text); }
.theme-switch button:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-footer__legal > div:last-child { align-items: center; }
/* Brief cross-fade while switching themes */
.theme-switching, .theme-switching * {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease, stroke .3s ease !important;
}

/* ---------- Mobile header: compact bar + dropdown menu ---------- */
.menu-toggle {
  display: none; font: inherit; background: transparent; color: var(--text); cursor: pointer;
  border: 1px solid var(--outline-border); border-radius: 999px; width: 44px; height: 44px;
  align-items: center; justify-content: center; padding: 0;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  position: relative; transition: transform .25s ease, background-color .2s ease;
}
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
.site-header.is-open .menu-toggle span { background: transparent; }
.site-header.is-open .menu-toggle span::before { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .menu-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .site-header { flex-wrap: nowrap; padding: 12px 16px; position: relative; }
  .brand { gap: 12px; min-width: 0; }
  .brand__divider { height: 24px; }
  .menu-toggle { display: inline-flex; flex-shrink: 0; }
  .menu-toggle { margin-left: auto; }
  .site-header { gap: 10px; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 16px 20px;
    font-size: 17px; display: none;
  }
  .site-header.is-open .site-nav { display: flex; animation: ls-fade .25s ease-out both; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .site-nav .btn { margin-top: 16px; }

  .sec__inner, .hero__inner, .cta__inner, .pilot-hero__inner, .apply, .faq, .site-footer__inner { padding-left: 16px; padding-right: 16px; }
}
/* Phones: endorsed lockup — "by ProcMart" stacks under the wordmark */
@media (max-width: 420px) {
  .brand { display: grid; grid-template-columns: auto auto; grid-template-areas: "mark word" "mark by"; column-gap: 10px; row-gap: 4px; align-items: center; }
  .lockup { display: contents; }
  .lockup svg { grid-area: mark; }
  .lockup__word { grid-area: word; font-size: 22px; align-self: end; }
  .brand__divider { display: none; }
  .brand__by { grid-area: by; font-size: 11px; gap: 5px; align-self: start; }
  .brand__by img { height: 11px; }
}

/* ==========================================================================
   Responsive diagrams
   Wide diagrams (viewBox 1040–1200 units) shrink too far on small screens, so:
   - phones and portrait tablets (≤900px) get purpose-drawn compact versions
     (.dg-compact), with the same animations and timing;
   - landscape tablets (901–1100px) keep the wide versions with larger label text.
   ========================================================================== */
.dg-compact { display: none !important; }
.reveal-slot.dg > svg { width: 100%; height: auto; display: block; overflow: visible; }
.dgt { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; fill: var(--text); }
.dgt.sub { fill: var(--text-subtle); }
.dgt.acc { fill: var(--accent); }
.dgs { font-family: var(--font-sans); font-size: 14px; fill: var(--text-muted); }

@media (min-width: 901px) and (max-width: 1100px) {
  :root { --dg-mono: 15px; --dg-sans: 16px; --dg-sans-sm: 16px; }
}

@media (max-width: 900px) {
  .dg-wide { display: none !important; }
  .dg-compact { display: block !important; width: 100%; max-width: 480px; height: auto; margin: 0 auto; overflow: visible; }
  .hero__chart svg.dg-compact { max-height: none; }
}

@media (max-width: 700px) {
  /* Loop: larger labels so they stay legible when the diagram scales down */
  .loop__svg .t-mono { font-size: 18px; }
  .loop__node text[style*="font-size:17px"] { font-size: 21px !important; }
  .loop__svg > text.t-mono.subtle { transform: translateY(8px); }

  /* Outcome bars: let the fault label wrap instead of being cut off */
  .timeline__bars .fault { white-space: normal; font-size: 12px; line-height: 1.2; padding: 0 8px; }

  /* Why ProcMart chain: smaller nodes so four fit across a phone */
  .chain__line { top: 27px; }
  .chain__track { top: 20px; }
  .chain__num { width: 48px; height: 48px; font-size: 12px; }
  .chain__name { font-size: 14px; line-height: 1.3; }
  .chain__tag { font-size: 10px; letter-spacing: .02em; }
}