/* ==========================================================================
   YardHub - Marketing Site
   Design tokens mirrored from the application (src/app/globals.css)
   ========================================================================== */

:root {
  /* This site ships one authored (light) theme only. Declaring color-scheme
     tells browsers/OS "auto-dark" engines (Chromium Auto Dark Theme, Edge,
     Samsung Internet, Firefox, etc.) that light rendering is intentional, so
     they should not algorithmically invert/recolor the page or restyle
     native form controls into a mismatched dark chrome. See the dark-mode
     compatibility section near the end of this file for related rules. */
  color-scheme: light;

  --radius: 0.5rem;
  --bg: #ecf0f1;
  --navy: #0e1e35;
  --navy-2: #16294a;
  --navy-border: #1e2a36;
  --card: #ffffff;
  --text: #0b1a23;
  --muted: #5b6b73;
  --accent: #037f5a;
  --accent-dark: #026749;
  --accent-soft: #e6f4ef;
  --gold: #c2a269;
  --success: #2ecc71;
  --success-light: #e8f9ef;
  --warning: #f5a623;
  --warning-light: #fef5e5;
  --danger: #e74c3c;
  --danger-light: #fde8e8;
  --border: #e6eef3;
  --placeholder: #9aa9b1;
  --field-bg: #f4f6f7;
  --shadow-sm: 0 1px 2px 0 rgb(11 26 35 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(11 26 35 / 0.07), 0 2px 4px -2px rgb(11 26 35 / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(11 26 35 / 0.08), 0 4px 6px -4px rgb(11 26 35 / 0.06);
  --shadow-xl: 0 24px 48px -12px rgb(14 30 53 / 0.18);
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --max-w: 72rem;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4 {
  margin: 0 0 0.75rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text);
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  z-index: 200;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section {
  padding: 5.5rem 0;
}

.section-tight {
  padding: 3.5rem 0;
}

.section-alt {
  background: var(--bg);
}

.section-onboarding {
  background: #ecf0f1;
  border-top: 1px solid var(--border);
}

.section-navy {
  background: var(--navy);
  color: #c7d2de;
}

.section-navy h2,
.section-navy h3 {
  color: #fff;
}

/* Section headers */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.kicker::before {
  content: '';
  width: 1.25rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.section-head {
  max-width: 44rem;
  margin-bottom: 3rem;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head.center .kicker {
  justify-content: center;
}

.section-head h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.section-head p {
  font-size: 1.125rem;
  color: var(--muted);
  margin-bottom: 0;
}

.section-head .kicker,
.page-hero .kicker,
.feature-copy .kicker {
  font-size: 0.875rem;
  color: var(--accent);
}

.section-navy .section-head p {
  color: #97a6b8;
}

/* --------------------------------------------------------------------------
   Buttons (mirrors app .btn-primary / .btn-secondary)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-dark);
  box-shadow: 0 6px 16px -4px rgb(3 127 90 / 0.45);
  transform: translateY(-1px);
}

.btn-secondary {
  background: #fff;
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: var(--bg);
}

.btn-gold-hover.btn-gold-hover:hover {
  background: #b99d75;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px -4px rgb(185 157 117 / 0.5);
  transform: translateY(-1px);
}

.btn-ghost-light {
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  border-color: rgb(255 255 255 / 0.18);
}

.btn-ghost-light:hover {
  background: rgb(255 255 255 / 0.14);
}

.btn-outline-prominent {
  border-width: 2px;
  border-color: var(--accent);
  color: var(--accent);
}

.btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: 1.0625rem;
  border-radius: var(--radius);
}

.btn-block {
  width: 100%;
}

.btn .arrow {
  transition: transform 0.15s ease;
}

.btn:hover .arrow {
  transform: translateX(3px);
}

/* Badges (mirrors app badge classes) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: calc(var(--radius) - 2px);
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-green { background: var(--success-light); color: #1a9d54; }
.badge-amber { background: var(--warning-light); color: #c47d0e; }
.badge-red   { background: var(--danger-light); color: var(--danger); }
.badge-navy  { background: #e8edf5; color: var(--navy); }
.badge-accent{ background: var(--accent-soft); color: var(--accent); }

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 4.25rem;
  padding: 0.75rem 0;
  transition: min-height 0.2s ease, padding 0.2s ease;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  margin-right: auto;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: auto;
  height: 4.5rem;
  /* The logo must never distort: opt out of the global img { max-width:100% }
     shrink so flex pressure can't squash it; breakpoints scale it instead */
  max-width: none;
  flex: none;
  transition: height 0.2s ease;
}

.site-header.scrolled .nav {
  min-height: 3.25rem;
  padding: 0.4rem 0;
}

.site-header.scrolled .brand img {
  height: 3rem;
}

.brand .brand-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.1;
}

.brand .brand-name em {
  font-style: normal;
  color: var(--accent);
}

.brand .brand-sub {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: block;
  padding: 0.5rem 0.875rem;
  border-radius: calc(var(--radius) - 2px);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
}

.nav-links a:hover {
  background: var(--bg);
  text-decoration: none;
}

.nav-links a[aria-current='page'] {
  color: var(--accent);
  font-weight: 600;
}

/* Log in inside the collapsible menu: mobile-only (desktop has the header button) */
.nav-links .nav-login {
  display: none;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  padding: 0.5rem;
  cursor: pointer;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(50rem 28rem at 85% -10%, rgb(3 127 90 / 0.1), transparent 60%),
    radial-gradient(40rem 24rem at -10% 20%, rgb(14 30 53 / 0.08), transparent 60%),
    linear-gradient(180deg, #eef3f3 0%, #fff 100%);
}

.hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(11 26 35 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(11 26 35 / 0.035) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(60rem 34rem at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(60rem 34rem at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  text-align: center;
  max-width: 52rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Screen 1: logo/headline/lede/pills fill the first viewport. Capped so
   unusually tall screens don't leave a void. */
.hero-top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(calc(100vh - 5.75rem), 64rem);
  min-height: min(calc(100svh - 5.75rem), 64rem);
}

/* Positioned so it never affects the flow/position of the headline or any
   other hero-top content */
.hero-rider-img {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-58%);
  margin-right: 1.5rem;
  height: 20rem;
  width: auto;
  pointer-events: none;
}

@media (max-width: 72rem) {
  .hero-rider-img {
    display: none;
  }
}

.hero-ctas-below {
  margin-top: 2.5rem;
}


.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.75rem;
}

.hero-eyebrow .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-light);
}

.hero h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
  color: var(--navy);
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero .lede {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--muted);
  max-width: 40rem;
  margin: 0 auto 2.25rem;
}

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 0.875rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.hero-note {
  font-size: 0.8125rem;
  color: var(--placeholder);
  margin-bottom: 0;
}

.hero-note-below {
  text-align: center;
  margin: 1.25rem 0 4rem;
}

.hero-points {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem 1rem;
  width: max-content;
  max-width: calc(100vw - 2.5rem);
  margin: 0.75rem 0 2.25rem;
  padding: 0;
}

.hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  background: var(--accent);
  border-radius: 999px;
  padding: 0.625rem 1.25rem;
  box-shadow: 0 10px 22px -8px rgb(3 127 90 / 0.55);
}

.hero-points li svg {
  color: #fff;
  flex: none;
}

/* Below the fold: everything from the mockup screenshot down */
.hero-below {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.hero-below-logo {
  width: 18.5rem; /* reduced by 20% from 23.125rem */
  height: auto;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .hero-below-logo {
    display: none;
  }
}

/* Hero mockup stage */
/* Screen 2: mockup, CTA buttons and pilot note fill the second viewport. */
.hero-stage-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(100vh, 64rem);
  min-height: min(100svh, 64rem);
}

.hero-stage {
  position: relative;
  width: 100%;
  margin-top: 2.5rem;
}

.float-card {
  position: absolute;
  z-index: 3;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  padding: 0.875rem 1.125rem;
  font-size: 0.8125rem;
  min-width: 13rem;
  text-align: left;
}

.float-card .fc-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--text);
  margin-bottom: 0.375rem;
}

.float-card .fc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}

.float-card .fc-body {
  color: var(--muted);
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
}

.float-1 { top: 20%; left: -3.5rem; animation: float 7s ease-in-out infinite; }
.float-2 { top: 40%; right: -3.75rem; animation: float 8s ease-in-out 1.2s infinite; }
.float-3 { bottom: 11%; left: -2.5rem; animation: float 9s ease-in-out 0.6s infinite; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* --------------------------------------------------------------------------
   Browser mockup + faux app UI
   -------------------------------------------------------------------------- */
.browser {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: #f7fafb;
  border-bottom: 1px solid var(--border);
}

.browser-dots {
  display: flex;
  gap: 0.375rem;
  flex: none;
}

.browser-dots span {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: #dfe6ea;
}

.browser-dots span:nth-child(1) { background: #f3aca4; }
.browser-dots span:nth-child(2) { background: #f5d58d; }
.browser-dots span:nth-child(3) { background: #a8dfc0; }

.browser-url {
  flex: 1;
  max-width: 22rem;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.71875rem;
  color: var(--muted);
  padding: 0.25rem 0.875rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.browser-url svg {
  flex: none;
  color: var(--accent);
}

/* Faux app shell */
.app {
  display: flex;
  background: var(--bg);
  min-height: 24rem;
  text-align: left;
  font-size: 0.75rem;
}

.app-side {
  flex: none;
  width: 11.5rem;
  background: var(--navy);
  color: #b9c6d4;
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.app-side .app-logo {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0.5rem 0.625rem;
}

.app-side .app-logo img {
  width: 7.5rem;
  height: auto;
  border-radius: 0.5rem;
}

.app-side .app-yard {
  margin: 0 0.25rem 0.625rem;
  padding: 0.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 0.625rem;
  font-weight: 500;
  color: rgba(236, 240, 241, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-side .app-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  padding: 0.5rem 0.375rem 0.125rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.5625rem;
  color: rgba(236, 240, 241, 0.5);
  white-space: nowrap;
}

.app-side .app-user .t {
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-side .app-user strong {
  color: rgba(236, 240, 241, 0.7);
  font-weight: 600;
}

.app-side .app-user .ava {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
}

.app-side .app-nav-div {
  height: 1px;
  margin: 0.375rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
}

.app-nav-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.625rem;
  border-radius: 0.375rem;
  white-space: nowrap;
}

.app-nav-item svg {
  flex: none;
  opacity: 0.8;
}

.app-nav-item.active {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  font-weight: 600;
}

.app-main {
  flex: 1;
  padding: 1.125rem;
  min-width: 0;
}

.app-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.app-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.app-sub {
  color: var(--muted);
  font-size: 0.71875rem;
}

.app-btn {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.71875rem;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  white-space: nowrap;
}

.app-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}

.app-stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  box-shadow: var(--shadow-sm);
}

.app-stat .n {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.app-stat .l {
  color: var(--muted);
  font-size: 0.65625rem;
}

.app-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.app-panel + .app-panel {
  margin-top: 0.875rem;
}

.app-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  color: var(--text);
  font-size: 0.75rem;
}

.app-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.55rem 0.875rem;
}

.app-row + .app-row {
  border-top: 1px solid var(--border);
}

.app-row .grow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-row .who {
  font-weight: 600;
  color: var(--text);
}

.app-row .meta {
  color: var(--muted);
  font-size: 0.6875rem;
}

.app-avatar {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.59375rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #0a9e72);
}

.app-avatar.navy { background: linear-gradient(135deg, var(--navy), #29456e); }
.app-avatar.gold { background: linear-gradient(135deg, #a8874e, var(--gold)); }

.app-badge {
  flex: none;
  border-radius: 0.3rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.625rem;
  font-weight: 700;
}

.app-badge.g { background: var(--success-light); color: #1a9d54; }
.app-badge.a { background: var(--warning-light); color: #c47d0e; }
.app-badge.r { background: var(--danger-light); color: var(--danger); }
.app-badge.v { background: #ede9fe; color: #6d28d9; }
.app-badge.b { background: #dbeafe; color: #1d4ed8; }
.app-badge.o { background: #ffedd5; color: #c2410c; }

.app-check {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 0.25rem;
  border: 1.5px solid var(--placeholder);
}

.app-check.done {
  background: var(--accent);
  border-color: var(--accent);
  position: relative;
}

.app-check.done::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.app-row .strike {
  text-decoration: line-through;
  color: var(--placeholder);
}

/* Two-column layout inside app main */
.app-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0.875rem;
}

/* Notification sticky notes (dashboard mockup) */
.app-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  align-content: start;
}

.app-note {
  border-radius: 0.2rem;
  padding: 0.5rem 0.625rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.12), -2px 2px 3px rgba(0, 0, 0, 0.05);
  font-size: 0.6875rem;
}

.app-note .nt {
  display: flex;
  justify-content: space-between;
  gap: 0.375rem;
  margin: 0 0 0.2rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--text);
}

.app-note .nx {
  color: #dc2626;
  font-weight: 600;
  line-height: 1;
}

.app-note .nb {
  margin: 0 0 0.35rem;
  color: #374151;
  line-height: 1.35;
}

.app-note .nf {
  display: flex;
  justify-content: space-between;
  gap: 0.375rem;
  margin: 0;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: #6b7280;
  font-size: 0.5625rem;
}

.app-note.yellow { background: #fef9c3; }
.app-note.green  { background: #d1fae5; }
.app-note.orange { background: #ffedd5; }
.app-note.blue   { background: #dbeafe; }
.app-note.pink   { background: #fce7f3; }

/* Spec sheet (horse profile style) */
.spec-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
}

.spec-head::before {
  content: '';
  width: 3px;
  height: 1rem;
  border-radius: 2px;
  background: var(--accent);
}

.spec-head .t {
  font-weight: 700;
  color: var(--text);
}

.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.875rem;
}

.spec-row + .spec-row {
  border-top: 1px solid var(--border);
}

.spec-row .k {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.spec-row .v {
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

/* --------------------------------------------------------------------------
   Pain points (before / after)
   -------------------------------------------------------------------------- */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.pain-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.375rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pain-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.pain-card .pain {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: var(--text);
  font-weight: 700;
  margin-bottom: 0.375rem;
}

.pain-card .pain .x {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--danger-light);
  color: var(--danger);
  margin-top: 0.05rem;
}

.pain-card .desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Headings forced onto a single line (wraps again on small phones) */
.cta-panel h2.one-line {
  max-width: none;
  white-space: nowrap;
}

@media (max-width: 36rem) {
  .cta-panel h2.one-line {
    white-space: normal;
  }
}

/* Resolution statement closing the problem-to-solution journey;
   matches .section-head h2 sizing ("Sound familiar?") */
.pain-resolution {
  margin: 2.75rem auto 0;
  max-width: 44rem;
  text-align: center;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

.pain-resolution strong {
  color: #fff;
  padding-bottom: 0.45em;
  /* Hand-drawn swoosh: tapered brush stroke in brand green */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 10 Q 60 2 118 7 Q 60 7 2 10 Z' fill='%23037F5A'/%3E%3C/svg%3E")
    no-repeat bottom center / 100% 0.5em;
}

/* Matches .section-head p styling on navy sections */
.pain-resolution-sub {
  margin: 1rem auto 0;
  max-width: 44rem;
  text-align: center;
  font-size: 1.125rem;
  color: #97a6b8;
}

.pain-card .fix {
  position: relative;
  padding-left: 2rem;
  color: var(--muted);
  font-size: 0.9375rem;
  margin: 0;
}

.pain-card .fix .tick {
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
}

.pain-card .fix strong {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Feature grid & feature rows
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.feature-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.feature-card .coming-soon {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  background: #d64545;
  color: #fff;
  border-radius: 999px;
  padding: 0.2rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: var(--shadow-sm);
}

.feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: #cfe5dc;
}

.feature-card .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: calc(var(--radius) - 2px);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.375rem;
}

.feature-card p {
  color: var(--muted);
  font-size: 0.9375rem;
  margin: 0;
}

/* Alternating screenshot rows */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3.5rem;
  align-items: center;
  padding: 3.5rem 0;
}

.feature-row + .feature-row {
  border-top: 1px solid var(--border);
}

.feature-row.flip .feature-copy { order: 2; }
.feature-row.flip .feature-visual { order: 1; }

.feature-copy h3 {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
}

.feature-copy > p {
  color: var(--muted);
  font-size: 1.0625rem;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.625rem;
}

.check-list li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  color: var(--text);
  font-size: 0.9375rem;
}

.check-list li svg {
  flex: none;
  margin-top: 0.2rem;
  color: var(--accent);
}

.check-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  max-width: 640px;
  margin: 1.25rem auto 0;
}

.check-pills li {
  align-items: center;
}

.pill-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0.375rem;
  background: var(--accent);
  color: #fff;
}

.check-list li .pill-tick svg {
  margin-top: 0;
  color: #fff;
}

.check-list li strong {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Industries
   -------------------------------------------------------------------------- */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1rem;
}

.industry-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Industry headings shown as a neat pill row */
.industry-tags {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Keep the single row on narrow screens by letting it scroll sideways */
@media (max-width: 56rem) {
  .industry-tags {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
}

.industry-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.55rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.industry-tag svg {
  color: var(--accent);
  flex: none;
}

.industry-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #0aa87a);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.industry-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.industry-card:hover::before {
  opacity: 1;
}

.industry-card .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: calc(var(--radius) - 2px);
  background: #e8edf5;
  color: var(--navy);
  margin-bottom: 0.875rem;
}

.industry-card h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.375rem;
}

.industry-card p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 2rem;
  text-align: center;
}

.stat .n {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.1;
}

.stat .n em {
  font-style: normal;
  color: #34d399;
}

.stat .l {
  color: #97a6b8;
  font-size: 0.9rem;
  margin-top: 0.375rem;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}

.testimonial {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.stars {
  display: flex;
  gap: 0.2rem;
  color: var(--gold);
  margin-bottom: 1rem;
}

.testimonial blockquote {
  margin: 0 0 1.5rem;
  color: var(--text);
  font-size: 0.9875rem;
  line-height: 1.65;
  flex: 1;
}

.testimonial .person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  padding-top: 1.125rem;
}

.testimonial .avatar {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  background: linear-gradient(135deg, var(--navy), #2c4a75);
  flex: none;
}

.testimonial .avatar.green { background: linear-gradient(135deg, var(--accent), #0aa87a); }
.testimonial .avatar.gold { background: linear-gradient(135deg, #a8874e, var(--gold)); }

.testimonial .who .name {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text);
}

.testimonial .who .role {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem;
  box-shadow: var(--shadow-sm);
}

.billing-toggle button {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--muted);
  padding: 0.45rem 1.125rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.billing-toggle button[aria-pressed='true'] {
  background: var(--navy);
  color: #fff;
}

.billing-toggle .save {
  font-size: 0.71875rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.375rem;
}

.billing-toggle button[aria-pressed='true'] .save {
  background: rgb(255 255 255 / 0.15);
  color: #6ee7b7;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-top: 2.5rem;
}

#plans .container,
#onboarding .container {
  max-width: 84rem;
}

.pricing-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 64rem) {
  .pricing-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 34rem) {
  .pricing-grid-4 {
    grid-template-columns: 1fr;
  }
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: calc(var(--radius) + 4px);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.price-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-xl);
}

.price-card .plan-tag {
  position: absolute;
  top: -0.8125rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.875rem;
  border-radius: 999px;
  white-space: nowrap;
}

.price-card h3 {
  font-size: 1.875rem;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.price-card .plan-for {
  color: var(--muted);
  font-size: 0.875rem;
  min-height: 2.6em;
  margin-bottom: 1.25rem;
}

.price-card .onboarding-fee {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  background: var(--success-light, #e7f5ef);
  color: var(--accent);
  font-size: 0.78125rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.price-card .onboarding-fee .amount {
  font-weight: 700;
}

.price-card .price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}

.price-card .price .amount {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.price-card .price .per {
  color: var(--muted);
  font-size: 0.875rem;
}

.price-card .billed-note {
  font-size: 0.78125rem;
  color: var(--placeholder);
  min-height: 1.4em;
  margin-bottom: 1.5rem;
}

.price-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  flex: 1;
}

.price-card ul li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--text);
}

.price-card ul li svg {
  flex: none;
  margin-top: 0.22rem;
  color: var(--accent);
}

.price-card ul li.dim {
  color: var(--placeholder);
}

.price-card ul li.dim svg {
  color: #d3dde3;
}

/* Comparison table */
.compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 40rem;
  font-size: 0.9rem;
}

.compare th,
.compare td {
  padding: 0.8rem 1.125rem;
  text-align: center;
  border-top: 1px solid var(--border);
}

.compare thead th {
  border-top: 0;
  background: #f7fafb;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--text);
}

.compare thead th:first-child,
.compare td:first-child,
.compare th[scope='row'] {
  text-align: left;
}

.compare th[scope='row'] {
  font-weight: 500;
  color: var(--text);
}

.compare .group-row th {
  background: #f7fafb;
  text-align: left;
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.compare .col-featured {
  background: rgb(3 127 90 / 0.04);
}

.compare .yes {
  color: var(--accent);
  font-weight: 700;
}

.compare .no {
  color: #cbd6dc;
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.faq-list {
  max-width: 46rem;
  margin: 0 auto;
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  font-weight: 600;
  color: var(--text);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .chev {
  flex: none;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.faq-item[open] summary .chev {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-item .faq-body {
  padding: 0 1.375rem 1.25rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.faq-item .faq-body p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
.cta-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(38rem 20rem at 85% 115%, rgb(3 127 90 / 0.35), transparent 60%),
    radial-gradient(30rem 18rem at 8% -20%, rgb(52 211 153 / 0.16), transparent 60%),
    var(--navy);
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
  color: #c7d2de;
}

.cta-panel h2 {
  color: #fff;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -0.02em;
  max-width: 32rem;
  margin: 0 auto 0.875rem;
}

.cta-panel p {
  max-width: 34rem;
  margin: 0 auto 2rem;
  color: #97a6b8;
  font-size: 1.0625rem;
}

.cta-panel .hero-ctas {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.375rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  padding: 0.625rem 0.875rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgb(3 127 90 / 0.15);
}

.field textarea {
  resize: vertical;
  min-height: 7rem;
}

.form-note {
  font-size: 0.8125rem;
  color: var(--placeholder);
}

.form-success {
  display: none;
  border: 1px solid #bfe8d4;
  background: var(--success-light);
  color: #14713c;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-weight: 600;
}

.form-success.show {
  display: block;
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgb(11 26 35 / 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.modal-close:hover {
  background: var(--border);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: #97a6b8;
  padding: 4rem 0 2rem;
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.09);
}

.footer-brand img {
  width: 8.5rem;
  margin-bottom: 1rem;
}

.footer-brand p {
  max-width: 18rem;
  font-size: 0.875rem;
}

.site-footer h4 {
  color: #fff;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.site-footer a {
  color: #b9c6d4;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.75rem;
  font-size: 0.8125rem;
  color: #6d7f93;
}

.footer-social {
  display: flex;
  gap: 0.625rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.14);
  color: #b9c6d4;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.footer-social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  background:
    radial-gradient(44rem 20rem at 80% -30%, rgb(3 127 90 / 0.08), transparent 60%),
    linear-gradient(180deg, #f7fafb, #fff);
  border-bottom: 1px solid var(--border);
  padding: 4.5rem 0 3.5rem;
  text-align: center;
}

.page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.page-hero p {
  max-width: 38rem;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.125rem;
}

/* Prose (legal pages) */
.prose {
  max-width: 46rem;
  margin: 0 auto;
}

.prose h2 {
  font-size: 1.375rem;
  margin-top: 2.5rem;
}

.prose h3 {
  font-size: 1.0625rem;
  margin-top: 1.75rem;
}

.prose p,
.prose li {
  color: var(--muted);
}

.prose .updated {
  font-size: 0.875rem;
  color: var(--placeholder);
}

/* About page: hero + story with full-bleed side image */
.about-divider {
  width: 100%;
  margin: 0;
  border: none;
  border-top: 1px solid var(--border);
}

.about-story {
  display: grid;
  grid-template-columns: minmax(0, 27.54vw) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.about-story-img {
  align-self: start;
  height: calc(100vh - 5.75rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 60%, transparent 100%);
  mask-image: linear-gradient(to right, #000 60%, transparent 100%);
}

.about-story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-story-content {
  min-width: 0;
}

.about-story-hero {
  background: none;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  text-align: center;
}

.about-story-hero .kicker {
  justify-content: center;
}

.about-story-hero p {
  margin-left: auto;
  margin-right: auto;
}

.about-story-section {
  padding-top: 0;
}

.about-story-text {
  margin: 0 auto;
  max-width: 40rem;
  padding: 0 1.25rem;
  text-align: center;
}

.about-story-text h2:first-child {
  margin-top: 0.75rem;
}

@media (max-width: 860px) {
  .about-story {
    display: block;
  }

  .about-story-img {
    display: none;
  }

  .about-story-hero {
    position: relative;
    min-height: calc(100vh - 5.75rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: linear-gradient(rgb(11 26 35 / 0.45), rgb(11 26 35 / 0.55)), url('../img/Jax.jpeg');
    background-size: cover;
    background-position: center 20%;
  }

  .about-story-hero .kicker,
  .about-story-hero h1,
  .about-story-hero p {
    color: #fff;
  }

  .about-story-hero .kicker::before {
    background: #fff;
  }

  .about-story-text {
    padding: 0 1.25rem;
    max-width: none;
    margin: 0 auto;
  }

  .about-story-section,
  .about-idea-section,
  .about-divider {
    background: #0e1e35;
  }

  .about-idea-section .prose {
    text-align: center;
  }

  .about-divider {
    border-top-color: rgb(255 255 255 / 0.12);
  }

  .about-story-section h2,
  .about-idea-section h2 {
    color: #fff;
  }

  .about-story-section p,
  .about-idea-section p {
    color: #c7d2de;
  }
}

/* Contact info cards */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.info-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 0;
}

.info-card + .info-card {
  border-top: 1px solid var(--border);
}

.info-card .icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: calc(var(--radius) - 2px);
  background: var(--accent-soft);
  color: var(--accent);
}

.info-card h3 {
  font-size: 1rem;
  margin-bottom: 0.125rem;
}

.info-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Logos / trust strip */
.trust-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fff;
  padding: 1.5rem 0;
}

.trust-strip .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem 2.5rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.trust-strip .item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.trust-strip .item svg {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Reveal animations
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .float-1, .float-2, .float-3 { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 64rem) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .feature-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .feature-row.flip .feature-copy { order: 1; }
  .feature-row.flip .feature-visual { order: 2; }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 78rem) {
  .float-card {
    display: none;
  }
}

@media (min-width: 78rem) {
  .hero-stage-wrap {
    min-height: min(80vh, 51.2rem);
  }

  .hero-stage {
    max-width: 80%;
    margin: 0 auto;
  }

  .hero-stage .app {
    min-height: 19.2rem;
  }
}

@media (max-width: 52rem) {
  .nav {
    gap: 1rem;
  }

  .brand img {
    height: 3.3rem;
  }

  .nav-links,
  .nav-cta .btn-secondary {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    flex-shrink: 0;
  }

  .nav.open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    position: absolute;
    top: 4.25rem;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 0.75rem 1.25rem 1rem;
  }

  .nav.open .nav-links a {
    padding: 0.75rem 0.875rem;
  }

  .nav-links .nav-login {
    display: list-item;
    border-top: 1px solid var(--border);
    margin-top: 0.375rem;
    padding-top: 0.375rem;
  }

  .nav-links .nav-login a {
    color: var(--accent);
    font-weight: 600;
  }

  .float-card {
    display: none;
  }

  .app-side {
    display: none;
  }

  .app-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .app-cols {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 3.75rem 0;
  }

  .hero {
    padding-top: 3.5rem;
  }

  .hero-top {
    min-height: calc(100vh - 3.5rem);
    min-height: calc(100svh - 3.5rem);
  }

  .hero-stage-wrap {
    min-height: 0;
  }

  .hero-stage {
    margin-top: 2.5rem;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 36rem) {
  .container {
    padding: 0 1rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .nav {
    gap: 0.625rem;
  }

  .brand img {
    height: 3rem;
  }

  .nav-cta {
    gap: 0.5rem;
  }

  .nav-cta .btn {
    padding: 0.55rem 0.875rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .brand .brand-sub {
    display: none;
  }

  .hero-ctas .btn {
    flex: 1 1 100%;
  }

  .app-notes {
    grid-template-columns: 1fr;
  }

  /* Decorative line breaks in headings read badly on narrow screens */
  .section-head br,
  .page-hero br,
  .hero .lede br {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Dark-mode / forced-colors compatibility
   --------------------------------------------------------------------------
   This site intentionally ships one authored (light) theme only - see
   `color-scheme: light` on :root above, which is the standards-based signal
   that tells browser/OS "auto-dark" engines (Chromium/Edge Auto Dark Theme,
   Samsung Internet, Firefox) not to algorithmically invert or recolor the
   page, and to keep native form control chrome (inputs, scrollbars, date
   pickers) rendering with light UA defaults instead of guessing a dark
   theme. That single declaration is the primary fix for auto-darkening.

   The rules below handle the one case color-scheme does NOT cover: Windows
   "High Contrast" / forced-colors mode, where the OS replaces author colors
   with a small system palette. Most of the site already survives this
   untouched (borders/backgrounds are simply swapped to system colors by the
   browser, text stays readable). The two exceptions below are elements that
   communicate meaning through background-color alone with no text/border
   fallback, so under forced-colors they can render as blank, boundary-less
   shapes. Both live inside the aria-hidden faux "app" screenshot mockups
   (decorative illustration, not functional UI), so nothing here fixes a
   real content-access problem - it just keeps the illustration from looking
   like a rendering bug for sighted Windows High Contrast users. */
@media (forced-colors: active) {
  /* The little "task complete" tick relies entirely on background-color for
     the box fill and a white border for the checkmark strokes - both are
     neutralized under forced-colors, which would leave an invisible mark
     inside a border-less box. Force a visible system-color box + tick. */
  .app-check {
    border-color: CanvasText;
    forced-color-adjust: none;
    background: Canvas;
  }

  .app-check.done {
    background: Highlight;
    border-color: Highlight;
  }

  .app-check.done::after {
    border-color: HighlightText;
  }

  /* Status/role pills (feature badges, avatar initials, note tags) in the
     mockups are color-coded with no visible border, so forced-colors can
     turn them into text with no perceivable boundary. Give them a system
     border so each chip stays legibly separated from its surroundings. */
  .app-badge,
  .app-avatar,
  .testimonial .avatar,
  .badge {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
  }
}