/* StaffSteady — marketing site styles.
 *
 * The :root token values below are COPIED from public/theme.css (its :root
 * block). The two sites deploy as separate Render services from separate
 * directories and this project has no build step, so the tokens cannot be
 * shared. Keep the values identical to theme.css — the brand must match the
 * product exactly. The layout rules below are this site's own: a marketing
 * page and a dense admin UI want different rules, and those must NOT match.
 */
/* Self-hosted, not @import'd from fonts.googleapis.com — an @import there
 * fires on first paint, before the analytics consent banner is answered,
 * which would send the visitor's IP to Google on every visit regardless of
 * consent. Both files below are the same "latin" subset Google's own CSS API
 * serves (variable fonts — one file covers the whole weight range used here),
 * fetched once and committed as static assets; no build step, no dependency. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/plusjakartasans-latin.woff2') format('woff2');
}

:root {
  /* ---- Brand / accent (calm indigo) ---------------------------------- */
  --primary-50:  #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-500: #6366f1;
  --primary:     #4f46e5;   /* primary action */
  --primary-600: #4f46e5;
  --primary-700: #4338ca;   /* hover / pressed */
  --primary-ink: #ffffff;   /* text on primary */

  /* ---- Neutrals (cool slate) ---------------------------------------- */
  --bg:        #f6f7f9;     /* app background */
  --bg-2:      #eef1f5;     /* subtle inset / striping */
  --surface:   #ffffff;     /* cards, inputs */
  --surface-2: #fbfcfd;     /* raised header / secondary surface */
  --border:    #e3e7ee;     /* hairlines */
  --border-2:  #d3dae4;     /* stronger dividers / control borders */

  --text:        #0f172a;   /* primary text (slate-900) */
  --text-2:      #475569;   /* secondary text (slate-600, AA on white) */
  --text-muted:  #5b6675;   /* tertiary / meta (AA on both bg and surface) */
  --text-on-dark:#f8fafc;

  /* ---- Semantic states ---------------------------------------------- */
  --success:    #0f7a52;  --success-bg:#e7f4ee;
  --warning:    #b45309;  --warning-bg:#fdf3e6;
  --danger:     #b91c1c;  --danger-bg: #fdeceb;
  --info:       #2563eb;  --info-bg:   #e8f0fe;
  --accent-2:    #0d9488;  /* calm teal — sparse secondary accent */
  --accent-2-50: #ccfbf1;
  --accent-2-700:#0f766e;

  /* ---- Demand levels (2026 tidy-up) — quiet recedes, busy pops -------- */
  --quiet:      #7c8194;  --quiet-bg: #f4f5f8;
  --busy:       #c2780b;  --busy-bg:  #fcf3e3;  --busy-line:  #eccf95;
  --vbusy:      #b5480e;  --vbusy-bg: #fcefe7;  --vbusy-line: #eebb9d;

  /* ---- Type scale (1.25-ish, readable) ------------------------------ */
  /* 2026 tidy-up: Plus Jakarta Sans everywhere (Inter kept as fallback). */
  --font-ui:      "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  34px;
  --text-4xl:  44px;
  --leading-tight: 1.2;
  --leading:       1.55;

  /* ---- Spacing scale (4px base) ------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ---- Radii --------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-full: 999px;

  /* ---- Elevation (cool, soft) --------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.04);
  --shadow:    0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.07);
  --shadow-lg: 0 4px 12px rgba(15,23,42,.08), 0 24px 48px rgba(15,23,42,.10);
  --ring:      0 0 0 3px rgba(79,70,229,.30);

  /* ---- Motion -------------------------------------------------------- */
  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t:      180ms cubic-bezier(.4,0,.2,1);
  --t-slow: 280ms cubic-bezier(.16,1,.3,1);

  /* =========================================================================
     LEGACY ALIASES — keep existing page CSS working, reskinned to the new look
     ====================================================================== */
  --ink: var(--text);
  --muted: var(--text-muted);
  --card: var(--surface);
  --line: var(--border);
  --ui: var(--font-ui);
  --display: var(--font-display);

  --clay: var(--primary);
  --clay-d: var(--primary-700);
  --green: var(--primary);          /* scheduler "primary" → accent */
  --green-light: var(--primary-700);
  --gold: var(--accent-2);          /* secondary accent → calm teal */

  --ok: var(--success);
  --warn: var(--warning);
  --event: var(--primary-50);

  /* level / area category colours (recooled to slate + accents) */
  --senior: #1e293b;
  --mid:    #64748b;
  --junior: #94a3b8;
  --kitchen: var(--primary);
  --bar:     #0d9488;
  --restaurant: #6366f1;

  /* radius / shadow aliases used by various pages */
  --rs: var(--radius-sm);
  --r:  var(--radius);
  --sh: var(--shadow);
  --shadow-sm: var(--shadow-sm);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.6;
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin: 0 0 var(--space-4); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0 0 var(--space-4); }
p  { margin: 0 0 var(--space-4); color: var(--text-2); max-width: 62ch; }

.wrap    { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--space-5); }
.section { padding: clamp(3rem, 8vw, 6rem) 0; }
.section + .section { border-top: 1px solid var(--border); }

.cta, .cta-secondary {
  display: inline-block; padding: 0.875rem 1.5rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none; font-family: var(--font-ui);
}
.cta           { background: var(--primary); color: var(--primary-ink); }
.cta:hover     { background: var(--primary-700); }
.cta-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border-2); }

img { max-width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); display: block; }

a:focus-visible, .cta:focus-visible, .cta-secondary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Skip link — hidden until focused. Both pages emit this markup; Task 1's
   stylesheet omitted the rule, so it rendered as a visible stray link. */
.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--text);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  z-index: 10; text-decoration: none;
}
.skip:focus { left: var(--space-4); top: var(--space-4); }

/* A screenshot presented as a product shot rather than an inline image. */
.shot {
  background: var(--bg-2); border-radius: var(--radius);
  padding: clamp(0.75rem, 2vw, 1.5rem); border: 1px solid var(--border);
  box-shadow: 0 18px 40px -24px rgb(15 23 42 / 0.45);
}
.shot img { border-radius: calc(var(--radius) / 1.5); border: 1px solid var(--border); display: block; }

/* Feature row: text and shot side by side, alternating direction down the page. */
.feature { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1.15fr; }
  .feature:nth-of-type(even) .feature-text { order: 2; }
}
.feature + .feature { margin-top: clamp(3rem, 7vw, 5.5rem); }
.feature h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); margin: 0 0 var(--space-3); }

/* A section that sits on a tinted band, to break up the white. */
.section.tint { background: var(--bg-2); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }

/* Small print under the screenshots. Muted, but it must stay legible — it is
   the line that stops generated sample figures reading as a real venue's. */
.footnote {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-muted, var(--text-2));
}


/* ---- top banner + site navigation (added 2026-08-25) ----------------------
   The page had no header: sections were reachable only by scrolling, and the
   only Tenzing attribution was a footer line nobody scrolls to.

   The nav is sticky and the banner is not — the banner is context you read once,
   the nav is a control you want at any point on a long page. Sticking both would
   spend twice the vertical space on a phone, where this page is mostly read. */
.topbanner {
  background: #0f172a;
  color: #e2e8f0;
  font-size: 13px;
  padding: 7px 0;
}
.topbanner .wrap {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  flex-wrap: wrap; text-align: center;
}
.topbanner strong { color: #fff; font-weight: 600; }
.topbanner a { color: #fff; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.topbanner a:hover { opacity: .85; }

.sitenav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.sitenav .wrap {
  display: flex; align-items: center; gap: 22px;
  min-height: 58px;
}
.sitenav .brand {
  font-family: var(--display, inherit);
  font-weight: 800; font-size: 18px; letter-spacing: -.01em;
  color: #0f172a; text-decoration: none;
}
.sitenav nav { display: flex; gap: 20px; margin-left: auto; }
.sitenav nav a {
  color: #475569; text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 6px 0;
}
.sitenav nav a:hover { color: #0f172a; }
.sitenav .nav-cta {
  background: var(--primary, #4f46e5); color: #fff; text-decoration: none;
  padding: 9px 16px; border-radius: 8px; font-size: 15px; font-weight: 600;
  white-space: nowrap;
}
.sitenav .nav-cta:hover { filter: brightness(1.08); }

/* Anchors must not land under the sticky bar — without this, clicking "Pricing"
   puts the heading behind the nav. */
[id] { scroll-margin-top: 74px; }

@media (max-width: 700px) {
  /* The section links go; the brand and the CTA stay. Four nav items plus a
     button do not fit 390px, and the CTA is what this page is for — dropping
     the links keeps the one control that matters rather than wrapping into two
     rows of everything. The sections are still reachable by scrolling, which is
     how the page worked before this nav existed. */
  .sitenav nav { display: none; }
  .sitenav .nav-cta { margin-left: auto; }
  .topbanner { font-size: 12px; }
}