@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500;600;700&display=swap');
/* ==========================================================================
   Pack Command Center — Design System
   Command Center Software LLC · PackCommandSoftware.com
   Deep navy · dark blue panels · white text · electric blue accent · gold highlight
   One stylesheet powers the whole static site. Edit tokens in :root.
   ========================================================================== */

/* ---- Tokens --------------------------------------------------------------- */
:root {
  /* Tell the browser we're a dark UI so NATIVE controls (select popups,
     date pickers, scrollbars) render dark instead of default white. */
  color-scheme: dark;
  --page:      #060b14;
  --page-2:    #08101d;
  --panel:     #0c1626;
  --panel-2:   #0e1b30;
  --navy:      #0a1626;
  --navy-deep: #071120;

  --line:      rgba(148, 176, 214, 0.14);
  --line-soft: rgba(148, 176, 214, 0.08);
  --line-strong: rgba(148, 176, 214, 0.24);

  --ink:       #eef4fc;
  --ink-2:     #aebfd6;
  --ink-3:     #7186a1;
  --ink-4:     #52627a;

  --blue:      #35a7e0;   /* electric blue — matches logo husky eyes (#3FA9D6) */
  --blue-2:    #5cc2f2;
  --blue-deep: #1c6fb0;
  --cyan:      #22d3ee;
  --gold:      #f5b62b;   /* gold — matches logo wordmark "COMMAND" */
  --gold-2:    #ffce55;
  --logo-navy: #0e1d30;   /* logo icon field navy */
  --green:     #34d399;
  --red:       #f4586b;
  --violet:    #8b93f7;

  --glow-blue: 0 0 0 1px rgba(53,167,224,.35), 0 10px 40px -12px rgba(53,167,224,.45);
  --glow-gold: 0 0 0 1px rgba(240,180,42,.35), 0 10px 40px -12px rgba(240,180,42,.4);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 14px 40px -18px rgba(0,0,0,.7);
  --shadow-3: 0 30px 80px -30px rgba(0,0,0,.8);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --ui:   'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: 'Oswald', 'Space Grotesk', sans-serif; /* condensed display face — same family the route map uses */

  --nav-h: 68px;
  --wrap: 1200px;
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ui);
  background: var(--page);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* Ambient command-center background */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 500px at 82% -8%, rgba(53,167,224,.18), transparent 60%),
    radial-gradient(720px 480px at 6% 4%, rgba(240,180,42,.08), transparent 55%),
    radial-gradient(1000px 700px at 50% 120%, rgba(28,111,176,.14), transparent 60%),
    var(--page);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; opacity: .4; pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 80%);
}

/* ---- Layout --------------------------------------------------------------- */
.wrap { width: min(var(--wrap), 92%); margin-inline: auto; }
.wrap-sm { width: min(780px, 92%); margin-inline: auto; }
.section { padding: 88px 0; position: relative; }
.section-sm { padding: 56px 0; }
.section-tight { padding: 40px 0; }
.center { text-align: center; }
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.flex { display: flex; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.hide { display: none !important; }

/* ---- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; }
.h-xl { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 700; }
.h-lg { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 700; }
.h-md { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.h-sm { font-size: 1.22rem; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: var(--ink-2); line-height: 1.6; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.mono { font-family: var(--mono); }
.gold { color: var(--gold); }
.blue { color: var(--blue-2); }
.nowrap { white-space: nowrap; }
.max-60 { max-width: 60ch; }
.mx-auto { margin-inline: auto; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 22px; } .mt-l { margin-top: 40px; }

.eyebrow {
  font-family: var(--mono);
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue-2); display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, var(--blue), transparent); }
.eyebrow.gold { color: var(--gold-2); }
.eyebrow.gold::before { background: linear-gradient(90deg, var(--gold), transparent); }

.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head .lead { margin-top: 14px; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: .96rem;
  border: 1px solid transparent; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  color: #04121e; box-shadow: 0 8px 26px -10px rgba(53,167,224,.7);
}
.btn-primary:hover { box-shadow: 0 12px 34px -8px rgba(53,167,224,.85); transform: translateY(-1px); }
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #201603; box-shadow: 0 8px 26px -10px rgba(240,180,42,.65); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 12px 34px -8px rgba(240,180,42,.8); }
.btn-ghost { background: rgba(148,176,214,.06); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--line-strong); background: rgba(148,176,214,.1); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { border-color: var(--blue); color: var(--blue-2); }
.btn-lg { padding: 15px 30px; font-size: 1.02rem; }
.btn-sm { padding: 9px 16px; font-size: .86rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row.center { justify-content: center; }

.link-arrow { color: var(--blue-2); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; }
.link-arrow::after { content: "→"; transition: transform .18s ease; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---- Cards ---------------------------------------------------------------- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  position: relative;
  backdrop-filter: blur(8px);
  transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
}
.card.hover:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.card.pad-lg { padding: 34px; }
.card.glass { background: linear-gradient(180deg, rgba(20,40,70,.4), rgba(10,22,40,.3)); }
.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--r-lg);
}

.icn {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(53,167,224,.2), rgba(53,167,224,.06));
  border: 1px solid rgba(53,167,224,.3); color: var(--blue-2);
  font-size: 1.25rem; margin-bottom: 16px;
}
.icn.gold { background: linear-gradient(180deg, rgba(240,180,42,.2), rgba(240,180,42,.05)); border-color: rgba(240,180,42,.3); color: var(--gold-2); }
.card h3 { font-size: 1.14rem; margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: .95rem; }

/* ---- Badges / status ------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-2); background: rgba(148,176,214,.06); white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.available { color: var(--green); border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.1); }
.badge.beta      { color: var(--blue-2); border-color: rgba(53,167,224,.35); background: rgba(53,167,224,.1); }
.badge.dev       { color: var(--gold-2); border-color: rgba(240,180,42,.35); background: rgba(240,180,42,.1); }
.badge.planned   { color: var(--violet); border-color: rgba(139,147,247,.35); background: rgba(139,147,247,.1); }
.badge.soon      { color: var(--ink-2); }
.badge.core      { color: var(--blue-2); border-color: rgba(53,167,224,.35); }
.badge.addon     { color: var(--gold-2); border-color: rgba(240,180,42,.35); background: rgba(240,180,42,.08); }

.pill-note {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: rgba(240,180,42,.08); border: 1px solid rgba(240,180,42,.28);
  color: var(--gold-2); font-size: .8rem; font-weight: 600;
}

.sample-tag {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px; color: var(--gold-2);
  background: rgba(240,180,42,.12); border: 1px solid rgba(240,180,42,.3);
}

/* ---- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, backdrop-filter .25s;
}
.site-header.scrolled {
  background: rgba(6,11,20,.82); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav { display: flex; align-items: center; gap: 24px; height: 100%; }
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }
.brand .wm { font-family: 'Anton', var(--ui); font-weight: 400; font-size: 1.24rem; letter-spacing: .045em; line-height: .9; text-transform: uppercase; }
.brand .wm b { color: var(--gold); font-weight: 400; }
.brand .wm small { display: block; font-family: var(--mono); font-size: .54rem; letter-spacing: .26em; color: var(--ink-3); text-transform: uppercase; margin-top: 5px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links a {
  padding: 8px 13px; border-radius: 9px; font-size: .92rem; color: var(--ink-2); font-weight: 500;
  transition: color .15s, background .15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: rgba(148,176,214,.08); }
.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-cta .signin { color: var(--ink-2); font-weight: 600; font-size: .92rem; padding: 8px 12px; }
.nav-cta .signin:hover { color: var(--ink); }
.nav-toggle {
  display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 10px;
  background: rgba(148,176,214,.08); border: 1px solid var(--line); color: var(--ink);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-toggle span { width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: .2s; }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 99; background: rgba(6,11,20,.97);
  backdrop-filter: blur(16px); padding: 20px 6%; display: none; flex-direction: column; gap: 4px;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 14px 12px; border-radius: 10px; font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.mobile-menu a:hover { background: rgba(148,176,214,.07); }
.mobile-menu .btn { margin-top: 8px; }

/* ---- Hero ----------------------------------------------------------------- */
.hero { padding: 64px 0 40px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero h1 { margin: 18px 0 20px; }
.hero .lead { max-width: 34ch; }
.hero .btn-row { margin-top: 30px; }
.hero-note { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 18px; color: var(--ink-3); font-size: .84rem; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note .tick { color: var(--green); }

/* ---- Dashboard mockup ----------------------------------------------------- */
.mock {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(180deg, var(--panel), var(--navy-deep));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-3), var(--glow-blue);
}
.mock-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.2); }
.mock-bar .dots { display: flex; gap: 6px; }
.mock-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.mock-bar .addr { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); margin-left: 8px; }
.mock-body { padding: 18px; display: grid; gap: 14px; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi {
  background: rgba(148,176,214,.05); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
}
.kpi .lbl { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.kpi .val { font-size: 1.35rem; font-weight: 700; margin-top: 6px; letter-spacing: -.02em; }
.kpi .chg { font-size: .74rem; font-weight: 600; margin-top: 3px; }
.kpi .chg.up { color: var(--green); } .kpi .chg.down { color: var(--red); }
.mock-2col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.chart-card { background: rgba(148,176,214,.05); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.chart-card .ttl { font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: 12px; display: flex; justify-content: space-between; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; }
.bars .bar { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--blue-2), rgba(53,167,224,.15)); min-height: 8px; position: relative; }
.bars .bar.gold { background: linear-gradient(180deg, var(--gold-2), rgba(240,180,42,.15)); }
.spark { height: 60px; width: 100%; }
.mini-list { display: flex; flex-direction: column; gap: 9px; }
.mini-row { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.mini-row:last-child { border-bottom: 0; }
.mini-row .nm { color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.mini-row .nm i { width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }
.mini-row .amt { font-family: var(--mono); font-weight: 600; }
.alert-row { display: flex; gap: 10px; align-items: flex-start; font-size: .78rem; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.alert-row:last-child { border: 0; }
.alert-row .ai { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.alert-row .ai.r { background: var(--red); } .alert-row .ai.g { background: var(--gold); } .alert-row .ai.b { background: var(--blue); }
/* Hero mock in "full app" mode: a feature-nav sidebar + the dashboard, so the
   homepage screenshot shows off the whole product like the feature-page mockups. */
.mock-app { grid-template-columns: 156px 1fr; align-items: start; gap: 16px; }
.mock-side { display: flex; flex-direction: column; gap: 3px; padding-right: 14px; border-right: 1px solid var(--line); }
.mock-brand { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink); margin-bottom: 8px; }
.mock-brand b { font-weight: 700; }
.mock-logo { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--blue), var(--blue-2)); flex: none; }
.mock-nav { font-size: .76rem; color: var(--ink-3); padding: 6px 9px; border-radius: 7px; white-space: nowrap; }
.mock-nav.on { background: color-mix(in srgb, var(--blue) 24%, transparent); color: var(--ink); font-weight: 600; }
.mock-main { display: grid; gap: 12px; min-width: 0; }
.mock-app .kpi-row { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mock-app .kpi { padding: 10px; }
.mock-app .kpi .val { font-size: 1.02rem; margin-top: 3px; }
.mock-app .kpi .chg { font-size: .64rem; }
.mock-app .chart-card { padding: 12px; }
.mock-app .bars { height: 66px; }

/* progress / meters used across previews */
.meter { height: 7px; border-radius: 999px; background: rgba(148,176,214,.12); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--blue-2)); }
.meter.gold > i { background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.meter.green > i { background: linear-gradient(90deg, #1f9d6b, var(--green)); }

/* ---- Logo / integration strip -------------------------------------------- */
.logo-strip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.logo-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px;
  background: rgba(148,176,214,.05); border: 1px solid var(--line); font-weight: 600; font-size: .9rem; color: var(--ink-2);
}
.logo-chip .mk { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-family: var(--mono); font-size: .7rem; font-weight: 700; color: #04121e; background: var(--blue-2); }
.logo-chip small { font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---- Steps ---------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 22px; }
.step { position: relative; padding-left: 66px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-family: var(--mono); font-weight: 700; color: var(--blue-2);
  background: rgba(53,167,224,.1); border: 1px solid rgba(53,167,224,.3);
}
.step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.step p { color: var(--ink-2); font-size: .94rem; }

/* ---- Feature list --------------------------------------------------------- */
.check-list { display: grid; gap: 11px; }
.check-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-2); font-size: .95rem; }
.check-list li::before { content: "✓"; color: var(--blue-2); font-weight: 700; flex-shrink: 0; }
.check-list.gold li::before { color: var(--gold-2); }

/* ---- Pricing -------------------------------------------------------------- */
.billing-toggle { display: inline-flex; align-items: center; gap: 12px; margin: 0 auto 8px; font-weight: 600; }
.switch { width: 52px; height: 30px; border-radius: 999px; background: rgba(148,176,214,.14); border: 1px solid var(--line); position: relative; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-2); transition: transform .2s; }
.switch.on { background: rgba(53,167,224,.3); }
.switch.on::after { transform: translateX(22px); }
.save-tag { color: var(--green); font-size: .82rem; font-family: var(--mono); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card { display: flex; flex-direction: column; }
.price-card.featured { border-color: rgba(53,167,224,.5); box-shadow: var(--glow-blue); }
.price-card .tier { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-2); }
.price-card.featured .tier { color: var(--gold-2); }
.price-card .amt { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; margin: 10px 0 2px; }
.price-card .amt small { font-size: .9rem; font-weight: 500; color: var(--ink-3); }
.price-card .desc { color: var(--ink-2); font-size: .9rem; min-height: 42px; }
.price-card .check-list { margin: 20px 0 24px; }
.price-card .btn { margin-top: auto; }
.ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }

/* ---- Tables --------------------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th, .tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.tbl th { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.tbl td { color: var(--ink-2); }
.tbl tr:hover td { background: rgba(148,176,214,.03); }
.tbl .num { font-family: var(--mono); text-align: right; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }

/* ---- Forms ---------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.field label .req { color: var(--gold); }
.field input, .field select, .field textarea {
  background: rgba(6,12,22,.7); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; color: var(--ink); font-size: .95rem; transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(53,167,224,.16);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--ink-2); }
.checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); flex-shrink: 0; }
.form-note { font-size: .8rem; color: var(--ink-3); }
.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-select label {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(148,176,214,.05);
  font-size: .84rem; cursor: pointer; transition: .15s; user-select: none;
}
.chip-select input { display: none; }
.chip-select input:checked + span, .chip-select label:has(input:checked) { }
.chip-select label:has(input:checked) { border-color: var(--blue); background: rgba(53,167,224,.14); color: var(--blue-2); }

/* ---- Notices -------------------------------------------------------------- */
.notice {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r);
  background: rgba(53,167,224,.07); border: 1px solid rgba(53,167,224,.28); color: var(--ink-2); font-size: .9rem;
}
.notice.gold { background: rgba(240,180,42,.07); border-color: rgba(240,180,42,.28); }
.notice .ni { font-size: 1.1rem; line-height: 1.4; }
.notice b { color: var(--ink); }

/* ---- Preview banner (portal/admin previews) ------------------------------ */
.preview-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; font-size: .82rem; font-weight: 600;
  background: linear-gradient(90deg, rgba(240,180,42,.14), rgba(53,167,224,.12));
  border-bottom: 1px solid var(--line); color: var(--gold-2); text-align: center;
}
.preview-banner a { color: var(--blue-2); text-decoration: underline; }

/* ---- FAQ / accordion ------------------------------------------------------ */
.faq-item { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; background: rgba(148,176,214,.03); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; color: var(--ink); padding: 18px 20px; font-size: 1rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-q .pm { color: var(--blue-2); font-size: 1.3rem; transition: transform .2s; flex-shrink: 0; }
.faq-item.open .faq-q .pm { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-a > div { padding: 0 20px 18px; color: var(--ink-2); font-size: .94rem; }
.faq-item.open .faq-a { max-height: 320px; }

/* ---- CTA band ------------------------------------------------------------- */
.cta-band {
  border-radius: var(--r-xl); padding: 56px 40px; text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(150deg, rgba(53,167,224,.16), rgba(10,22,40,.6) 55%, rgba(240,180,42,.1));
  border: 1px solid var(--line-strong);
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% -20%, rgba(53,167,224,.25), transparent 60%); pointer-events: none; }
.cta-band > * { position: relative; }

/* ---- Footer --------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: 64px 0 30px; margin-top: 40px; background: linear-gradient(180deg, transparent, rgba(7,17,32,.6)); }
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.footer-brand p { color: var(--ink-3); font-size: .88rem; margin-top: 14px; max-width: 34ch; }
.footer-col h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.footer-col a { display: block; padding: 5px 0; color: var(--ink-2); font-size: .9rem; }
.footer-col a:hover { color: var(--blue-2); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-soft); color: var(--ink-3); font-size: .82rem; }
.footer-bottom .legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- Page hero (interior pages) ------------------------------------------ */
.page-hero { padding: 64px 0 30px; text-align: center; }
.page-hero .lead { max-width: 60ch; margin: 16px auto 0; }
.breadcrumb { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--blue-2); }

/* ---- Filter bar ----------------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 34px; }
.filter-bar button {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(148,176,214,.05);
  color: var(--ink-2); font-size: .86rem; font-weight: 600; transition: .15s;
}
.filter-bar button:hover { border-color: var(--line-strong); color: var(--ink); }
.filter-bar button.active { background: rgba(53,167,224,.16); border-color: var(--blue); color: var(--blue-2); }

/* ---- App preview shell ---------------------------------------------------- */
/* TAPS-style app frame: the sidebar stays put, ONLY the content pane scrolls */
.app-shell { display: grid; grid-template-columns: 248px 1fr; height: 100vh; }
.app-side { border-right: 1px solid var(--line); background: linear-gradient(180deg, var(--navy), var(--navy-deep)); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; }
.org-switch { background: rgba(6,12,22,.6); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.org-switch .lbl { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.org-switch select { width: 100%; background: none; border: 0; color: var(--ink); font-weight: 700; font-size: .98rem; margin-top: 4px; }
.side-group { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); padding: 12px 12px 6px; }
.side-link { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--ink-2); font-size: .92rem; font-weight: 500; cursor: pointer; }
.side-link:hover { background: rgba(148,176,214,.06); color: var(--ink); }
.side-link.active { background: rgba(53,167,224,.14); color: var(--blue-2); }
.side-link .si { width: 18px; text-align: center; }
.side-link .up { margin-left: auto; font-family: var(--mono); font-size: .55rem; letter-spacing: .06em; color: var(--gold-2); border: 1px solid rgba(240,180,42,.3); border-radius: 5px; padding: 1px 5px; }
.app-main { padding: 22px 26px; overflow-x: hidden; overflow-y: auto; height: 100%; }
/* TAPS-style centered content column: data sits in a centered column with
   generous breathing room on the sides (TAPS uses 1060px; Nate wants more air). */
.app-main > .app-topbar, .app-main > .app-view { max-width: 960px; margin-left: auto; margin-right: auto; }
/* The Route Map is a full application — give it the whole pane */
.app-main > #view-routemap { max-width: none; }
/* Expenses is a TAPS-style two-column layout PLUS a module panel — it needs the
   width TAPS gives it (1060px of columns) or the columns get crushed. */
.app-main > #view-expenses, .app-main > #view-inventory, .app-main > #view-pricing { max-width: 1290px; }
/* Let the 1fr tracks shrink below their content's intrinsic width so the history
   table scrolls inside its column instead of stretching/clipping the grid. */
#view-expenses .g2 > * { min-width: 0; }
@media (max-width: 1200px) { #view-expenses .g2 { grid-template-columns: 1fr; } }
.app-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.app-topbar .sp { margin-left: auto; }
.branch-select, .date-select { display: inline-flex; align-items: center; gap: 8px; background: rgba(148,176,214,.05); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: .86rem; color: var(--ink-2); }
.branch-select select, .date-select select { background: none; border: 0; color: var(--ink); font-weight: 600; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--violet)); display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: #fff; }
.widget-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.widget-grid > * { min-width: 0; }
.w4 { grid-column: span 4; } .w6 { grid-column: span 6; } .w8 { grid-column: span 8; } .w12 { grid-column: span 12; }
.widget { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; position: relative; }
.widget .wh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.widget .wh h4 { font-size: .82rem; color: var(--ink-2); font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.widget .grab { color: var(--ink-4); cursor: grab; }
/* Customizable dashboard: edit mode */
.dash-editing .dashw { outline: 1px dashed rgba(245,182,43,.5); cursor: grab; }
.dash-editing .dashw:active { cursor: grabbing; }
.dashw.dropt { outline: 2px solid var(--gold); }
.wctl { display: flex; gap: 4px; flex-shrink: 0; }
.wctl button { background: none; border: 1px solid var(--line); color: var(--ink-3); border-radius: 5px; padding: 2px 8px; cursor: pointer; font-size: .7rem; line-height: 1.4; }
.wctl button:hover { color: var(--gold); border-color: var(--gold); }
.add-widget { border: 1px dashed var(--line-strong); border-radius: var(--r); display: grid; place-items: center; color: var(--ink-3); font-weight: 600; min-height: 120px; cursor: pointer; }
.add-widget:hover { border-color: var(--blue); color: var(--blue-2); }

/* Native select popups: dark options on every dropdown site-wide */
select option, select optgroup { background-color: var(--panel-2); color: var(--ink); }

/* ---- Module left control panel (TAPS-style, stands out + fills the column) */
.mod-panel {
  width: 216px; flex-shrink: 0; padding: 16px 14px;
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  border: 1px solid var(--line-strong); border-radius: var(--r);
  /* Sticks with you while the content pane scrolls */
  position: sticky; top: 0; align-self: flex-start;
  max-height: calc(100vh - 60px); overflow-y: auto; min-height: 320px;
}

/* ---- App: views, modal, toast, empty states ------------------------------ */
.app-view { display: none; }
.app-view.active { display: block; }
.empty-state { text-align: center; padding: 56px 20px; color: var(--ink-3); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.empty-state .icn { margin: 0 auto 14px; }
.empty-state h3 { color: var(--ink); margin-bottom: 6px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(3,7,13,.72); backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal-card { width: min(540px, 100%); max-height: 90vh; overflow-y: auto; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-3); }
.modal-card .modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.modal-card .modal-head h3 { font-size: 1.2rem; }
.modal-close { background: none; border: 0; color: var(--ink-3); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.modal-close:hover { color: var(--ink); }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 20px; z-index: 300; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: var(--shadow-2); font-size: .9rem; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.icon-btn { background: rgba(148,176,214,.06); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; color: var(--ink-2); font-size: .8rem; cursor: pointer; }
.icon-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.icon-btn.danger:hover { color: var(--red); border-color: rgba(244,88,107,.4); }
.auth-tabs { display: flex; gap: 4px; background: rgba(6,12,22,.6); border: 1px solid var(--line); border-radius: 10px; padding: 4px; margin-bottom: 20px; }
.auth-tabs button { flex: 1; padding: 9px; border: 0; background: none; color: var(--ink-2); font-weight: 600; border-radius: 7px; cursor: pointer; }
.auth-tabs button.active { background: rgba(53,167,224,.16); color: var(--blue-2); }

/* ---- Auth ----------------------------------------------------------------- */
.auth-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--nav-h)); }
.auth-visual { padding: 60px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(150deg, rgba(53,167,224,.12), rgba(10,22,40,.5)); border-right: 1px solid var(--line); position: relative; overflow: hidden; }
.auth-form-side { padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.auth-card { width: min(420px, 100%); margin-inline: auto; }

/* ---- Reveal on scroll ----------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .signin, .nav-cta .btn:not(.keep) { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .app-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100vh; }
  /* TAPS-style mobile nav: the sidebar becomes a horizontal scroll strip */
  .app-side { flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; gap: 4px; max-height: none; z-index: 90; }
  .app-side .brand, .app-side .org-switch, .app-side .side-group { display: none; }
  .app-side .side-link { white-space: nowrap; flex-shrink: 0; padding: 8px 12px; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-visual { display: none; }
}
@media (max-width: 760px) {
  .section { padding: 60px 0; }
  .g2, .g3, .g4, .price-grid, .form-grid, .mock-2col, .kpi-row { grid-template-columns: 1fr; }
  .mock-app { grid-template-columns: 1fr; } .mock-side { display: none; }
  .mock-app .kpi-row { grid-template-columns: 1fr 1fr; }
  .g4.keep-2, .g3.keep-2 { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .cta-band { padding: 40px 22px; }
  .widget-grid { grid-template-columns: 1fr; }
  .w4, .w6, .w8, .w12 { grid-column: span 1; }
  .app-main { padding: 16px 14px; }
  .auth-form-side { padding: 32px 18px; }
  .mod-panel { width: 100% !important; position: static; max-height: none; min-height: 0; }
  .modal-card { padding: 18px; }
  /* Compact header so brand + CTA fit a phone screen */
  .site-header .wm small { display: none; }
  .site-header .wm { font-size: .82rem; }
  .nav-cta .btn { padding: 8px 12px; font-size: .78rem; }
  .w4, .w6, .w8, .w12 { grid-column: 1 / -1; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .auth-visual, .auth-form-side { padding: 36px 24px; }
}
@media (max-width: 560px) {
  /* On phones the Sign In / Request-a-Demo CTAs live inside the hamburger menu,
     so drop the header CTA cluster — otherwise brand + button + toggle overflow
     the bar and force a horizontal scroll. The hamburger keeps its right edge. */
  .site-header .nav-cta { display: none; }
  .site-header .wrap { width: 94%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Employee view (role or View-as): hide manager-only configuration */
.emp-view .mgr-only { display: none !important; }

/* Gold accent pass (app only): headings, table headers and panel titles echo the
   brand gold, the way TAPS spreads its accent through section labels. */
.app-shell .tbl th { color: var(--gold-2); }
.app-shell .widget .wh h4 { color: var(--gold-2); }
.app-shell .h-sm { color: var(--gold-2); }
.app-shell .mod-panel > .dim.mono { color: var(--gold-2); }

/* ---- App engagement pass (Option C — Inter everywhere): heavy weights carry the
   headings and numbers; one family across body, tables and labels. ---- */
.app-shell #view-title { font-family: var(--display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.app-shell .h-sm { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; }
.app-shell .kpi .val { font-family: var(--display); font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.app-shell .mini-row .amt { font-family: var(--display); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.app-shell .widget { transition: border-color .2s ease, box-shadow .2s ease; }
.app-shell .widget:hover { border-color: rgba(245,182,43,.4); box-shadow: 0 10px 30px -18px rgba(245,182,43,.3); }

/* ---- No sideways scrolling: a table too wide for its box first goes DENSE
   (smaller type, tighter padding, wrapping cells — all columns stay visible,
   TAPS-style); only if even dense overflows does it stack into labeled rows.
   Both classes are applied by fitTables() in app.html by measuring. ---- */
.tbl-wrap.dense .tbl { font-size: .8rem; }
.tbl-wrap.dense .tbl th { font-size: .62rem; letter-spacing: .05em; }
.tbl-wrap.dense .tbl th, .tbl-wrap.dense .tbl td { padding: 8px 9px; white-space: normal !important; overflow-wrap: anywhere; }
.tbl-wrap.dense .tbl .icon-btn { padding: 3px 8px; font-size: .7rem; }
.tbl-wrap.stacked { overflow-x: visible; }
.tbl-wrap.stacked .tbl { min-width: 0 !important; }
.tbl-wrap.stacked .tbl thead { display: none; }
.tbl-wrap.stacked .tbl, .tbl-wrap.stacked .tbl tbody, .tbl-wrap.stacked .tbl tr, .tbl-wrap.stacked .tbl td { display: block; width: 100%; }
.tbl-wrap.stacked .tbl tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tbl-wrap.stacked .tbl tr:last-child { border-bottom: 0; }
.tbl-wrap.stacked .tbl tr:hover td { background: none; }
.tbl-wrap.stacked .tbl td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border-bottom: 0; padding: 3px 0; text-align: right; }
.tbl-wrap.stacked .tbl td[data-th]::before { content: attr(data-th); font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); flex-shrink: 0; text-align: left; }
.tbl-wrap.stacked .tbl .row-actions { width: auto; }
.tbl-wrap.stacked .tbl td:first-child { display: block; text-align: left; margin-bottom: 4px; }
.tbl-wrap.stacked .tbl td:first-child::before { display: none; }

/* ---- Account pill: obviously clickable, holds the profile photo ---- */
.acct-btn { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; background: rgba(148,176,214,.07); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; color: var(--ink); font: inherit; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.acct-btn:hover { border-color: var(--gold); background: rgba(245,182,43,.09); box-shadow: 0 0 0 3px rgba(245,182,43,.14); }
.acct-name { font-size: .85rem; font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-caret { color: var(--gold-2); font-size: .7rem; }
.avatar { overflow: hidden; background-position: center; background-size: cover; flex-shrink: 0; }
@media (max-width: 760px) { .acct-name { display: none; } .acct-btn { padding: 4px 10px 4px 4px; } }


/* ---- Merged from Alex's build (language picker + marketing additions) ---- */
.ic-lg { width: 24px; height: 24px; }

/* ---- Image placeholders (drop real photos / screenshots in later) ---------
   Usage: <div class="img-ph" data-ratio="16x9" data-kind="Photo"><span class="lbl">Pest technician spraying a baseboard</span></div>
   To go live, replace the element with <img src="uploads/…" alt="…"> at the same ratio. */
.img-ph { position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1.5px dashed var(--line-strong); border-radius: 14px; overflow: hidden; color: var(--ink-3);
  background: linear-gradient(135deg, rgba(148,176,214,.06), rgba(148,176,214,.02)); padding: 22px; }
.img-ph .lbl { max-width: 82%; font-size: .82rem; line-height: 1.45; }
.img-ph::before { content: attr(data-kind); position: absolute; top: 10px; left: 10px; font-family: var(--mono);
  font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; background: rgba(6,11,20,.4); }
.img-ph::after { content: "▣"; position: absolute; opacity: .12; font-size: 4rem; pointer-events: none; }
.img-ph .lbl { position: relative; z-index: 1; }
.img-ph[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.img-ph[data-ratio="4x3"]  { aspect-ratio: 4 / 3; }
.img-ph[data-ratio="3x2"]  { aspect-ratio: 3 / 2; }
.img-ph[data-ratio="1x1"]  { aspect-ratio: 1 / 1; }
.img-ph[data-ratio="21x9"] { aspect-ratio: 21 / 9; }

/* ---- Themed app mockup (a self-contained "screenshot" of the product) ------
   PCC.appMock({accent,accent2,name,...}) fills a slot; --shot drives the brand
   color so the SAME layout previews in any customer's theme. */
.appshot { --shot: #7c5cff; --shot2: #2dd4bf; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: #0b1220; box-shadow: 0 22px 50px -26px rgba(0,0,0,.7);
  font-size: 11px; line-height: 1.3; }
.appshot .as-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #0e1626; border-bottom: 1px solid var(--line); }
.appshot .as-dots { display: flex; gap: 4px; }
.appshot .as-dots i { width: 8px; height: 8px; border-radius: 50%; background: #2a3852; }
.appshot .as-addr { font-family: var(--mono); font-size: 9px; color: var(--ink-4); background: #0b1220; border-radius: 5px; padding: 3px 8px; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.appshot .as-body { display: grid; grid-template-columns: 98px 1fr; min-height: 160px; }
.appshot .as-side { background: #0e1626; border-right: 1px solid var(--line); padding: 8px 6px; display: flex; flex-direction: column; gap: 3px; }
.appshot .as-brand { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 2px; }
.appshot .as-logo { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, var(--shot), var(--shot2)); flex: none; }
.appshot .as-name { font-weight: 700; font-size: 9.5px; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.appshot .as-nav { padding: 4px 7px; border-radius: 6px; color: var(--ink-3); font-size: 9.5px; }
.appshot .as-nav.on { background: color-mix(in srgb, var(--shot) 26%, transparent); color: #fff; }
.appshot .as-main { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.appshot .as-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.appshot .as-kpi { background: #0e1626; border: 1px solid var(--line); border-radius: 8px; padding: 7px; }
.appshot .as-kpi .l { display: block; color: var(--ink-4); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.appshot .as-kpi .v { font-weight: 700; font-size: 14px; color: #fff; }
.appshot .as-kpi:first-child .v { color: var(--shot2); }
.appshot .as-card { background: #0e1626; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.appshot .as-ch { font-weight: 600; color: var(--ink-2); margin-bottom: 6px; font-size: 9.5px; }
.appshot .as-row { display: flex; justify-content: space-between; padding: 3px 0; border-top: 1px solid var(--line-soft); color: var(--ink-2); }
.appshot .as-row:first-of-type { border-top: 0; }
.appshot .as-row b { color: var(--shot2); }
.appshot .as-bars { display: flex; align-items: flex-end; gap: 5px; height: 34px; margin-top: 4px; }
.appshot .as-bars span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--shot), var(--shot2)); opacity: .85; }
/* CRM view sub-elements */
.appshot .as-toolbar { display: flex; align-items: center; justify-content: space-between; }
.appshot .as-h { font-weight: 700; font-size: 11px; color: var(--ink); }
.appshot .as-search { font-size: 8.5px; color: var(--ink-4); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; }
.appshot .as-crow { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-top: 1px solid var(--line-soft); }
.appshot .as-crow:first-child { border-top: 0; }
.appshot .as-av { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--shot), var(--shot2)); flex: none; }
.appshot .as-cn { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.appshot .as-cn b { font-size: 9.5px; color: var(--ink); }
.appshot .as-cn small { font-size: 8px; color: var(--ink-4); }
.appshot .as-tag { font-size: 8px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--shot) 22%, transparent); color: var(--ink-2); flex: none; }
/* Light ("white background, branded") theme */
.appshot.light { background: #ffffff; border-color: #e6eaf1; box-shadow: 0 22px 50px -26px rgba(20,32,60,.28); }
.appshot.light .as-bar { background: #f3f6fb; border-bottom-color: #e6eaf1; }
.appshot.light .as-dots i { background: #cdd5e2; }
.appshot.light .as-addr { background: #fff; color: #97a1b3; border: 1px solid #e6eaf1; }
.appshot.light .as-side { background: #f6f8fc; border-right-color: #e6eaf1; }
.appshot.light .as-name, .appshot.light .as-h, .appshot.light .as-kpi .v, .appshot.light .as-cn b { color: #1b2334; }
.appshot.light .as-nav { color: #5b6678; }
.appshot.light .as-nav.on { background: var(--shot); color: #fff; }
.appshot.light .as-kpi { background: #f6f8fc; border-color: #e9edf4; }
.appshot.light .as-kpi:first-child .v { color: var(--shot); }
.appshot.light .as-kpi .l, .appshot.light .as-cn small, .appshot.light .as-search { color: #97a1b3; }
.appshot.light .as-card { background: #fff; border-color: #e9edf4; }
.appshot.light .as-ch { color: #3a4457; }
.appshot.light .as-row { color: #414c5f; border-top-color: #eef1f7; }
.appshot.light .as-row b { color: var(--shot); }
.appshot.light .as-crow { border-top-color: #eef1f7; }
.appshot.light .as-search { border-color: #e6eaf1; }
.appshot.light .as-tag { background: color-mix(in srgb, var(--shot) 16%, #fff); color: #46515f; }
/* feature-rich extras: 2-up card grid, low-stock alert, goal meter, upsell chips */
.appshot .as-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.appshot .as-row.alert span, .appshot .as-row.alert b { color: var(--red); }
.appshot .as-goal { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 3px 0 5px; }
.appshot .as-goal i { display: block; height: 100%; background: linear-gradient(90deg, var(--shot), var(--shot2)); }
.appshot .as-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.appshot .as-chips span { font-size: 8px; padding: 2px 7px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--shot) 50%, var(--line)); color: var(--shot2); }
.appshot.light .as-goal { background: #e9edf4; }
.appshot.light .as-row.alert span, .appshot.light .as-row.alert b { color: #d64545; }
.appshot.light .as-chips span { color: var(--shot); border-color: color-mix(in srgb, var(--shot) 45%, #e6eaf1); }
/* Plum ("dark plum, branded") theme */
.appshot.plum { background: #160f24; border-color: #362a4d; box-shadow: 0 22px 50px -26px rgba(24,10,44,.62); }
.appshot.plum .as-bar { background: #1e1533; border-bottom-color: #362a4d; }
.appshot.plum .as-dots i { background: #4a3a66; }
.appshot.plum .as-addr { background: #160f24; color: #9c8bbf; border: 1px solid #362a4d; }
.appshot.plum .as-side { background: #1e1533; border-right-color: #362a4d; }
.appshot.plum .as-name, .appshot.plum .as-h, .appshot.plum .as-kpi .v, .appshot.plum .as-cn b { color: #f3eefc; }
.appshot.plum .as-nav { color: #b3a3d1; }
.appshot.plum .as-kpi, .appshot.plum .as-card { background: #1e1533; border-color: #362a4d; }
.appshot.plum .as-kpi .l, .appshot.plum .as-cn small, .appshot.plum .as-search { color: #9c8bbf; }
.appshot.plum .as-ch { color: #cbbde6; }
.appshot.plum .as-row { color: #cbbde6; border-top-color: #2a1f40; }
.appshot.plum .as-crow { border-top-color: #2a1f40; }
.appshot.plum .as-goal { background: #2a1f40; }
.appshot.plum .as-search { border-color: #362a4d; }
/* Accent-tinted variants to preview "the same system in different brand themes" */
.img-ph.t-indigo { border-color: rgba(124,92,255,.5); background: linear-gradient(135deg, rgba(124,92,255,.12), rgba(124,92,255,.03)); }
.img-ph.t-teal   { border-color: rgba(45,212,191,.5); background: linear-gradient(135deg, rgba(45,212,191,.12), rgba(45,212,191,.03)); }
.img-ph.t-gold   { border-color: rgba(245,182,43,.5); background: linear-gradient(135deg, rgba(245,182,43,.12), rgba(245,182,43,.03)); }
.img-ph.t-rose   { border-color: rgba(225,29,72,.45); background: linear-gradient(135deg, rgba(225,29,72,.12), rgba(225,29,72,.03)); }
.img-ph.t-forest { border-color: rgba(34,197,94,.45); background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(34,197,94,.03)); }

/* ---- Language switcher ---------------------------------------------------- */
.lang-switch { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }
.lang-switch .ic { width: 15px; height: 15px; opacity: .8; flex: none; }
.lang-select {
  appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--line);
  color: var(--ink-2); font: inherit; font-size: .88rem; font-weight: 600; padding: 6px 22px 6px 7px; border-radius: 9px;
  cursor: pointer; max-width: 112px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394b0d6' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 12px;
}
.lang-select:hover { color: var(--ink); border-color: var(--line-strong, var(--line)); }
.lang-select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.lang-select option { background: #0b1424; color: #e8eefb; }
.lang-switch.block { width: 100%; justify-content: flex-start; padding: 8px 0; }
.lang-switch.block .lang-select { flex: 1; }
[dir="rtl"] body, body.rtl { direction: rtl; }
@media (max-width: 1100px) { .nav-cta .lang-switch { display: none; } }