:root {
  --ink: #232240;
  --ink-soft: #45445F;
  --paper: #F7F7FA;
  --white: #FFFFFF;
  --brand: #F26722;
  --brand-deep: #C94F0D;
  --brand-tint: #FDE9DD;
  --accent: #F58B53;
  --indigo: #302F51;
  --indigo-deep: #262546;
  --accent-soft: #FDEBDF;
  --line: #E4E4EC;
  --muted: #66657E;
  --green: #1E8E5A;
  --green-tint: #E3F2E9;
  --blue: #2E5AAC;
  --blue-tint: #E7EEF9;
  --amber-ink: #A84A0A;
  --rose-ink: #A62B2B;
  --rose-tint: #FDECEC;
  --display: 'Bricolage Grotesque', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(35, 34, 64, 0.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap-caps { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ── NAV ── */
header.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(247, 247, 250, 0.90);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; height: 72px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-brand img { height: 38px; width: auto; }
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.nav-brand-text strong {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--ink); letter-spacing: -0.01em;
}
.nav-brand-text span {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand);
}
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-size: 0.875rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--brand); }
.nav-cta {
  background: var(--ink); color: var(--white);
  font-size: 0.85rem; font-weight: 600;
  padding: 0.6rem 1.3rem; border-radius: 999px; text-decoration: none;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--brand); }

/* ── BUTTONS & BADGES ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.94rem; font-weight: 600; text-decoration: none;
  padding: 0.88rem 1.75rem; border-radius: 999px;
  transition: transform 0.15s, background 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-solid { background: var(--brand); color: var(--white); border: 1.5px solid var(--brand); }
.btn-solid:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-ghost { background: var(--white); color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-light { background: var(--white); color: var(--brand); border: 1.5px solid var(--white); }
.btn-light:hover { background: var(--brand-tint); border-color: var(--brand-tint); }
.btn-outline-light { background: rgba(255,255,255,0.07); color: var(--white); border: 1.5px solid rgba(255,255,255,0.28); }
.btn-outline-light:hover { border-color: rgba(255,255,255,0.75); }

.module-dept {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  display: inline-flex; align-items: center; padding: 0.26rem 0.65rem; border-radius: 999px;
}
.dept-sales { background: var(--brand-tint); color: var(--brand); }
.dept-people { background: #EBEBF4; color: #4A4880; }
.dept-ops { background: var(--blue-tint); color: var(--blue); }
.dept-finance { background: var(--green-tint); color: var(--green); }
.dept-mgmt { background: #F4E8F0; color: #8A3D6E; }

/* ── SECTIONS ── */
section { padding: 88px 0; }
.band-white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-eyebrow {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand);
  margin-bottom: 0.9rem; display: block;
}
.sec-title {
  font-family: var(--display); font-size: clamp(1.75rem, 3.1vw, 2.55rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -0.03em;
  max-width: 780px; margin-bottom: 0.95rem;
}
.sec-sub {
  font-size: 1rem; color: var(--muted); max-width: 680px;
  margin-bottom: 3rem; line-height: 1.7;
}

.check-list { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.check-list li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-size: 0.91rem; line-height: 1.55; color: var(--ink-soft);
}
.check-list li::before {
  content: '✓'; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--brand-tint); color: var(--brand);
  font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}

/* ── MODULE HERO ── */
.mod-hero {
  padding: 138px 0 76px;
  position: relative; overflow: hidden;
}
.mod-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(640px 360px at 88% 8%, rgba(242,103,34,0.11), transparent 70%),
    radial-gradient(460px 320px at 6% 92%, rgba(48,47,81,0.09), transparent 70%);
}
.mod-breadcrumb {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: 1.5rem;
  font-size: 0.82rem; color: var(--muted);
}
.mod-breadcrumb a {
  color: var(--ink-soft); text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: color 0.2s;
}
.mod-breadcrumb a:hover { color: var(--brand); }
.mod-breadcrumb .sep { color: var(--line); }

.mod-hero-grid {
  display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 3.5rem; align-items: center;
  position: relative;
}
.mod-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-tint);
  border: 1px solid rgba(242,103,34,0.28);
  padding: 0.38rem 0.85rem; border-radius: 999px; margin-bottom: 1.2rem;
}
.mod-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

.mod-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.2vw, 3.35rem);
  font-weight: 800; line-height: 1.07; letter-spacing: -0.032em;
  margin-bottom: 1.15rem;
}
.mod-hero h1 em { font-style: normal; color: var(--brand); }
.mod-hero-sub {
  font-size: 1.03rem; color: var(--muted); max-width: 560px;
  line-height: 1.7; margin-bottom: 1.45rem;
}
.mod-hero-checks { margin-bottom: 1.5rem; }
.mod-price-strip {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.55rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 0.62rem 0.98rem;
  font-size: 0.82rem; color: var(--ink-soft);
  margin-bottom: 1.7rem; text-decoration: none; transition: border-color 0.2s;
}
.mod-price-strip:hover { border-color: var(--brand); }
.mod-price-strip b { color: var(--ink); font-weight: 700; }
.mod-price-strip .price-hi {
  font-family: var(--display); font-weight: 800; color: var(--brand); font-size: 0.96rem;
}
.mod-price-strip .price-jump {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600; color: var(--brand);
  margin-left: 0.25rem;
}
.mod-hero-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* ── HERO WORKFLOW CONSOLE ── */
.mod-console {
  background: var(--white); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow); padding: 1.65rem; position: relative;
}
.console-head {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  padding-bottom: 1rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--line);
}
.console-head h3 {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.live-dot {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600; color: var(--brand);
  white-space: nowrap;
}
.live-dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.wf-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem;
  margin-bottom: 1.15rem;
}
.wf-step {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.72rem 0.85rem; display: flex; align-items: center; gap: 0.65rem;
  transition: border-color 0.2s, transform 0.2s; min-width: 0;
}
.wf-step:hover { border-color: rgba(242,103,34,0.45); transform: translateY(-1px); }
.wf-step.wf-full { grid-column: 1 / -1; }
.wf-num {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  background: var(--indigo); color: var(--white);
  font-family: var(--mono); font-size: 0.65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.wf-step:first-child .wf-num, .wf-step:last-child .wf-num { background: var(--brand); }
.wf-label { font-size: 0.84rem; font-weight: 600; color: var(--ink); line-height: 1.3; min-width: 0; overflow-wrap: break-word; }

.console-summary {
  background: var(--indigo); color: var(--white);
  border-radius: 14px; padding: 1rem 1.15rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.console-summary-top {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
}
.console-callout {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(242,103,34,0.22); color: var(--accent);
  border: 1px solid rgba(245,139,83,0.4);
  padding: 0.22rem 0.6rem; border-radius: 999px;
}
.console-meta { font-family: var(--mono); font-size: 0.64rem; color: rgba(255,255,255,0.62); }
.console-summary p { font-size: 0.82rem; color: rgba(255,255,255,0.86); line-height: 1.5; }

/* ── PROBLEM VS. SOLUTION ── */
.ps-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.ps-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 1.55rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.1rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.ps-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(242,103,34,0.35); }
.ps-prob { display: flex; flex-direction: column; gap: 0.45rem; }
.ps-tag-prob {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--amber-ink); background: var(--accent-soft);
  padding: 0.26rem 0.65rem; border-radius: 999px; width: fit-content;
}
.ps-prob h4 {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -0.015em; color: var(--ink); line-height: 1.28;
}
.ps-prob p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }

.ps-sol {
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--green); border-radius: 12px;
  padding: 1rem 1.05rem; display: flex; flex-direction: column; gap: 0.35rem;
}
.ps-tag-sol {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--green);
}
.ps-sol h5 {
  font-family: var(--display); font-weight: 700; font-size: 0.96rem;
  color: var(--ink); line-height: 1.3;
}
.ps-sol p { font-size: 0.83rem; color: var(--ink-soft); line-height: 1.55; }

.win-panel {
  background: var(--indigo); color: var(--white); border-radius: 20px;
  padding: 2.35rem 2.5rem; display: grid; grid-template-columns: 1.25fr 0.75fr;
  gap: 2.2rem; align-items: center; position: relative; overflow: hidden;
  box-shadow: var(--shadow);
}
.win-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(460px 280px at 95% 0%, rgba(242,103,34,0.25), transparent 65%);
}
.win-tag {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); background: rgba(242,103,34,0.16);
  border: 1px solid rgba(245,139,83,0.4);
  display: inline-block; padding: 0.32rem 0.78rem; border-radius: 999px;
  margin-bottom: 0.95rem; position: relative;
}
.win-panel h3 {
  font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.62rem);
  font-weight: 800; line-height: 1.22; letter-spacing: -0.02em;
  margin-bottom: 0.65rem; position: relative;
}
.win-panel p {
  font-size: 0.9rem; color: rgba(255,255,255,0.74); line-height: 1.65; position: relative;
}
.win-actions {
  display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; position: relative;
}

/* ── ALTERNATING COL-6 / COL-6 CAPABILITY ROWS (LEFT/RIGHT ALTERNATION) ── */
.cap-stack {
  display: flex;
  flex-direction: column;
  gap: 4.4rem;
}

.cap-row {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 2.85rem;
  align-items: center;
  scroll-margin-top: 92px;
}
.cap-row.cap-alt {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
}
.cap-row.cap-alt .cap-copy { order: 2; }
.cap-row.cap-alt .cap-visual { order: 1; }

.cap-copy, .cap-visual { min-width: 0; }

.cap-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 0.85rem;
}
.cap-idx {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  background: var(--indigo); color: var(--white);
  padding: 0.24rem 0.58rem; border-radius: 6px; letter-spacing: 0.08em;
}
.cap-tag {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--brand);
}
.cap-copy h3 {
  font-family: var(--display); font-size: clamp(1.42rem, 2.25vw, 1.88rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -0.025em;
  margin-bottom: 0.85rem; color: var(--ink);
}
.cap-desc {
  font-size: 0.95rem; color: var(--muted); line-height: 1.68; margin-bottom: 1.25rem;
}
.cap-foot {
  margin-top: 1.35rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem;
}
.cap-callout {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.67rem; font-weight: 600;
  background: var(--brand-tint); color: var(--brand-deep);
  border: 1px solid rgba(242,103,34,0.28);
  padding: 0.34rem 0.78rem; border-radius: 999px;
}
.cap-demo-link {
  font-size: 0.85rem; font-weight: 600; color: var(--ink);
  text-decoration: none; transition: color 0.2s;
}
.cap-demo-link:hover { color: var(--brand); }

/* ── COL-6 INTERACTIVE MULTI-DEVICE PREVIEW STAGE ── */
.preview-stage {
  background: linear-gradient(135deg, #ECECF6 0%, #F4F4FA 54%, #FCEEE5 100%);
  border: 1px solid #DCDCE9;
  border-radius: 20px;
  padding: 0.85rem 0.9rem 1rem;
  box-shadow: 0 12px 30px rgba(35, 34, 64, 0.08);
}

.stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  padding: 0 0.15rem;
}
.stage-info {
  display: flex; align-items: center; gap: 0.48rem; min-width: 0;
}
.stage-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0;
}
.stage-label {
  font-family: var(--mono); font-size: 0.63rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Desktop | Tablet | Mobile Segmented Switcher */
.device-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  box-shadow: 0 2px 6px rgba(35, 34, 64, 0.06);
  flex-shrink: 0;
}
.device-btn {
  display: inline-flex; align-items: center; gap: 0.32rem;
  font-family: var(--body); font-size: 0.7rem; font-weight: 700;
  color: var(--muted); background: transparent; border: 0;
  padding: 0.3rem 0.56rem; border-radius: 7px; cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.device-btn:hover { color: var(--ink); background: var(--paper); }
.device-btn.is-active {
  background: var(--indigo); color: var(--white);
  box-shadow: 0 2px 6px rgba(35, 34, 64, 0.18);
}
.device-btn svg {
  width: 12px; height: 12px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Stage Viewport & Device Bezel Transitions */
.stage-viewport {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-window {
  width: 100%;
  max-width: 100%;
  background: var(--white);
  border: 1px solid #D6D6E5;
  border-radius: 15px;
  box-shadow: 0 14px 34px rgba(35, 34, 64, 0.11);
  overflow: hidden;
  transition: max-width 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}

/* Tablet Bezel inside Col-6 */
.stage-viewport[data-device="tablet"] .app-window {
  max-width: 446px;
  margin: 0 auto;
  border: 5px solid #232240;
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(35, 34, 64, 0.22);
}

/* Smartphone Hardware Bezel inside Col-6 */
.stage-viewport[data-device="mobile"] .app-window {
  width: 310px;
  max-width: 100%;
  margin: 0 auto;
  border: 6px solid #1B1A33;
  border-radius: 32px;
  box-shadow: 0 22px 48px rgba(27, 26, 51, 0.28);
}

/* Browser Chrome (Desktop & Tablet) */
.app-browser-bar {
  background: #F1F1F7;
  border-bottom: 1px solid var(--line);
  padding: 0.48rem 0.78rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}
.stage-viewport[data-device="mobile"] .app-browser-bar { display: none; }

.ui-dots { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.ui-dots span { width: 8px; height: 8px; border-radius: 50%; display: block; }
.ui-dots span:nth-child(1) { background: #F06A63; }
.ui-dots span:nth-child(2) { background: #F5B841; }
.ui-dots span:nth-child(3) { background: #36B37E; }

.ui-url {
  font-family: var(--mono); font-size: 0.61rem; font-weight: 500; color: var(--ink-soft);
  background: var(--white); border: 1px solid var(--line); border-radius: 7px;
  padding: 0.18rem 0.6rem; display: inline-flex; align-items: center; gap: 0.35rem;
  min-width: 0; max-width: 310px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-url-lock { color: var(--green); font-size: 0.62rem; flex-shrink: 0; }
.ui-badge {
  font-family: var(--mono); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green); background: var(--green-tint);
  padding: 0.18rem 0.5rem; border-radius: 999px; flex-shrink: 0;
}

/* Smartphone Hardware Top Status + App Bar (Mobile Mode Only) */
.app-mobile-top {
  display: none;
  background: #1E1D38;
  color: var(--white);
  padding: 0.48rem 0.8rem 0.6rem;
}
.stage-viewport[data-device="mobile"] .app-mobile-top { display: block; }

.mobile-status-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 0.58rem; font-weight: 600;
  color: rgba(255,255,255,0.78); margin-bottom: 0.42rem;
}
.mobile-notch { width: 52px; height: 10px; border-radius: 999px; background: #0D0C1D; }
.mobile-app-row { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; }
.mobile-app-brand { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.wy-mark {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  background: var(--brand); color: var(--white);
  font-family: var(--display); font-size: 0.6rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-app-titles { min-width: 0; }
.mobile-app-titles strong {
  font-family: var(--display); font-size: 0.75rem; font-weight: 700; color: var(--white);
  display: block; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobile-app-titles span {
  font-family: var(--mono); font-size: 0.54rem; color: var(--accent);
  display: block; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobile-live-pill {
  font-family: var(--mono); font-size: 0.53rem; font-weight: 600;
  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0.12rem 0.42rem; border-radius: 999px; flex-shrink: 0;
}

/* Inner Application Shell */
.app-shell {
  display: flex;
  min-width: 0;
  background: #F6F6FB;
}

/* Sleek Compact Icon Rail on Desktop (preserves 93% canvas width inside Col-6!) */
.app-rail {
  width: 38px;
  flex-shrink: 0;
  background: #1E1D38;
  padding: 0.65rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.stage-viewport[data-device="tablet"] .app-rail,
.stage-viewport[data-device="mobile"] .app-rail { display: none; }

.rail-icons { display: flex; flex-direction: column; align-items: center; gap: 0.42rem; }
.rail-ico {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55); font-size: 0.68rem;
}
.rail-ico.is-active { background: rgba(255,255,255,0.15); color: var(--white); }
.rail-user {
  width: 23px; height: 23px; border-radius: 50%;
  background: rgba(242,103,34,0.25); color: var(--accent);
  font-family: var(--mono); font-size: 0.52rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Main Workspace Column */
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ERP Workspace Top Sub-Header (Desktop & Tablet) */
.app-subhead {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.stage-viewport[data-device="mobile"] .app-subhead { display: none; }

.subhead-top {
  padding: 0.48rem 0.82rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
}
.subhead-crumb {
  display: flex; align-items: center; gap: 0.38rem; min-width: 0; flex-wrap: wrap;
  font-size: 0.74rem;
}
.subhead-crumb strong { font-family: var(--display); font-weight: 800; color: var(--ink); }
.subhead-crumb .sep { color: var(--line); }
.subhead-crumb span.crumb-tag { font-weight: 700; color: var(--brand); }

.subhead-tools { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.subhead-new {
  font-size: 0.65rem; font-weight: 700;
  background: var(--indigo); color: var(--white);
  padding: 0.22rem 0.58rem; border-radius: 7px;
}

.subhead-filters {
  padding: 0.32rem 0.82rem;
  background: #FAFAFD;
  border-top: 1px solid #EFEFF6;
  display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; flex-wrap: wrap;
}
.filter-pills { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.filter-pill {
  font-family: var(--body); font-size: 0.64rem; font-weight: 700;
  color: var(--muted); background: transparent; border: 0;
  padding: 0.16rem 0.48rem; border-radius: 5px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.filter-pill:hover { background: #EAEAF3; color: var(--ink); }
.filter-pill.is-active { background: var(--indigo); color: var(--white); }
.filter-meta {
  font-family: var(--mono); font-size: 0.58rem; font-weight: 600; color: var(--green);
}
.stage-viewport[data-device="tablet"] .filter-meta { display: none; }

/* Workspace Canvas */
.app-canvas {
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
  flex: 1;
}
.stage-viewport[data-device="mobile"] .app-canvas {
  padding: 0.68rem;
  gap: 0.55rem;
  max-height: 430px;
  overflow-y: auto;
}

/* Bottom Audit Bar (Desktop/Tablet) vs Mobile 4-Tab Nav */
.app-statusbar {
  padding: 0.38rem 0.82rem;
  background: var(--white);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; flex-wrap: wrap;
  font-size: 0.64rem; color: var(--muted);
}
.stage-viewport[data-device="mobile"] .app-statusbar { display: none; }
.app-statusbar b { color: var(--green); font-weight: 700; }
.app-statusbar .ver { font-family: var(--mono); font-size: 0.59rem; }

.app-mobile-tabs {
  display: none;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 0.4rem 0.45rem 0.48rem;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.stage-viewport[data-device="mobile"] .app-mobile-tabs { display: grid; }
.m-tab {
  font-size: 0.58rem; font-weight: 700; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.m-tab.is-active { color: var(--brand); }
.m-tab i { font-style: normal; font-size: 0.74rem; line-height: 1; }

/* ── SHARED MICRO-UTILITIES INSIDE MOCK CANVAS (ZERO CLIPPING!) ── */
.ui-bar {
  background: var(--white); border: 1px solid var(--line); border-radius: 11px;
  padding: 0.58rem 0.8rem; display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; flex-wrap: wrap; min-width: 0;
}
.ui-bar-title { font-family: var(--display); font-size: 0.84rem; font-weight: 700; color: var(--ink); min-width: 0; overflow-wrap: break-word; }
.ui-bar-sub { font-size: 0.71rem; color: var(--muted); min-width: 0; overflow-wrap: break-word; }

.ui-pill {
  font-family: var(--mono); font-size: 0.59rem; font-weight: 600;
  padding: 0.19rem 0.52rem; border-radius: 999px;
  display: inline-flex; align-items: center; max-width: 100%;
  overflow-wrap: break-word; line-height: 1.3;
}
.ui-pill-brand { background: var(--brand-tint); color: var(--brand-deep); border: 1px solid rgba(242,103,34,0.28); }
.ui-pill-green { background: var(--green-tint); color: var(--green); border: 1px solid rgba(30,142,90,0.25); }
.ui-pill-blue { background: var(--blue-tint); color: var(--blue); border: 1px solid rgba(46,90,172,0.22); }
.ui-pill-ink { background: #ECECF4; color: var(--ink); }

.ui-avatar {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.av-0 { background: var(--brand-tint); color: var(--brand-deep); }
.av-1 { background: var(--blue-tint); color: var(--blue); }
.av-2 { background: var(--green-tint); color: var(--green); }
.av-3 { background: #EFE8F6; color: #6B3FA0; }

/* 1. FLOW */
.mock-flow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.mock-flow-node {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.72rem; display: flex; align-items: flex-start; gap: 0.6rem; min-width: 0;
}
.mock-flow-node > div:last-child { min-width: 0; }
.mock-flow-num {
  width: 25px; height: 25px; border-radius: 7px; flex-shrink: 0;
  background: var(--indigo); color: var(--white);
  font-family: var(--mono); font-size: 0.63rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mock-flow-step {
  font-family: var(--mono); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand); display: block;
}
.mock-flow-title { font-family: var(--display); font-size: 0.82rem; font-weight: 700; color: var(--ink); line-height: 1.25; margin-top: 2px; overflow-wrap: break-word; }
.mock-flow-sub { font-size: 0.71rem; color: var(--muted); margin-top: 2px; line-height: 1.38; overflow-wrap: break-word; }
.mock-highlight {
  background: var(--green-tint); border: 1px solid rgba(30,142,90,0.28);
  color: #155D3B; border-radius: 10px; padding: 0.58rem 0.8rem;
  font-size: 0.75rem; font-weight: 600; line-height: 1.42;
}

/* 2. KANBAN */
.mock-kanban-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.mock-k-col {
  background: #EFEFF6; border: 1px solid var(--line); border-radius: 12px;
  padding: 0.55rem; display: flex; flex-direction: column; gap: 0.48rem; min-width: 0;
}
.mock-k-head {
  display: flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); min-width: 0;
}
.mock-k-head span:last-child { min-width: 0; overflow-wrap: break-word; }
.k-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.k-dot-blue { background: var(--blue); }
.k-dot-orange { background: var(--brand); }
.k-dot-emerald { background: var(--green); }
.mock-k-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 9px;
  padding: 0.58rem; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0;
}
.mock-k-card-title { font-family: var(--display); font-size: 0.76rem; font-weight: 700; color: var(--ink); line-height: 1.26; overflow-wrap: break-word; }
.mock-k-card-sub { font-size: 0.68rem; color: var(--muted); line-height: 1.32; overflow-wrap: break-word; margin-top: 2px; }
.mock-k-card-foot {
  padding-top: 0.35rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; flex-wrap: wrap;
}
.mock-k-badge {
  font-family: var(--mono); font-size: 0.57rem; font-weight: 700;
  background: var(--paper); color: var(--ink); padding: 0.12rem 0.38rem; border-radius: 4px;
}
.mock-k-status { font-size: 0.64rem; font-weight: 600; color: var(--green); }

/* 3. INSPECTOR */
.mock-inspector {
  background: var(--white); border: 1px solid var(--line); border-radius: 13px;
  display: grid; grid-template-columns: 0.92fr 1.08fr; overflow: hidden; min-width: 0;
}
.mock-ins-list {
  background: #F4F4F9; border-right: 1px solid var(--line); padding: 0.68rem;
  display: flex; flex-direction: column; gap: 0.4rem; min-width: 0;
}
.mock-ins-heading {
  font-family: var(--mono); font-size: 0.57rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.12rem; overflow-wrap: break-word;
}
.mock-ins-item {
  width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: 9px;
  padding: 0.5rem 0.58rem; display: flex; align-items: center; justify-content: space-between; gap: 0.42rem;
  transition: background 0.18s, border-color 0.18s, color 0.18s; min-width: 0;
}
.mock-ins-item > div { min-width: 0; }
.mock-ins-item:hover { border-color: var(--brand); }
.mock-ins-item.is-active { background: var(--indigo); color: var(--white); border-color: var(--indigo); }
.mock-ins-name { font-size: 0.75rem; font-weight: 700; display: block; line-height: 1.24; overflow-wrap: break-word; }
.mock-ins-sub { font-size: 0.65rem; color: var(--muted); display: block; margin-top: 2px; line-height: 1.28; overflow-wrap: break-word; }
.mock-ins-item.is-active .mock-ins-sub { color: rgba(255,255,255,0.72); }
.mock-ins-right {
  font-family: var(--mono); font-size: 0.56rem; font-weight: 700;
  background: var(--paper); color: var(--ink); padding: 0.15rem 0.4rem; border-radius: 5px; flex-shrink: 0;
}
.mock-ins-item.is-active .mock-ins-right { background: var(--brand); color: var(--white); }

.mock-ins-detail { padding: 0.82rem; display: flex; flex-direction: column; justify-content: space-between; gap: 0.7rem; min-width: 0; }
.mock-ins-detail h4 { font-family: var(--display); font-size: 0.9rem; font-weight: 800; color: var(--ink); margin-top: 0.3rem; line-height: 1.24; overflow-wrap: break-word; }
.mock-ins-detail p { font-size: 0.72rem; color: var(--muted); margin-top: 0.22rem; line-height: 1.42; overflow-wrap: break-word; }
.mock-ins-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.42rem; }
.mock-ins-metric {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.45rem 0.5rem; min-width: 0;
}
.mock-ins-metric span { font-size: 0.62rem; color: var(--muted); display: block; overflow-wrap: break-word; }
.mock-ins-metric strong { font-family: var(--display); font-size: 0.78rem; font-weight: 800; color: var(--ink); display: block; margin-top: 2px; overflow-wrap: break-word; }
.mock-ins-tags { display: flex; flex-wrap: wrap; gap: 0.32rem; }
.mock-ins-tags span {
  font-size: 0.63rem; font-weight: 600; background: var(--green-tint); color: var(--green);
  padding: 0.16rem 0.46rem; border-radius: 5px;
}

/* 4. APPROVAL */
.mock-app-list { display: flex; flex-direction: column; gap: 0.48rem; }
.mock-app-item {
  background: var(--white); border: 1px solid var(--line); border-radius: 11px;
  padding: 0.68rem 0.8rem; display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; min-width: 0;
}
.mock-app-item.is-done { background: #F2FAF5; border-color: rgba(30,142,90,0.35); }
.mock-app-left { display: flex; align-items: flex-start; gap: 0.55rem; min-width: 0; }
.mock-app-left > div { min-width: 0; }
.mock-app-title { font-family: var(--display); font-size: 0.8rem; font-weight: 700; color: var(--ink); line-height: 1.28; overflow-wrap: break-word; }
.mock-app-meta { font-size: 0.69rem; color: var(--muted); margin-top: 0.2rem; line-height: 1.42; overflow-wrap: break-word; }
.mock-app-btn {
  font-family: var(--body); font-size: 0.7rem; font-weight: 700;
  background: var(--indigo); color: var(--white); border: 0; border-radius: 999px;
  padding: 0.42rem 0.8rem; cursor: pointer; flex-shrink: 0; transition: background 0.18s;
}
.mock-app-btn:hover { background: var(--brand); }
.mock-app-item.is-done .mock-app-btn { background: var(--green); }

/* 5. DASHBOARD */
.mock-dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.mock-kpi {
  background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: 0.68rem 0.72rem; min-width: 0;
}
.mock-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; flex-wrap: wrap; }
.mock-kpi-label {
  font-family: var(--mono); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.mock-kpi-delta {
  font-family: var(--mono); font-size: 0.55rem; font-weight: 700;
  background: var(--green-tint); color: var(--green); padding: 0.1rem 0.34rem; border-radius: 4px;
}
.mock-kpi-val {
  font-family: var(--display); font-size: clamp(1rem, 1.5vw, 1.22rem); font-weight: 800; color: var(--ink);
  margin: 0.3rem 0 0.4rem; line-height: 1.1; overflow-wrap: break-word;
}
.mock-bar-track { width: 100%; height: 6px; background: #EAEAF2; border-radius: 999px; overflow: hidden; }
.mock-bar-fill { height: 100%; border-radius: 999px; background: var(--indigo); }
.mock-bar-fill.fill-brand { background: var(--brand); }
.mock-bar-fill.fill-green { background: var(--green); }

.mock-chart-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 0.82rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.6rem; min-width: 0;
}
.mock-chart-row { display: flex; flex-direction: column; gap: 0.24rem; }
.mock-chart-row-top { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; font-size: 0.74rem; flex-wrap: wrap; }
.mock-chart-row-top span { color: var(--ink-soft); font-weight: 600; min-width: 0; overflow-wrap: break-word; }
.mock-chart-row-top strong { font-family: var(--mono); font-size: 0.7rem; color: var(--ink); }

/* 6. PIPELINE */
.mock-pipe-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.42rem; }
.mock-pipe-step {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.55rem 0.35rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 0;
}
.mock-pipe-step.is-done { border-color: rgba(30,142,90,0.4); }
.mock-pipe-step.is-active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(242,103,34,0.15); }
.mock-pipe-dot {
  width: 20px; height: 20px; border-radius: 50%;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--muted);
}
.mock-pipe-step.is-done .mock-pipe-dot { background: var(--green); color: var(--white); }
.mock-pipe-step.is-active .mock-pipe-dot { background: var(--brand); color: var(--white); }
.mock-pipe-lbl { font-size: 0.64rem; font-weight: 700; color: var(--ink); line-height: 1.22; overflow-wrap: break-word; }
.mock-pipe-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.mock-pipe-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: 0.68rem 0.78rem; min-width: 0;
}
.mock-pipe-card span { font-size: 0.68rem; color: var(--muted); display: block; }
.mock-pipe-card strong { font-family: var(--display); font-size: 0.88rem; font-weight: 800; color: var(--ink); display: block; margin-top: 2px; overflow-wrap: break-word; }
.mock-pipe-card em { font-style: normal; font-size: 0.68rem; font-weight: 600; color: var(--green); display: block; margin-top: 2px; }

/* 7. DOCUMENT (Zero right-edge clipping!) */
.mock-doc {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 0.88rem 0.95rem;
  display: flex; flex-direction: column; gap: 0.6rem; min-width: 0;
}
.mock-doc-head { border-bottom: 1px solid var(--line); padding-bottom: 0.55rem; }
.mock-doc-head h4 { font-family: var(--display); font-size: 0.9rem; font-weight: 800; color: var(--ink); margin-top: 0.3rem; overflow-wrap: break-word; }
.mock-doc-head p { font-size: 0.7rem; color: var(--muted); margin-top: 2px; overflow-wrap: break-word; }
.mock-doc-rows { display: flex; flex-direction: column; min-width: 0; }
.mock-doc-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding: 0.44rem 0; border-bottom: 1px dashed var(--line); font-size: 0.76rem; min-width: 0;
}
.mock-doc-row:last-child { border-bottom: 0; }
.mock-doc-row span { color: var(--ink-soft); min-width: 0; flex: 1 1 54%; overflow-wrap: break-word; line-height: 1.38; }
.mock-doc-row strong {
  font-family: var(--mono); font-size: 0.71rem; color: var(--ink);
  text-align: right; min-width: 0; max-width: 46%; overflow-wrap: break-word; line-height: 1.38;
}
.mock-doc-total {
  background: var(--indigo); color: var(--white); border-radius: 9px;
  padding: 0.62rem 0.82rem; display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; flex-wrap: wrap;
}
.mock-doc-total span { font-size: 0.74rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.mock-doc-total strong { font-family: var(--mono); font-size: 0.86rem; font-weight: 700; color: var(--accent); }
.mock-doc-foot { font-size: 0.7rem; font-weight: 600; color: var(--green); }

/* 8. BRIDGE */
.mock-bridge { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.6rem; align-items: center; }
.mock-bridge-left {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 0.78rem;
  display: flex; flex-direction: column; gap: 0.4rem; min-width: 0;
}
.mock-bridge-item {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.42rem 0.55rem; font-size: 0.72rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; min-width: 0;
}
.mock-bridge-item span { min-width: 0; overflow-wrap: break-word; }
.mock-bridge-item b { color: var(--green); font-size: 0.72rem; flex-shrink: 0; }
.mock-bridge-mid {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand); color: var(--white); font-weight: 800; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.mock-bridge-right {
  background: var(--indigo); color: var(--white); border-radius: 12px; padding: 0.9rem;
  display: flex; flex-direction: column; gap: 0.32rem; min-width: 0;
}
.mock-bridge-right small {
  font-family: var(--mono); font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent);
}
.mock-bridge-right span { font-size: 0.74rem; font-weight: 600; color: rgba(255,255,255,0.84); }
.mock-bridge-right strong { font-family: var(--display); font-size: 1.24rem; font-weight: 800; color: var(--white); line-height: 1.12; overflow-wrap: break-word; }
.mock-bridge-right p { font-size: 0.7rem; color: rgba(255,255,255,0.74); line-height: 1.42; }

/* 9. CARDS */
.mock-cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.mock-c-item {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 0.72rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 0.55rem; min-width: 0;
}
.mock-c-item h5 { font-family: var(--display); font-size: 0.79rem; font-weight: 700; color: var(--ink); margin-top: 0.35rem; line-height: 1.26; overflow-wrap: break-word; }
.mock-c-item p { font-size: 0.69rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.42; overflow-wrap: break-word; }
.mock-c-foot {
  padding-top: 0.4rem; border-top: 1px solid var(--line);
  font-size: 0.66rem; font-weight: 700; color: var(--green);
}

/* 10. TARGET VS. ACHIEVEMENT */
.mock-ta-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.48rem; }
.mock-ta-kpi {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.6rem; min-width: 0;
}
.mock-ta-kpi small { font-family: var(--mono); font-size: 0.53rem; font-weight: 700; text-transform: uppercase; color: var(--muted); display: block; overflow-wrap: break-word; }
.mock-ta-kpi strong { font-family: var(--display); font-size: 0.9rem; font-weight: 800; color: var(--ink); display: block; margin-top: 2px; overflow-wrap: break-word; }
.mock-ta-kpi span { font-size: 0.63rem; font-weight: 600; color: var(--green); display: block; margin-top: 1px; }

.mock-ta-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 0; }
.mock-ta-head {
  padding: 0.55rem 0.78rem; background: #F4F4F9; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; flex-wrap: wrap;
}
.mock-ta-tabs { display: inline-flex; flex-wrap: wrap; gap: 0.2rem; background: var(--white); padding: 2px; border-radius: 7px; border: 1px solid var(--line); }
.mock-ta-tab {
  font-family: var(--body); font-size: 0.64rem; font-weight: 700; color: var(--muted);
  background: transparent; border: 0; border-radius: 5px; padding: 0.2rem 0.48rem; cursor: pointer;
}
.mock-ta-tab.is-active { background: var(--indigo); color: var(--white); }
.mock-ta-pane { display: none; flex-direction: column; }
.mock-ta-pane.is-active { display: flex; }
.mock-ta-row {
  padding: 0.55rem 0.78rem; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1.15fr 0.95fr 0.85fr auto; align-items: center; gap: 0.5rem; min-width: 0;
}
.mock-ta-row:last-child { border-bottom: 0; }
.mock-ta-who { min-width: 0; }
.mock-ta-who strong { font-size: 0.74rem; color: var(--ink); display: block; line-height: 1.24; overflow-wrap: break-word; }
.mock-ta-who span { font-size: 0.64rem; color: var(--muted); display: block; overflow-wrap: break-word; }
.mock-ta-nums { font-family: var(--mono); font-size: 0.66rem; color: var(--ink); font-weight: 700; min-width: 0; }
.mock-ta-nums small { display: block; font-family: var(--body); font-size: 0.61rem; font-weight: 400; color: var(--muted); }
.mock-ta-prog { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.mock-ta-prog b { font-family: var(--mono); font-size: 0.64rem; color: var(--ink); }

/* 11. FIELD VISITS */
.mock-fv-layout { display: grid; grid-template-columns: 0.84fr 1.16fr; gap: 0.55rem; align-items: start; min-width: 0; }
.mock-fv-reps {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 0.58rem;
  display: flex; flex-direction: column; gap: 0.4rem; min-width: 0;
}
.mock-fv-rep {
  width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.48rem 0.58rem;
}
.mock-fv-rep.is-active { background: var(--indigo); color: var(--white); border-color: var(--indigo); }
.mock-fv-rep strong { font-size: 0.73rem; display: block; }
.mock-fv-rep span { font-size: 0.64rem; color: var(--muted); display: block; margin-top: 1px; }
.mock-fv-rep.is-active span { color: rgba(255,255,255,0.72); }
.mock-fv-stops {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 0.65rem;
  display: none; flex-direction: column; gap: 0.45rem; min-width: 0;
}
.mock-fv-stops.is-active { display: flex; }
.mock-fv-stop {
  border: 1px solid var(--line); border-radius: 8px; padding: 0.48rem 0.58rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.45rem; min-width: 0;
}
.mock-fv-stop > div { min-width: 0; }
.mock-fv-stop.is-current { border-color: var(--brand); background: #FFF8F4; }
.mock-fv-stop strong { font-size: 0.74rem; color: var(--ink); display: block; overflow-wrap: break-word; }
.mock-fv-stop small { font-family: var(--mono); font-size: 0.61rem; color: var(--muted); }
.mock-fv-stop p { font-size: 0.66rem; color: var(--green); font-weight: 600; margin-top: 2px; }

/* 12. SELFIE PUNCH (Native Webyappy Attendance Card inside Col-6) */
.mock-selfie {
  display: grid;
  grid-template-columns: 174px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: stretch;
}
.mock-selfie-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 15px rgba(35, 34, 64, 0.08);
}
.selfie-card-top {
  background: var(--indigo);
  color: var(--white);
  padding: 0.44rem 0.58rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}
.selfie-card-brand {
  display: flex; align-items: center; gap: 0.35rem;
  font-family: var(--display); font-size: 0.68rem; font-weight: 700;
}
.selfie-card-brand i {
  font-style: normal; width: 17px; height: 17px; border-radius: 4px;
  background: var(--brand); color: var(--white); font-size: 0.5rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.selfie-gps-tag {
  font-family: var(--mono); font-size: 0.51rem; font-weight: 700;
  background: rgba(54, 179, 126, 0.22); color: #83E5B7;
  padding: 0.1rem 0.35rem; border-radius: 999px;
}
.selfie-photo-wrap {
  padding: 0.5rem 0.55rem 0.38rem;
  background: var(--paper);
}
.selfie-photo-wrap img {
  width: 100%;
  aspect-ratio: 1 / 1.02;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(30, 142, 90, 0.35);
}
.selfie-card-actions {
  padding: 0.38rem 0.55rem 0.55rem;
  background: var(--white);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.selfie-punch-btn {
  width: 100%;
  font-family: var(--body);
  font-size: 0.67rem;
  font-weight: 700;
  background: var(--green);
  color: var(--white);
  border: 0;
  border-radius: 999px;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  transition: background 0.18s;
}
.selfie-punch-btn:hover { background: #177348; }
.selfie-punch-btn.is-ready { background: var(--brand); }
.selfie-verified-note { font-size: 0.61rem; font-weight: 700; color: var(--green); }
.mock-selfie-right { display: flex; flex-direction: column; justify-content: space-between; gap: 0.55rem; min-width: 0; }
.selfie-ess-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ── TABLET DEVICE MODE ADAPTATIONS (Inside 446px Tablet Frame) ── */
.stage-viewport[data-device="tablet"] .mock-kanban-cols,
.stage-viewport[data-device="tablet"] .mock-cards-grid,
.stage-viewport[data-device="tablet"] .mock-ta-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stage-viewport[data-device="tablet"] .mock-inspector,
.stage-viewport[data-device="tablet"] .mock-selfie,
.stage-viewport[data-device="tablet"] .mock-fv-layout {
  grid-template-columns: 1fr;
}
.stage-viewport[data-device="tablet"] .mock-ins-list {
  border-right: 0; border-bottom: 1px solid var(--line);
}
.stage-viewport[data-device="tablet"] .mock-selfie-card {
  max-width: 220px; margin: 0 auto; width: 100%;
}
.stage-viewport[data-device="tablet"] .mock-ta-row {
  grid-template-columns: 1fr 1fr; gap: 0.35rem;
}

/* ── MOBILE DEVICE MODE ADAPTATIONS (Inside 310px Phone Frame) ── */
.stage-viewport[data-device="mobile"] .mock-flow-grid,
.stage-viewport[data-device="mobile"] .mock-kanban-cols,
.stage-viewport[data-device="mobile"] .mock-cards-grid,
.stage-viewport[data-device="mobile"] .mock-pipe-cards,
.stage-viewport[data-device="mobile"] .mock-inspector,
.stage-viewport[data-device="mobile"] .mock-fv-layout,
.stage-viewport[data-device="mobile"] .mock-selfie,
.stage-viewport[data-device="mobile"] .mock-bridge,
.stage-viewport[data-device="mobile"] .mock-dash-kpis,
.stage-viewport[data-device="mobile"] .mock-ins-metrics {
  grid-template-columns: 1fr;
}
.stage-viewport[data-device="mobile"] .mock-ins-list {
  border-right: 0; border-bottom: 1px solid var(--line);
}
.stage-viewport[data-device="mobile"] .mock-pipe-steps,
.stage-viewport[data-device="mobile"] .mock-ta-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stage-viewport[data-device="mobile"] .mock-ta-row {
  grid-template-columns: 1fr; gap: 0.3rem;
}
.stage-viewport[data-device="mobile"] .mock-app-item {
  flex-direction: column; align-items: stretch; gap: 0.5rem;
}
.stage-viewport[data-device="mobile"] .mock-app-btn {
  width: 100%; text-align: center;
}
.stage-viewport[data-device="mobile"] .mock-doc-row {
  flex-direction: column; align-items: flex-start; gap: 0.15rem;
}
.stage-viewport[data-device="mobile"] .mock-doc-row strong {
  text-align: left; max-width: 100%;
}
.stage-viewport[data-device="mobile"] .mock-bridge-mid {
  margin: 0 auto; transform: rotate(90deg);
}
.stage-viewport[data-device="mobile"] .mock-selfie-card {
  max-width: 215px; margin: 0 auto; width: 100%;
}

/* ── COMPLETE FUNCTIONAL SCOPE BAND ── */
.ess-band {
  margin-top: 4.5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--line);
}
.ess-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
.ess-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.5rem 1.55rem;
  box-shadow: 0 6px 20px rgba(35, 34, 64, 0.04);
}
.ess-card-tag {
  font-family: var(--mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  display: block;
  margin-bottom: 0.4rem;
}
.ess-card h4 {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.9rem;
  letter-spacing: -0.015em;
}
.ess-card .check-list { gap: 0.52rem; }
.ess-card .check-list li { font-size: 0.84rem; }

/* ── PREV / NEXT + ALL 15 MODULES DIRECTORY ── */
.mod-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 2.5rem;
}
.mod-pager-link {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.25rem 1.5rem; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 0.25rem;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.mod-pager-link:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }
.mod-pager-link.next { text-align: right; align-items: flex-end; }
.mod-pager-dir { font-family: var(--mono); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
.mod-pager-title { font-family: var(--display); font-size: 1.12rem; font-weight: 700; color: var(--ink); }

.modules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mod-dir-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.35rem; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; justify-content: space-between; gap: 0.75rem;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.mod-dir-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }
.mod-dir-card.is-current { border: 2px solid var(--brand); background: #FFFBF8; }
.mod-dir-card h4 { font-family: var(--display); font-weight: 700; font-size: 0.98rem; margin-top: 0.55rem; letter-spacing: -0.01em; }
.mod-dir-card p { font-size: 0.8rem; color: var(--muted); line-height: 1.55; margin-top: 0.3rem; }
.mod-dir-go {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600; color: var(--brand);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.mod-dir-card.is-current .mod-dir-go { color: var(--indigo); }

/* ── BOTTOM PRICING & REQUEST DEMO SECTION (#pricing-demo) ── */
.mod-pricing-section { padding: 92px 0 104px; }
.mod-pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 1.65rem;
}

.mp-card-light {
  background: var(--white);
  border: 2px solid var(--brand);
  border-radius: 22px;
  padding: 2.3rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
  position: relative;
}
.mp-card-light.is-secondary { border: 1px solid var(--line); }
.mp-flag {
  font-family: var(--mono); font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-tint);
  border: 1px solid rgba(242,103,34,0.28);
  padding: 0.32rem 0.78rem; border-radius: 999px; width: fit-content;
  margin-bottom: 0.95rem; display: inline-block;
}
.mp-card-light h3 {
  font-family: var(--display); font-size: 1.45rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.85rem; line-height: 1.2;
}
.mp-price-row { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.mp-amt {
  font-family: var(--display); font-size: clamp(2.35rem, 4vw, 3.1rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink);
}
.mp-amt.brand { color: var(--brand); }
.mp-per { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.mp-bill {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-deep);
  margin-top: 0.5rem;
}
.mp-divider { border-top: 1px dashed var(--line); margin: 1.2rem 0; }
.mp-note { font-size: 0.84rem; color: var(--muted); line-height: 1.6; margin-top: 0.9rem; }
.mp-note b { color: var(--ink); }
.mp-actions { display: grid; gap: 0.65rem; }
.mp-actions .btn { width: 100%; }

.mp-mini-box {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.15rem 1.25rem; margin-top: 0.9rem;
}
.mp-mini-box h4 {
  font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 0.25rem;
}
.mp-mini-box p { font-size: 0.83rem; color: var(--muted); line-height: 1.55; }
.mp-mini-price { font-family: var(--display); font-weight: 800; color: var(--brand); font-size: 1.15rem; }

.mp-card-dark {
  background: var(--indigo);
  color: var(--white);
  border-radius: 22px;
  padding: 2.3rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
  position: relative;
  overflow: hidden;
}
.mp-card-dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 260px at 100% 0%, rgba(242,103,34,0.24), transparent 65%);
}
.mp-card-dark > div { position: relative; }
.mp-flag-dark {
  font-family: var(--mono); font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(242,103,34,0.2); color: var(--accent);
  border: 1px solid rgba(245,139,83,0.42);
  padding: 0.32rem 0.78rem; border-radius: 999px; width: fit-content;
  margin-bottom: 0.95rem; display: inline-block;
}
.mp-card-dark h3 {
  font-family: var(--display); font-size: 1.45rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--white); margin-bottom: 0.85rem; line-height: 1.2;
}
.mp-card-dark .mp-amt { color: var(--white); }
.mp-card-dark .mp-per { color: rgba(255,255,255,0.65); }
.mp-card-dark .mp-bill { color: var(--accent); }
.mp-save-strip {
  margin-top: 1rem;
  background: rgba(242,103,34,0.16);
  border: 1px dashed rgba(245,139,83,0.5);
  border-radius: 10px;
  padding: 0.72rem 0.95rem;
  font-size: 0.81rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.45;
}
.mp-save-strip b { color: var(--accent); }
.mp-dark-list {
  list-style: none; display: flex; flex-direction: column; gap: 0.58rem;
  margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid rgba(255,255,255,0.12);
}
.mp-dark-list li {
  font-size: 0.86rem; color: rgba(255,255,255,0.84); line-height: 1.5;
  display: flex; align-items: flex-start; gap: 0.6rem;
}
.mp-dark-list li::before { content: '✓'; color: var(--accent); font-weight: 800; flex-shrink: 0; }

.demo-closing-bar {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.85rem 2.2rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.demo-closing-copy { max-width: 640px; }
.demo-closing-copy h3 {
  font-family: var(--display); font-size: 1.32rem; font-weight: 800;
  color: var(--ink); letter-spacing: -0.02em; margin-bottom: 0.3rem;
}
.demo-closing-copy h3 em { font-style: normal; color: var(--brand); }
.demo-closing-copy p { font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.demo-closing-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* ── FOOTER ── */
footer { background: var(--ink); padding: 56px 0 0; }
.footer-grid {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 2rem; padding-bottom: 3rem;
}
.footer-brand { display: flex; flex-direction: column; gap: 0.9rem; }
.footer-logo-card {
  background: var(--white); border-radius: 12px; padding: 0.7rem 1rem;
  display: inline-flex; width: fit-content;
}
.footer-logo-card img { height: 34px; width: auto; }
.footer-brand p { font-size: 0.85rem; color: rgba(255,255,255,0.5); max-width: 300px; line-height: 1.65; }
.footer-brand .tagline { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.footer-contact { display: flex; flex-direction: column; gap: 0.55rem; text-align: right; }
.footer-contact a { font-size: 0.86rem; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s; }
.footer-contact a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.1rem 0; text-align: center; }
.footer-bottom p { font-family: var(--mono); font-size: 0.68rem; color: rgba(255,255,255,0.32); letter-spacing: 0.04em; }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .live-dot::before { animation: none; }
  html { scroll-behavior: auto; }
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 980px) {
  .mod-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ps-grid { grid-template-columns: 1fr; }
  .win-panel { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem; }
  .cap-stack { gap: 3.25rem; }
  .cap-row, .cap-row.cap-alt { grid-template-columns: 1fr; gap: 1.75rem; }
  .cap-row.cap-alt .cap-copy { order: 1; }
  .cap-row.cap-alt .cap-visual { order: 2; }
  .mod-pricing-grid, .ess-grid { grid-template-columns: 1fr; }
  .modules-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  body { overflow-x: hidden; }
  section { padding: 64px 0; }
  .mod-hero { padding: 118px 0 54px; }
  .preview-stage { padding: 0.72rem; }
  .stage-toolbar { gap: 0.45rem; }
  .stage-viewport[data-device="mobile"] .app-window {
    width: 100%;
    max-width: 356px;
  }
  /* If a mobile user manually switches to Desktop or Tablet preview, preserve true multi-column layout via smooth horizontal scroll */
  .stage-viewport[data-device="desktop"],
  .stage-viewport[data-device="tablet"] {
    align-items: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }
  .stage-viewport[data-device="desktop"] .app-window { min-width: 580px; }
  .stage-viewport[data-device="tablet"] .app-window { min-width: 446px; width: 446px; }
  .wf-grid { grid-template-columns: 1fr; }
  .mod-pager, .modules-grid { grid-template-columns: 1fr; }
  .mod-pager-link.next { text-align: left; align-items: flex-start; }
  .mp-card-light, .mp-card-dark { padding: 1.7rem; }
  .demo-closing-bar { padding: 1.45rem; }
  .footer-contact { text-align: left; }
}