/* ==========================================================================
   Inside Software — Marketing Site
   Design system ported from the owlly.work rebuild (Tailwind/shadcn tokens),
   rebranded to Inside: same palette values, same spacing/component system,
   Inside name and identity — no Owlly references, no mascot.
   ========================================================================== */

:root {
  --radius: 0.75rem;

  /* Inside tokens (values carried over from the owlly rebuild) */
  --charcoal: #263238;
  --teal: #00bfa5;
  --teal-deep: #007f72;
  --canvas: #f6f8fc;
  /* Mockup internals. Solid --canvas was the same value as .section-soft, so
     mock fills disappeared on soft sections and read as grey slabs on white.
     Translucent fills composite over ANY section background and always read as
     subtle UI chrome. */
  --mock-fill: rgba(38, 50, 56, 0.045);
  --mock-fill-strong: rgba(38, 50, 56, 0.075);
  --inside-border: #dce4ea;
  --inside-muted: #60727c;
  --dark-surface: #1e292f;

  --background: #ffffff;
  --foreground: #263238;
  --card: #ffffff;
  --border: #dce4ea;
  --accent: #e6f9f5;
  --accent-foreground: #007f72;
  --destructive: #b3261e;

  --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-card: 12px;
  --radius-pill: 10px;
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -1px rgba(0,0,0,0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --container-max: 1200px;

  /* Back-compat aliases used by pages authored before the rebrand */
  --color-bg: var(--background);
  --color-bg-soft: var(--canvas);
  --color-fg: var(--charcoal);
  --color-fg-muted: var(--inside-muted);
  --color-primary: var(--charcoal);
  --color-primary-foreground: #ffffff;
  --color-border: var(--inside-border);
  --color-border-soft: var(--inside-border);
  --color-green: #16a34a;
  --color-amber: #b45309;
  --color-blue: #2563eb;
  --color-purple: #7c3aed;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--charcoal);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.7;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { letter-spacing: -0.015em; color: var(--charcoal); margin: 0; font-weight: 600; }
::selection { background: rgba(0,191,165,0.3); color: var(--charcoal); }

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.25rem;
  max-width: var(--container-max);
}
@media (min-width: 768px) { .container { padding-inline: 2rem; } }

.text-center { text-align: center; }
.muted { color: var(--inside-muted); }
.section { padding: 56px 0; }
.section-soft { background: var(--canvas); }
@media (min-width: 768px) { .section { padding: 88px 0; } }
.section-tight { padding: 48px 0; }
@media (min-width: 768px) { .section-tight { padding: 80px 0; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal-deep); margin: 0 0 16px;
}
h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-lg); line-height: 1.35; }
@media (min-width: 768px) {
  h1 { font-size: 64px; }
  h2 { font-size: 44px; }
  h3 { font-size: var(--fs-xl); }
}
p { margin: 0; }
p, li { font-size: var(--fs-base); line-height: 1.7; }
@media (min-width: 768px) { p, li { font-size: var(--fs-base); } }

/* Buttons — larger, more confident proportions than a default template */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding-inline: 26px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--fs-base); border: none; cursor: pointer;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease; white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--charcoal); color: #fff; }
.btn-primary:hover { background: var(--dark-surface); }
/* Charcoal on teal, not white on teal: white gave 2.33:1, well under the 4.5:1
   AA floor for a button people are meant to read. Charcoal reaches 5.72:1 and
   keeps the bright accent, which matters because this is the CTA on dark bands
   where a deep-teal button would lose its contrast against the band itself. */
.btn-teal { background: var(--teal); color: var(--charcoal); }
.btn-teal:hover { background: var(--teal-deep); }
.btn-outline { background: #fff; color: var(--charcoal); border: 1px solid var(--inside-border); }
.btn-outline:hover { border-color: var(--charcoal); }
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-deep); font-weight: 600; height: auto; padding: 0; background: none; }
.btn-ghost:hover { color: var(--charcoal); }
.btn-block { width: 100%; }
.btn-sm { height: 38px; padding-inline: 16px; font-size: var(--fs-sm); }

/* Nav */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--inside-border); min-height: 64px; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 6px; }
.logo:has(img)::before { display: none; }
.logo img { display: block; height: 34px; width: auto; }
/* Footer sits on a dark surface — render the black wordmark white there. */
.site-footer .logo img { height: 30px; filter: brightness(0) invert(1); }
.logo::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
.nav-links { display: none; align-items: center; gap: 24px; }
.nav-links > a, .nav-links .nav-item > button {
  font-size: var(--fs-sm); font-weight: 500; color: rgba(38,50,56,0.8);
  padding: 8px 0; background: none; border: none; cursor: pointer; font-family: var(--font-sans);
}
.nav-links > a:hover, .nav-links .nav-item > button:hover { color: var(--charcoal); }
.nav-actions { display: none; align-items: center; gap: 12px; }
.nav-item { position: relative; }
.nav-dropdown {
  display: none; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; padding-top: 8px; z-index: 50;
}
.nav-dropdown-inner {
  min-width: 260px; border-radius: 12px; border: 1px solid var(--inside-border);
  background: #fff; box-shadow: var(--shadow-lg); padding: 8px;
}
.nav-item.open .nav-dropdown { display: block; }
.dropdown-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 16px; min-width: 420px; }
.dropdown-cols.cols-3 { grid-template-columns: repeat(3, 1fr); min-width: 640px; }
.dropdown-label { font-size: var(--fs-micro); font-weight: 600; color: var(--teal-deep); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; padding: 0 12px; }
.dropdown-link { display: block; padding: 8px 12px; border-radius: 8px; font-size: var(--fs-sm); color: var(--charcoal); }
.dropdown-link:hover { background: var(--canvas); }
.dropdown-link strong { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--charcoal); }
.dropdown-link small { display: block; font-size: var(--fs-xs); color: var(--inside-muted); margin-top: 2px; }

/* ==========================================================================
   Mega-menu (left category rail + right content panel + promo card)
   Ported from Omni HR's "What we offer" pattern.
   ========================================================================== */
.mega-menu {
  display: none;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  padding-top: 8px;
  z-index: 60;
}
.nav-item.has-mega.open .mega-menu { display: block; }
.mega-menu-inner {
  display: grid;
  grid-template-columns: 180px 1fr 200px;
  gap: 0;
  width: min(840px, 92vw);
  background: #fff;
  border: 1px solid var(--inside-border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
@media (max-width: 1050px) {
  .mega-menu-inner { grid-template-columns: 160px 1fr; }
  .mega-promo { display: none; }
}
.mega-rail { background: var(--canvas); padding: 16px 8px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--inside-border); }
.mega-rail-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px;
  border: none; background: none; cursor: pointer;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--inside-muted); font-family: var(--font-sans);
}
.mega-rail-item svg { flex-shrink: 0; opacity: 0.6; }
.mega-rail-item.active { background: #fff; color: var(--charcoal); box-shadow: var(--shadow-md); }
.mega-rail-item.active svg { opacity: 1; }
.mega-panel { padding: 20px; display: none; grid-template-columns: repeat(2, 1fr); gap: 4px; align-content: start; }
.mega-panel.active { display: grid; }
.mega-panel-link { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 8px; }
.mega-panel-link:hover { background: var(--canvas); }
.mega-panel-link .icon { width: 32px; height: 32px; border-radius: 8px; background: var(--canvas); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--teal-deep); }
.mega-panel-link strong { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--charcoal); }
.mega-panel-link small { display: block; font-size: var(--fs-xs); color: var(--inside-muted); margin-top: 2px; }
.mega-promo { background: var(--canvas); padding: 24px 20px; border-left: 1px solid var(--inside-border); display: flex; flex-direction: column; align-items: center; text-align: center; }
.mega-promo p { font-size: var(--fs-xs); font-weight: 500; color: var(--charcoal); line-height: 1.5; }
.mega-promo .mega-promo-visual { width: 96px; height: 96px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; margin: 16px 0; color: var(--teal-deep); }
.mega-promo .btn-outline { font-size: var(--fs-xs); height: 38px; padding-inline: 16px; }

.mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--inside-border); background: none; cursor: pointer; }
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-actions { display: flex; }
  .mobile-toggle { display: none; }
}
.mobile-menu { display: none; border-top: 1px solid var(--inside-border); padding: 12px 0 20px; max-height: 80vh; overflow-y: auto; }
.mobile-menu.open { display: block; }
.mobile-menu a, .mobile-menu button.mobile-section-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  padding: 12px 4px; font-size: var(--fs-sm); font-weight: 500; color: var(--charcoal);
  background: none; border: none; text-align: left; font-family: var(--font-sans); cursor: pointer;
  border-bottom: 1px solid var(--inside-border);
}
.mobile-submenu { display: none; padding-left: 12px; }
.mobile-submenu.open { display: block; }
.mobile-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

/* Hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, var(--canvas) 100%); }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; } }
.hero-grid > div:nth-child(2) { max-width: 100%; overflow: hidden; }

/* Book a demo — header on top, calendar full width beneath it.
   The previous two-column split squeezed the Cal.com embed into ~half the
   page while leaving the intro column mostly empty. A booking page has one
   job, so the calendar gets the full container. */
.book-demo__intro { text-align: center; }
.book-demo__intro .eyebrow { justify-content: center; }
/* The Cal.com embed renders its own bordered card and auto-sizes its iframe.
   A wrapper border therefore produced a frame-inside-a-frame with a dead gap
   between the two, and min-height:720px reserved ~160px more than the calendar
   actually uses — which is the empty space below the time slots. The wrapper is
   now invisible and carries only a min-height to stop layout jump while loading. */
.book-demo__cal {
  width: 100%; min-height: 560px; margin-top: 28px;
}
.book-demo__cal iframe { display: block; border-radius: 16px; }
.book-demo__alt {
  margin-top: 18px; text-align: center;
  font-size: var(--fs-xs); color: var(--inside-muted);
}
.book-demo__alt a { color: var(--teal-deep); font-weight: 500; }
@media (max-width: 700px) { .book-demo__cal { min-height: 520px; margin-top: 20px; } }

.browser-mock { border-radius: 16px; overflow: hidden; border: 1px solid var(--inside-border); background: #fff; box-shadow: var(--shadow-lg); }
.browser-mock-bar { background: var(--charcoal); padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
.browser-dot { width: 10px; height: 10px; border-radius: 50%; }
.browser-mock-body { background: var(--mock-fill); padding: 20px; }

/* Grids */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card { background: #fff; border: 1px solid var(--inside-border); border-radius: 16px; padding: 28px; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card-flat { background: transparent; border: none; padding: 0; }
.card-white { background: #fff; border: 1px solid var(--inside-border); border-radius: var(--radius-card); }
.icon-box { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: var(--fs-base); background: var(--accent); color: var(--teal-deep); }
.icon-box.sm { width: 32px; height: 32px; font-size: var(--fs-sm); margin-bottom: 12px; }
.bg-blue { background: rgba(37,99,235,0.1); color: var(--color-blue); }
.bg-green { background: rgba(22,163,74,0.1); color: #16a34a; }
.bg-purple { background: rgba(124,58,237,0.1); color: var(--color-purple); }
.bg-amber { background: rgba(180,83,9,0.1); color: var(--color-amber); }
.bg-primary-soft { background: var(--accent); color: var(--teal-deep); }

.learn-more { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-deep); font-weight: 600; margin-top: 20px; font-size: var(--fs-sm); }

.check-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.check-item { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); color: var(--charcoal); }
.check-item .tick { color: var(--teal); flex-shrink: 0; margin-top: 2px; }

/* Stats */
.stat-card { background: #fff; border: 1px solid var(--inside-border); border-radius: var(--radius-card); padding: 20px; }
.stat-value { font-size: 28px; font-weight: 600; margin-bottom: 4px; color: var(--charcoal); }
.stat-label { font-weight: 600; margin-bottom: 4px; font-size: var(--fs-sm); }

/* Testimonial */
.testimonial { max-width: 760px; margin: 0 auto; text-align: center; }
.testimonial-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--teal-deep); display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; font-size: var(--fs-xl); }
.testimonial blockquote { font-size: var(--fs-xl); font-weight: 500; line-height: 1.5; margin: 0 0 28px; color: var(--charcoal); }
@media (min-width: 768px) { .testimonial blockquote { font-size: 26px; } }
.testimonial-author { display: flex; align-items: center; justify-content: center; gap: 14px; }
.author-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--teal-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-xs); }

/* Contact */
.contact-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.step { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.step-num { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: var(--teal-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm); flex-shrink: 0; }
.form-card { background: var(--canvas); border: 1px solid var(--inside-border); border-radius: 16px; padding: 28px; }
.form-row { display: grid; gap: 14px; margin-bottom: 14px; }
@media (min-width: 640px) { .form-row.two-col { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: var(--fs-xs); font-weight: 500; margin-bottom: 6px; color: var(--charcoal); }
.field input, .field textarea {
  width: 100%; background: #fff; border: 1px solid var(--inside-border); border-radius: 8px;
  padding: 10px 14px; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--charcoal);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,191,165,0.15); }
.form-status { margin-top: 14px; font-size: var(--fs-sm); }
.form-status.success { color: #16a34a; }
.form-status.error { color: #dc2626; }

/* Footer */
.site-footer { margin-top: 80px; background: var(--canvas); border-top: 1px solid var(--inside-border); }
.footer-grid { display: grid; gap: 40px; padding: 56px 0; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-brand p { color: var(--inside-muted); font-size: var(--fs-sm); margin-top: 16px; max-width: 300px; }
.footer-social { display: flex; gap: 16px; margin-top: 20px; }
.footer-social a { color: var(--inside-muted); }
.footer-col h3 { font-size: var(--fs-sm); font-weight: 600; color: var(--charcoal); margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col span { color: var(--inside-muted); font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--charcoal); }
.footer-sublabel { color: var(--inside-muted); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 10px; }
.footer-bottom { border-top: 1px solid var(--inside-border); padding: 24px 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--inside-muted); }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; } }
.footer-bottom-links { display: flex; gap: 20px; }

/* Utility */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.max-w-3 { max-width: 720px; margin-left: auto; margin-right: auto; }
.max-w-xl { max-width: 560px; }

.benefits-layout { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .benefits-layout { grid-template-columns: 1fr 1fr; gap: 72px; } }

.dash-mock { background: #fff; border-radius: 16px; box-shadow: var(--shadow-md); border: 1px solid var(--inside-border); padding: 20px; }
.dash-mock-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dash-mock-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--teal-deep); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.dash-mock-title { font-weight: 600; font-size: 14px; flex: 1; color: var(--charcoal); }
.dash-mock-filter { font-size: 12px; color: var(--inside-muted); background: var(--mock-fill); padding: 6px 12px; border-radius: 8px; }
.dash-mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.dash-mock-stats div { background: var(--mock-fill); border-radius: 12px; padding: 14px; }
.dash-mock-stats strong { display: block; font-size: 22px; font-weight: 700; color: var(--charcoal); }
.dash-mock-stats span { font-size: 11px; color: var(--inside-muted); }
.dash-mock-chart { background: var(--mock-fill); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.dash-mock-chart-label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 8px; color: var(--charcoal); }
.dash-mock-bars { display: flex; align-items: flex-end; gap: 4px; height: 80px; }
.dash-mock-bars i { flex: 1; background: linear-gradient(to top, rgba(0,191,165,0.3), rgba(0,191,165,0.65)); border-radius: 4px 4px 0 0; }
.dash-mock-footer { display: flex; justify-content: space-between; font-size: 12px; color: var(--inside-muted); }

/* ==========================================================================
   Long-form product page template
   ========================================================================== */
.breadcrumbs { font-size: var(--fs-xs); color: var(--inside-muted); margin-bottom: 24px; }
.breadcrumbs a { color: var(--inside-muted); }
.breadcrumbs a:hover { color: var(--teal-deep); }
.breadcrumbs .sep { margin: 0 6px; }

.lf-hero { border-bottom: 1px solid var(--inside-border); background: var(--canvas); }
/* Single-column hero pages keep a readable cap; a hero containing a
   .hero-grid must span the full container or the two columns crush. */
.lf-hero-inner { max-width: 800px; }
.lf-hero-inner:has(.hero-grid) { max-width: none; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--teal-deep); background: var(--accent); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.lf-hero h1 { margin: 8px 0 20px; max-width: 28ch; }
.lf-hero .lead { font-size: var(--fs-lg); color: var(--inside-muted); max-width: 640px; margin: 0 0 28px; }

.lf-section { padding: 52px 0; border-top: 1px solid var(--inside-border); }
.lf-section:first-of-type { border-top: none; }
.lf-section.lf-section-soft { background: var(--canvas); }
.lf-section h2 { font-size: 26px; margin-bottom: 20px; }
@media (min-width: 768px) { .lf-section h2 { font-size: 32px; } }
.lf-section .body-text { font-size: var(--fs-base); color: var(--inside-muted); line-height: 1.7; max-width: 760px; }

.lf-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: step; }
.lf-steps li { display: flex; gap: 16px; }
.lf-steps li::before {
  content: counter(step);
  counter-increment: step;
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--teal); color: var(--charcoal); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-sm);
}
.lf-steps .step-text { padding-top: 4px; color: var(--inside-muted); }
.lf-steps .step-text strong { color: var(--charcoal); display: block; margin-bottom: 2px; }

.lf-bullets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .lf-bullets { grid-template-columns: repeat(2, 1fr); } }
.lf-bullets li { display: flex; gap: 10px; font-size: var(--fs-sm); color: var(--charcoal); }
.lf-bullets li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; background: var(--teal); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4.5 4.5L19 7' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4.5 4.5L19 7' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

.persona-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 640px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } }
.persona-card { border: 1px solid var(--inside-border); border-radius: 12px; padding: 20px; background: #fff; }
.persona-card strong { display: block; margin-bottom: 8px; color: var(--charcoal); }
.persona-card strong a { color: var(--teal-deep); }
.persona-card p { font-size: var(--fs-sm); color: var(--inside-muted); }

.lf-faq { max-width: 760px; }
.lf-faq details { border-bottom: 1px solid var(--inside-border); padding: 20px 0; }
.lf-faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; cursor: pointer; font-weight: 600; list-style: none; color: var(--charcoal); }
.lf-faq summary::-webkit-details-marker { display: none; }
.lf-faq summary .plus { color: var(--teal-deep); transition: transform 0.2s; }
.lf-faq details[open] summary .plus { transform: rotate(45deg); }
.lf-faq p { margin-top: 10px; color: var(--inside-muted); line-height: 1.7; }

.related-links { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .related-links { grid-template-columns: repeat(3, 1fr); } }
.related-link { display: block; border: 1px solid var(--inside-border); border-radius: 12px; padding: 16px; background: #fff; }
.related-link:hover { border-color: var(--teal); }
.related-link .kind { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--inside-muted); }
.related-link .label { display: block; font-weight: 600; margin-top: 4px; color: var(--charcoal); }

.final-cta { border-radius: 24px; background: var(--charcoal); color: #fff; padding: 34px 32px; text-align: center; }
.final-cta h2 { color: #fff; margin-bottom: 16px; }

.mock-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--inside-border); box-shadow: var(--shadow-md); background: #fff; }

/* Industries hub + industry pages */
.industry-card { display: block; border: 1px solid var(--inside-border); border-radius: 12px; padding: 24px; height: 100%; background: #fff; }
.industry-card:hover { border-color: var(--teal); }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.compare-table th, .compare-table td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--inside-border); }
.compare-table thead th { background: var(--canvas); border-top: none; font-weight: 600; color: var(--charcoal); }
.table-scroll { overflow-x: auto; border: 1px solid var(--inside-border); border-radius: 12px; }

/* Resources hub */
.resource-card { display: flex; flex-direction: column; border: 1px solid var(--inside-border); border-radius: 16px; padding: 24px; height: 100%; background: #fff; }
.resource-card:hover { border-color: var(--teal); }
.resource-meta { margin-top: auto; padding-top: 20px; display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--inside-muted); }
.resource-category { font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal-deep); }
.filter-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.filter-pill { padding: 6px 14px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; border: 1px solid var(--inside-border); background: #fff; color: var(--charcoal); cursor: pointer; }
.filter-pill.active { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }

/* Glossary */
.glossary-term { border-bottom: 1px solid var(--inside-border); padding: 20px 0; }
.glossary-term dt { font-weight: 700; font-size: var(--fs-base); color: var(--charcoal); }
.glossary-term dd { margin: 8px 0 0; color: var(--inside-muted); line-height: 1.7; }

/* ==========================================================================
   Homepage mockups — ported from owlly.work's mockups.tsx (CSS-drawn, no
   real screenshots yet; same structure/data as the original component)
   ========================================================================== */
.roster-mock { border-radius: 16px; background: #fff; border: 1px solid var(--inside-border); box-shadow: 0 20px 60px -30px rgba(38,50,56,0.35); overflow: hidden; }
.roster-mock-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--inside-border); background: #fff; }
.roster-mock-dots { display: flex; gap: 6px; }
.roster-mock-dots span { width: 10px; height: 10px; border-radius: 50%; }
.roster-mock-title { font-size: 12px; font-weight: 500; color: var(--inside-muted); }
.roster-mock-status { font-size: 12px; font-weight: 600; color: var(--teal-deep); }
.roster-mock-body { padding: 16px; }
.roster-grid { display: grid; grid-template-columns: 104px repeat(7, minmax(0,1fr)); gap: 3px; font-size: 9px; font-weight: 600; color: var(--inside-muted); margin-bottom: 7px; }
.roster-grid span { text-align: center; text-transform: uppercase; letter-spacing: 0.06em; }
.roster-row { display: grid; grid-template-columns: 104px repeat(7, minmax(0,1fr)); gap: 3px; align-items: center; margin-bottom: 5px; }
.roster-row-label strong { display: block; font-size: 11px; font-weight: 600; color: var(--charcoal); line-height: 1.15; }
.roster-row-label span { font-size: 9px; color: var(--inside-muted); }
.roster-cell {
  display: flex; align-items: center; justify-content: center;
  height: 28px; border-radius: 5px; background: var(--mock-fill);
  border-left: 1px solid var(--inside-border);
  font-size: 9px; font-weight: 600; letter-spacing: 0;
  color: var(--inside-muted); white-space: nowrap; overflow: hidden;
}
.roster-cell.off {
  background: transparent; border-left-color: transparent;
  color: rgba(38, 50, 56, 0.3); font-weight: 500;
}
.roster-cell.active { border-left-width: 3px; color: var(--charcoal); }
.roster-mock-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; margin-top: 12px; border-top: 1px solid var(--inside-border); }
.roster-tag { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--mock-fill); padding: 5px 10px; font-size: 11px; font-weight: 500; color: var(--charcoal); }
.roster-tag i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.phone-frame { margin: 0 auto; width: 240px; border-radius: 36px; background: var(--dark-surface); padding: 10px; box-shadow: 0 30px 80px -20px rgba(38,50,56,0.55); }
.phone-frame-inner { border-radius: 28px; background: #fff; overflow: hidden; }
.phone-header { padding: 16px 16px 12px; background: #fff; border-bottom: 1px solid var(--inside-border); display: flex; align-items: center; justify-content: space-between; }
.phone-header .label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal-deep); }
.phone-header .name { font-size: 14px; font-weight: 600; color: var(--charcoal); margin-top: 2px; }
.phone-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--teal-deep); }
.phone-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.phone-shift { display: flex; align-items: center; gap: 12px; border: 1px solid var(--inside-border); border-radius: 10px; padding: 10px; }
.phone-shift .day-box { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.phone-shift .shift-time { font-size: 11px; font-weight: 600; color: var(--charcoal); }
.phone-shift .shift-role { font-size: 10px; color: var(--inside-muted); }
.phone-btn { margin-top: 4px; width: 100%; border-radius: 8px; background: var(--charcoal); padding: 10px; font-size: 11px; font-weight: 600; color: #fff; border: none; text-align: center; }

.gps-map { position: relative; height: 92px; background: radial-gradient(120px 80px at 60% 55%, rgba(0,191,165,0.22), transparent 70%), linear-gradient(180deg,#F5F8F9,#EAF0F1); }
.gps-geofence { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin-left: -38px; margin-top: -38px; border-radius: 50%; background: rgba(0,191,165,0.12); border: 1.5px dashed rgba(0,191,165,0.65); }
.gps-pin { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin-left: -6px; margin-top: -6px; border-radius: 50%; background: var(--teal); border: 2px solid #fff; }
.gps-card { border: 1px solid var(--inside-border); border-radius: 16px; overflow: hidden; margin: 0 12px 12px; }
.gps-verified-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.gps-verified-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,191,165,0.12); color: var(--teal-deep); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }

.attendance-mock { border-radius: 16px; background: #fff; border: 1px solid var(--inside-border); overflow: hidden; }
.attendance-mock-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--inside-border); background: #fff; font-size: 12px; }
.attendance-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.attendance-table th { text-align: left; padding: 8px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--inside-muted); font-weight: 500; }
.attendance-table td { padding: 10px 16px; border-top: 1px solid var(--inside-border); }
.attendance-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.attendance-status i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.clock-in-overlay { display: none; }
@media (min-width: 640px) { .clock-in-overlay { display: block; } }

/* ==========================================================================
   Phase 1 — Design foundation components (WEBSITE-REDESIGN-BLUEPRINT.md §8)
   ========================================================================== */

/* Status badges — the ONLY two allowed labels per content-claims.md */
.available-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 12px; border-radius: 999px; text-transform: uppercase;
}
.available-badge { background: var(--accent); color: var(--teal-deep); }

/* Announcement bar (optional, off by default — used only if content calls for it) */
.announcement-bar {
  background: var(--charcoal); color: #fff; text-align: center;
  font-size: var(--fs-xs); font-weight: 500; padding: 8px 16px;
}
.announcement-bar a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }

/* Hero product stage — desktop window + phone window composition */
.hero-product-stage { position: relative; }
.product-window {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--inside-border);
  background: #fff; box-shadow: var(--shadow-lg);
}
.product-window-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: var(--charcoal); 
}
.product-window-bar span { width: 10px; height: 10px; border-radius: 50%; }
.product-window-body { background: var(--canvas); padding: 16px; overflow-x: auto; }
.phone-window {
  width: 220px; border-radius: 32px; background: var(--dark-surface);
  padding: 8px; box-shadow: 0 24px 60px -16px rgba(38,50,56,0.5);
}
.phone-window-inner { border-radius: 24px; background: #fff; overflow: hidden; }
.floating-proof-card {
  position: absolute; background: #fff; border: 1px solid var(--inside-border);
  border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-lg);
  font-size: var(--fs-xs); max-width: 220px;
}
@media (max-width: 767px) { .floating-proof-card { display: none; } }

/* Hero introduction film (MV-00) — the one intentional video on the site.
   User-initiated (native controls, preload="none") because it carries narration:
   it is not a silent looping product demo. While the source files do not exist,
   the poster renders alone rather than showing a broken player. */
.hero-video {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--inside-border);
  border-radius: 18px;
  background: var(--charcoal);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
}
.hero-video__player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--charcoal);
}
.hero-video-caption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--inside-muted);
}
.hero-video-pending {
  margin-top: 6px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--inside-muted);
}
@media (max-width: 600px) {
  .hero-video { border-radius: 14px; }
}

/* Trust bar — a slim credential strip that sits directly under the nav.
   NOTE: the SOC badge is wrapped in an <a> (AICPA §2 requires the logo link to
   aicpa.org/soc4so), so target it with a DESCENDANT selector. A `> img` child
   selector silently stops matching and the badge renders at full 359px. */
.trust-strip {
  border-bottom: 1px solid var(--inside-border);
  background: var(--canvas);
}
.trust-strip-inner {
  display: flex; align-items: center;
  justify-content: center; gap: 8px 22px;
  padding-block: 9px;
  flex-wrap: wrap;
}
/* On narrow screens a wrapping "slim bar" stops being slim — it becomes a
   two-line block. Switch to a single swipeable line instead. */
@media (max-width: 900px) {
  /* Wrap rather than swipe. This used to scroll horizontally between 768 and
     900px — tablet portrait — where content hidden off-screen is just as
     undiscoverable as it is on a phone. The phone breakpoint already wrapped it;
     this closes the tablet gap. */
  .trust-strip-inner {
    flex-wrap: wrap; justify-content: center;
    overflow-x: visible; gap: 8px 16px;
  }
  .trust-item { flex: 0 0 auto; }
}
.trust-item {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; color: var(--inside-muted);
  font-size: 0.76rem; line-height: 1.15; white-space: nowrap;
}
.trust-item + .trust-item::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--inside-border); margin-right: 15px; flex-shrink: 0;
}
.trust-item img { width: 22px; height: auto; flex-shrink: 0; }
.trust-item strong { font-weight: 600; color: var(--charcoal); }
.trust-item__stat { font-weight: 700; color: var(--teal-deep); }
a.trust-item:hover strong { color: var(--teal-deep); }
@media (max-width: 720px) {
  .trust-strip-inner { gap: 6px 14px; padding-block: 8px; }
  .trust-item { font-size: 0.7rem; }
  .trust-item + .trust-item::before { margin-right: 8px; }
}

/* Founders / track-record card (About hero, right column) */
.founders-mock {
  border: 1px solid var(--inside-border); border-radius: 16px;
  background: #fff; box-shadow: 0 20px 60px -30px rgba(38,50,56,0.35);
  overflow: hidden;
}
.founders-mock__top { padding: 22px; border-bottom: 1px solid var(--inside-border); }
.founders-mock__avatars { display: flex; }
.founders-mock__avatars span {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--teal-deep);
  background: var(--accent); margin-left: -10px;
}
.founders-mock__avatars span:first-child { margin-left: 0; }
.founders-mock__top strong { display: block; margin-top: 14px; font-size: 15px; color: var(--charcoal); }
.founders-mock__top p { margin-top: 4px; font-size: 13px; color: var(--inside-muted); }
.founders-mock__stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.founders-mock__stats div {
  padding: 18px 14px; text-align: center; border-right: 1px solid var(--inside-border);
}
.founders-mock__stats div:last-child { border-right: none; }
.founders-mock__stats b { display: block; font-size: 20px; font-weight: 700; color: var(--charcoal); letter-spacing: -0.02em; }
.founders-mock__stats span { display: block; margin-top: 2px; font-size: 11px; color: var(--inside-muted); }
.founders-mock__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-top: 1px solid var(--inside-border);
  background: var(--canvas); font-size: 12px; color: var(--inside-muted);
}
.founders-mock__foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }

/* SOC 2 block on the security page */
.soc-block { display: grid; gap: 28px; align-items: center; }
.soc-block__badge { width: 132px; height: auto; }
@media (min-width: 760px) {
  .soc-block { grid-template-columns: 148px 1fr; gap: 36px; }
}

   section heading read as a disclaimer box. Its copy now lives in hero
   prose, which keeps the GEO front-loaded definition without the frame. */

/* Coded product mockups (replaces screenshot placeholders).
   Honest-by-design: never captioned as a real screenshot — see
   .kiro/steering/content-claims.md. data-screenshot-id / data-final-src are
   retained on each <figure> so a real approved image can still be swapped in. */
.product-mock { margin: 0; background: none; border: 0; padding: 0; }
/* Wide mockups (roster, attendance) must NEVER exceed their column.
   Previous bug: the figure had overflow-x:auto AND the card had min-width:520px
   while .roster-row demands 640px — so the card grew past the hero column and
   its right edge/radius was cut off. Correct pattern: the CARD is always 100% of
   the column and clips; the CONTENT scrolls inside it (.roster-mock-body already
   has overflow-x:auto), so the frame stays intact at every width. */
.product-mock--wide { overflow: hidden; }

.product-mock--wide > .roster-mock,
.product-mock--wide > .attendance-mock { min-width: 0; width: 100%; max-width: 100%; }
.attendance-mock { overflow: hidden; }
.roster-mock-body { -webkit-overflow-scrolling: touch; }
/* Keep the internal scroll discoverable but unobtrusive */
.roster-mock-body::-webkit-scrollbar,
.attendance-mock::-webkit-scrollbar { height: 6px; }
.roster-mock-body::-webkit-scrollbar-thumb,
.attendance-mock::-webkit-scrollbar-thumb { background: var(--inside-border); border-radius: 999px; }
.product-mock-caption {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; font-size: 0.8rem; color: var(--inside-muted);
}
.product-mock-note { display: none;
  padding: 2px 9px; border: 1px solid var(--inside-border); border-radius: 999px;
  background: var(--canvas); color: var(--inside-muted);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  white-space: nowrap;
}

/* Proof strip — capability proof, not invented metrics */
.proof-strip { border-top: 1px solid var(--inside-border); border-bottom: 1px solid var(--inside-border); background: #fff; }
.proof-strip-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; padding: 32px 0; }
.proof-item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--charcoal); }
.proof-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }

/* Lifecycle rail */
.lifecycle-rail {
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.lifecycle-step {
  flex: 0 0 220px; scroll-snap-align: start; border: 1px solid var(--inside-border);
  border-radius: 14px; padding: 20px; background: #fff;
}
.lifecycle-step .step-index { font-size: var(--fs-xs); font-weight: 700; color: var(--teal-deep); text-transform: uppercase; letter-spacing: 0.06em; }
.lifecycle-step h3 { margin-top: 8px; font-size: var(--fs-lg); }
.lifecycle-step p { margin-top: 8px; font-size: var(--fs-sm); color: var(--inside-muted); }
.lifecycle-step a { display: inline-flex; margin-top: 12px; font-size: var(--fs-xs); font-weight: 600; color: var(--teal-deep); }
@media (min-width: 1024px) {
  .lifecycle-rail { overflow-x: visible; flex-wrap: nowrap; }
  .lifecycle-step { flex: 1; }
}

/* Feature story — split layout, alternating direction */
.feature-story { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .feature-story { grid-template-columns: 1fr 1fr; gap: 56px; } }
.feature-story.reverse .feature-story-visual { order: -1; }
@media (min-width: 900px) { .feature-story.reverse .feature-story-visual { order: 1; } }

/* Before/after comparison */
.before-after { display: grid; gap: 0; border: 1px solid var(--inside-border); border-radius: 14px; overflow: hidden; }
@media (min-width: 768px) { .before-after { grid-template-columns: 1fr 1fr; } }
.before-after-col { padding: 24px; }
.before-after-col.before { background: var(--canvas); }
.before-after-col.after { background: #fff; border-top: 1px solid var(--inside-border); }
@media (min-width: 768px) { .before-after-col.after { border-top: none; border-left: 1px solid var(--inside-border); } }
.before-after-col h4 { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--inside-muted); margin-bottom: 16px; }
.before-after-col.after h4 { color: var(--teal-deep); }
.before-after-row { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--inside-border); font-size: var(--fs-sm); }
.before-after-row:first-of-type { border-top: none; }

/* Role switcher */
.role-switcher-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.role-switcher-tab {
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--inside-border);
  background: #fff; font-size: var(--fs-sm); font-weight: 600; color: var(--charcoal); cursor: pointer;
}
.role-switcher-tab[aria-selected="true"] { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.role-panel { display: none; padding-top: 24px; }
.role-panel.active { display: block; }
@media (max-width: 767px) {
  .role-switcher-tabs { display: none; }
  .role-switcher-select { display: block; width: 100%; height: 48px; border-radius: 10px; border: 1px solid var(--inside-border); padding: 0 14px; font-family: var(--font-sans); font-size: var(--fs-sm); }
}
@media (min-width: 768px) { .role-switcher-select { display: none; } }

/* Use-case matrix (fact table) */
.use-case-matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.use-case-matrix th, .use-case-matrix td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--inside-border); }
.use-case-matrix thead th { background: var(--canvas); border-top: none; font-weight: 600; }
@media (max-width: 640px) {
  .use-case-matrix, .use-case-matrix thead, .use-case-matrix tbody, .use-case-matrix tr { display: block; }
  .use-case-matrix thead { display: none; }
  .use-case-matrix tr { border: 1px solid var(--inside-border); border-radius: 10px; margin-bottom: 12px; padding: 8px; }
  .use-case-matrix td { border-top: none; padding: 6px 8px; }
  .use-case-matrix td::before { content: attr(data-label); display: block; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; color: var(--inside-muted); margin-bottom: 2px; }
}

/* Screenshot frame + placeholder handling */
.screenshot-frame {
  margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--inside-border);
  box-shadow: var(--shadow-md); background: #fff;
}
.screenshot-frame img { width: 100%; height: auto; display: block; background: var(--canvas); }
.screenshot-caption { padding: 10px 16px; font-size: var(--fs-xs); color: var(--inside-muted); border-top: 1px solid var(--inside-border); }
.ui-annotation {
  position: absolute; background: var(--charcoal); color: #fff; font-size: var(--fs-xs); font-weight: 600;
  padding: 4px 10px; border-radius: 6px;
}
.data-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; background: var(--canvas); border-radius: 999px; padding: 4px 10px; color: var(--charcoal); }

/* Implementation timeline */
.implementation-timeline { display: flex; flex-direction: column; gap: 0; }
.implementation-timeline-item { display: flex; gap: 20px; padding: 20px 0; border-top: 1px solid var(--inside-border); }
.implementation-timeline-item:first-child { border-top: none; }
.implementation-timeline-item .step-num {
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--teal-deep);
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}

/* Direct answer / definition block (GEO) */
.definition-block { border: 1px solid var(--inside-border); border-radius: 14px; padding: 24px; background: #fff; }
.definition-block dt { font-weight: 700; font-size: var(--fs-base); color: var(--charcoal); }
.definition-block dd { margin: 8px 0 0; color: var(--inside-muted); line-height: 1.7; }
.fact-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.fact-table th, .fact-table td { text-align: left; padding: 10px 16px; border-top: 1px solid var(--inside-border); }
.fact-table thead th { background: var(--canvas); border-top: none; font-weight: 600; }
.article-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--fs-xs); color: var(--inside-muted); border-bottom: 1px solid var(--inside-border); padding-bottom: 16px; margin-bottom: 24px; }
.source-list { font-size: var(--fs-xs); color: var(--inside-muted); }
.source-list a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }
.author-box { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--inside-border); padding-top: 20px; margin-top: 32px; }
.author-box .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--teal-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm); }
.related-cluster { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .related-cluster { grid-template-columns: repeat(3, 1fr); } }

/* Buyer question grid (FAQ variant with visible category) */
.buyer-question-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .buyer-question-grid { grid-template-columns: repeat(2, 1fr); } }
.buyer-question-grid .lf-faq { max-width: none; }

/* Sticky demo rail (desktop side rail variant of the mobile sticky CTA) */
.sticky-demo-rail { position: sticky; top: 96px; border: 1px solid var(--inside-border); border-radius: 14px; padding: 24px; background: #fff; }
.demo-proof-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); }
.demo-proof-list li { display: flex; gap: 8px; }
.demo-proof-list li::before { content: "✔"; color: var(--teal); flex-shrink: 0; }

/* Mobile sticky demo CTA — appears after the hero, not immediately on load */
.mobile-sticky-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 12px 16px; background: #fff; border-top: 1px solid var(--inside-border);
  box-shadow: 0 -8px 20px -12px rgba(38,50,56,0.25);
}
.mobile-sticky-cta.visible { display: flex; }
.mobile-sticky-cta a { flex: 1; }
@media (min-width: 900px) { .mobile-sticky-cta { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Visible keyboard focus (Phase 2 requirement — never remove outline without replacement) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--teal-deep); outline-offset: 2px; border-radius: 4px;
}


/* ══ Mobile: no horizontal scrolling, anywhere ══════════════════════════════
   Every container that scrolled sideways is restructured to stack or fit.
   Sideways scrolling hides content on touch devices — users do not discover it. */
@media (max-width: 767px) {

  /* Lifecycle rail: was a flex row of 220px cards that overflowed.
     Becomes a single stacked column — each step a full-width bar. */
  .lifecycle-rail {
    display: grid; grid-template-columns: 1fr; gap: 12px;
    overflow-x: visible; padding-bottom: 0;
    scroll-snap-type: none;
  }
  .lifecycle-step { flex: none; width: auto; scroll-snap-align: none; }

  /* Roster: a 7-day grid cannot fit a phone, so restructure per person —
     name, then that person's week as wrapped day chips. Day names come from
     data-day, since the header row is hidden. */
  .roster-mock-body { overflow-x: visible; padding: 14px; }
  .roster-grid { display: none; }
  .roster-row {
    display: block; min-width: 0;
    padding-bottom: 11px; margin-bottom: 11px;
    border-bottom: 1px solid var(--inside-border);
  }
  .roster-row:last-of-type { border-bottom: none; margin-bottom: 4px; }
  .roster-row-label { margin-bottom: 7px; }
  .roster-cell {
    display: inline-flex; width: auto; height: 24px;
    padding: 0 9px; margin: 0 5px 5px 0;
    border-left-width: 3px; gap: 5px;
  }
  .roster-cell::before {
    content: attr(data-day);
    font-weight: 700; opacity: 0.5; text-transform: uppercase;
  }
  .roster-cell.off { border-left-color: var(--inside-border); }

  /* Attendance: drop the 540px floor so the table simply fits */
  .attendance-mock { overflow: hidden; }
  .attendance-table { min-width: 0 !important; font-size: 10px; }
  .attendance-table th,
  .attendance-table td { padding: 8px 6px !important; }

  /* Trust bar: wrap and centre rather than swipe */
  .trust-strip-inner {
    flex-wrap: wrap !important; justify-content: center !important;
    overflow-x: visible !important; gap: 7px 14px !important;
  }
  .trust-item + .trust-item::before { display: none; }

  /* Remaining scroll containers whose content already stacks on mobile */
  .table-scroll { overflow-x: visible; border: 0; border-radius: 0; background: none; }
  .product-window-body { overflow-x: visible; }
}


/* Form controls. Selects previously carried the same inline style block
   repeated on every instance — moved here so the form markup stays readable. */
.field select {
  width: 100%; background: #fff;
  border: 1px solid var(--inside-border); border-radius: 8px;
  padding: 10px 14px; font-family: var(--font-sans); font-size: var(--fs-sm);
  color: var(--charcoal); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--inside-muted) 50%),
                    linear-gradient(135deg, var(--inside-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field select:focus { outline: none; border-color: var(--teal); }
.field .consent {
  display: flex; align-items: flex-start; gap: 9px;
  font-weight: 400; font-size: var(--fs-sm); color: var(--inside-muted);
}
.field .consent input {
  margin: 2px 0 0; flex: 0 0 auto; width: 16px; height: 16px;
  accent-color: var(--teal-deep); cursor: pointer;
}
/* min-width:0 lets the span shrink normally instead of being forced to
   min-content width, which is what broke the sentence into one word per line. */
.field .consent > span { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
.field .consent a { color: var(--teal-deep); font-weight: 500; }

/* Contact: form beside reassurance copy rather than a lone tall column */
.contact-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 940px) {
  .contact-grid { grid-template-columns: 0.82fr 1.18fr; gap: 48px; }
  .contact-grid__aside { position: sticky; top: 104px; }
}
.contact-next { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.contact-next li { list-style: none; }
.contact-next .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; margin-right: 9px;
  background: var(--accent); color: var(--teal-deep);
  font-size: var(--fs-micro); font-weight: 700; flex-shrink: 0;
}
.contact-next__t {
  display: flex; align-items: center;
  font-size: var(--fs-sm); font-weight: 600; color: var(--charcoal); margin: 0;
}
/* Descriptions sit flush left, not indented under the number — an indent here
   made the column read as a nested outline rather than three short steps. */
.contact-next__d { font-size: var(--fs-xs); color: var(--inside-muted); margin: 5px 0 0; line-height: 1.5; }

/* Honeypots. Must never be perceivable to a human OR to a screen reader, but
   must remain in the DOM and submittable so a bot fills them in. */
.hp-native { display: none !important; }
.hp-offscreen {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.field textarea {
  width: 100%; background: #fff;
  border: 1px solid var(--inside-border); border-radius: 8px;
  padding: 11px 14px; font-family: var(--font-sans); font-size: var(--fs-sm);
  color: var(--charcoal); resize: vertical; min-height: 96px;
}
.field textarea:focus { outline: none; border-color: var(--teal); }
.field .opt { font-weight: 400; color: var(--inside-muted); font-size: var(--fs-xs); }
.form-status { margin-top: 14px; font-size: var(--fs-sm); }
.form-status.success { color: var(--teal-deep); font-weight: 500; }
.form-status.error { color: #B3261E; }
[hidden] { display: none !important; }

/* Published price anchor. Pricing was quote-only until 2026-09-11, when
   Nicholas set the all-module bundle at $10 per user / month. */
.price-anchor {
  margin: 22px auto 0; display: inline-flex; align-items: baseline; gap: 7px;
  font-size: var(--fs-base); color: var(--inside-muted);
}
.price-anchor strong {
  font-size: 34px; font-weight: 700; color: var(--charcoal); letter-spacing: -0.02em;
}
.price-anchor span { font-size: var(--fs-sm); }
.price-anchor--lg { margin: 14px 0 0; }
.price-anchor--lg strong { font-size: 42px; }

/* Legal documents. Clauses previously each had their own <section> with
   alternating soft/white backgrounds, so a 12-clause notice rendered as 12
   full-width bands. A contract should read as ONE continuous document, with
   the clause list available for navigation rather than implied by banding. */
.legal-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) {
  .legal-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 56px; }
  .legal-toc { position: sticky; top: 104px; }
}
.legal-toc__title {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--inside-muted); font-weight: 600; margin-bottom: 12px;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.legal-toc a {
  font-size: var(--fs-xs); line-height: 1.5; color: var(--inside-muted);
  text-decoration: none; display: block;
}
.legal-toc a:hover { color: var(--teal-deep); }
.legal-doc { max-width: var(--facelift-measure); }
.legal-clause + .legal-clause {
  margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--inside-border);
}
.legal-clause h2 {
  font-size: var(--fs-lg) !important; margin-bottom: 12px; scroll-margin-top: 104px;
}
.legal-clause p, .legal-clause li { font-size: var(--fs-sm); line-height: 1.7; }
.legal-clause ul { margin-top: 12px; }



/* Final CTA: tighten the copy block so the band is not mostly empty space.
   Padding was cut from 86px to 46px on 2026-09-11 — the segment read as a
   large void with a small button in it. */
.final-cta h2 { max-width: 22ch; margin-inline: auto; }
.final-cta > p { margin: 12px auto 20px !important; }
@media (max-width: 767px) {
  .final-cta { padding: 28px 20px !important; }
  .final-cta > p { margin: 10px auto 18px !important; }
  .final-cta h2 { max-width: none; }
}

/* Hero illustration. Sits between the h1 and the lead: above the eyebrow it read
   as a banner bolted on before the page began, and below the lead it read as an
   afterthought. The artwork is 3.03:1, so at container width it would be ~396px
   tall — capped so it stays a band inside the hero rather than pushing the lead
   below the fold. Object-position favours the upper-middle of the composition,
   where the figures and devices sit. */
.hero-illus { width: 100%; }
.hero-illus img {
  display: block; width: 100%; height: auto;
  max-height: 300px; object-fit: cover; object-position: 50% 42%;
  border-radius: var(--facelift-radius-lg, 20px);
  background: var(--facelift-soft, #f7faf9);
}
@media (max-width: 767px) {
  .hero-illus img { max-height: 178px; border-radius: 14px; }
}

/* 404. Centred and vertically generous so the page reads as a deliberate stop
   rather than a broken render, with home as the obvious primary action. */
.notfound { padding-block: clamp(56px, 9vw, 104px); }
.notfound__inner { max-width: 620px; margin-inline: auto; text-align: center; }
.notfound__inner .eyebrow { justify-content: center; }
.notfound__inner .btn-row { justify-content: center; }
.notfound__inner h1 { max-width: none; }
.notfound__links {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid; gap: 16px;
  max-width: 940px; margin-inline: auto;
}
@media (min-width: 800px) { .notfound__links { grid-template-columns: repeat(3, 1fr); } }
.notfound__card {
  display: block; padding: 20px 22px; text-decoration: none;
  border: 1px solid var(--inside-border); border-radius: 14px; background: #fff;
  transition: border-color .15s ease, transform .15s ease;
}
.notfound__card:hover { border-color: var(--teal); transform: translateY(-2px); }
.notfound__card strong { display: block; font-size: var(--fs-sm); color: var(--charcoal); margin-bottom: 6px; }
.notfound__card span { font-size: var(--fs-xs); line-height: 1.7; color: var(--inside-muted); }

/* Turnstile mount point. Reserves nothing when empty (blocked scripts, or a
   hostname the widget does not cover) so the form does not show a mystery gap. */
.turnstile-holder:not(:empty) { margin: 4px 0 18px; min-height: 65px; }

/* Pricing hero. The illustration sits between the h1 and the lead, which pushes
   the published price down the page, and on a pricing page the number is the point.
   The height cut comes from the SURROUNDING gaps, not from the artwork: an earlier
   attempt capped the image at 196px and visibly mangled the illustration, which is
   not a trade worth making for ~100px. The image keeps the site-standard treatment. */
.pricing-hero { padding: 30px 0 20px; }
.pricing-hero .hero-illus { margin-top: 30px; margin-bottom: 26px; }
.pricing-hero .price-anchor { margin-top: 16px; }
.price-note {
  max-width: 60ch; margin: 14px auto 0;
  font-size: var(--fs-micro); line-height: 1.7; color: var(--inside-muted);
}
@media (max-width: 767px) {
  .pricing-hero { padding: 20px 0 16px; }
}

/* ── Data tables ──────────────────────────────────────────────────────────────
   Desktop: an ordinary table. Phone: each row becomes one labelled block, using
   the data-label on every cell to carry its column header.

   This replaces a horizontal scroll container. That container was the wrong shape
   twice over: two of the three tables were never wrapped in one, and the mobile
   rule set overflow-x:visible on the wrapper — so a wide table pushed the entire
   PAGE sideways instead of scrolling inside its own box, which is the opposite of
   what "no sideways scrolling on mobile" was supposed to achieve. Stacked rows
   overflow in no direction at all. */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th,
.data-table td {
  padding: 12px 16px; text-align: left; vertical-align: top;
  line-height: 1.5; border-bottom: 1px solid var(--inside-border);
}
.data-table th {
  font-weight: 600; color: var(--charcoal);
  background: var(--facelift-soft, #f7faf9);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
}
.data-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 767px) {
  /* Hide the header row: each cell carries its own label instead. */
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td { display: block; width: 100%; }
  .data-table tr {
    border: 1px solid var(--inside-border); border-radius: 12px;
    padding: 4px 0; margin-bottom: 12px; background: #fff;
  }
  .data-table tr:last-child { margin-bottom: 0; }
  .data-table td { border-bottom: 0; padding: 8px 16px; }
  .data-table td::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em;
    font-weight: 600; color: var(--inside-muted);
  }
  /* The first cell is the row's subject, so it reads as the block's heading. */
  .data-table td:first-child { font-weight: 600; color: var(--charcoal); }
  .data-table td:first-child::before { color: var(--teal-deep); }
}

/* ── Legal documents ─────────────────────────────────────────────────────────
   Legal text was set at --fs-sm (15px). These are the longest continuous reads on
   the site and the two pages most likely to be opened on a phone from an app-store
   listing, so they get full body size. */
.legal-clause p,
.legal-clause li { font-size: var(--fs-base) !important; line-height: 1.7; }
.legal-clause h2 { font-size: var(--fs-lg) !important; }

@media (max-width: 999px) {
  /* Below the two-column breakpoint the clause index sits ABOVE the document, so
     14 links would push the actual text off the first screen. Collapse it. */
  .legal-toc {
    border: 1px solid var(--inside-border); border-radius: 12px;
    padding: 14px 16px; background: var(--facelift-soft, #f7faf9);
  }
  .legal-toc ol { max-height: 168px; overflow-y: auto; gap: 10px; }
  .legal-toc a { font-size: var(--fs-sm); }
}
@media (max-width: 767px) {
  .legal-clause + .legal-clause { margin-top: 28px; padding-top: 28px; }
}