/* Crew Scheduler — marketing site. Self-contained, no external fonts or CDNs
   (keeps it CSP-friendly for later). System font stack. Navy + white, squared
   geometry. (Brand mark is the blue grid logo at /site/logo.svg.) */

:root {
  --navy: #1e2b4d;        /* logo navy — primary brand */
  --navy-soft: #2c3e69;   /* lifted navy — hero glow */
  --slate: #3a465f;
  --ink: #1f2a44;
  --muted: #6b7488;
  --line: #e3e7ef;
  --bg: #ffffff;
  --bg-soft: #f5f7fb;
  --brand: #1e2b4d;       /* CTAs + links are navy (monochrome, matches logo) */
  --brand-dark: #16203b;
  --radius: 6px;          /* squared, to echo the logo's geometry */
  --wrap: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }
.center { text-align: center; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; color: var(--navy); margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }

/* ── nav ────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 52px; width: auto; max-width: 100%; display: block; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--slate); font-weight: 500; white-space: nowrap; }
/* Six header links + the wordmark share one 68px row. Under 1080px tighten
   the spacing and shrink the wordmark; under 920px the text links come out
   (the CTAs stay) instead of breaking onto two lines or squeezing the logo.
   Thresholds measured in Chrome with and without the Sign up CTA showing. */
@media (max-width: 1080px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: .95rem; }
  .nav-links .nav-cta { padding: 8px 14px; }
  .brand-logo { height: 44px; }
}
@media (max-width: 920px) {
  .nav-links a:not(.nav-cta) { display: none; }
}
.nav-links .nav-cta {
  background: var(--brand); color: #fff; padding: 9px 17px;
  border-radius: var(--radius); font-weight: 600; white-space: nowrap;
}
.nav-links .nav-cta:hover { background: var(--brand-dark); text-decoration: none; }
@media (max-width: 620px) {
  .nav-links a:not(.nav-cta) { display: none; }
  /* The wordmark is a wide 210:34 lockup — at 52px it's ~321px, which crowds a
     CTA off a phone (body scrolled sideways). Shrink it so the row fits. */
  .brand-logo { height: 34px; }
  .nav-inner { gap: 12px; }
  .nav-links { gap: 10px; }
  .nav-links .nav-cta { padding: 8px 13px; }
  /* Phones have room for one header action: prefer Sign up when it's live. */
  body.signup-on .nav-demo { display: none; }
}

/* Self-serve signup CTAs — hidden until welcome.js confirms the server has
   self-serve signup turned on (the /api/auth/me self_serve_enabled flag). The
   descendant selectors outrank the plain `.btn` display, so the hero CTA stays
   hidden until the flag is on. */
.nav-links [data-signup-cta],
.hero-cta [data-signup-cta] { display: none; }
body.signup-on .nav-links [data-signup-cta],
body.signup-on .hero-cta [data-signup-cta] { display: inline-block; }

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; font-weight: 600; border-radius: var(--radius);
  padding: 12px 22px; cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease, transform .05s ease; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 15px 30px; font-size: 1.05rem; }

/* On light sections: solid navy. */
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }

/* On the navy hero + demo band: invert to a white button so it reads. */
.hero .btn-primary, .demo .btn-primary { background: #fff; color: var(--navy); }
.hero .btn-primary:hover, .demo .btn-primary:hover { background: #e7ecf6; color: var(--navy); }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero {
  background: radial-gradient(1200px 520px at 72% -12%, var(--navy-soft) 0%, var(--navy) 58%);
  color: #d7deec; padding: 96px 0 88px; text-align: center;
}
.hero h1 { color: #fff; margin-bottom: .35em; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .22em; font-size: .8rem;
  font-weight: 700; color: #aeb9d6; margin: 0 0 1rem;
}
.lede { font-size: 1.2rem; color: #c4cde0; max-width: 640px; margin: 0 auto 2rem; }
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* When self-serve signup is live, Sign up is the hero's primary action, so the
   demo button steps back to the outline (ghost) treatment for a clear hierarchy. */
body.signup-on .hero-demo {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45);
}
body.signup-on .hero-demo:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.credibility { margin-top: 2.25rem; color: #9aa6c2; font-size: .98rem; font-style: italic; }

/* ── sections ───────────────────────────────────────────────────────── */
.section { padding: 72px 0; }
.section:nth-of-type(even) { background: var(--bg-soft); }
/* index.html's #pricing (2026-08-26) is the 4th section, which would shift
   the even/odd banding of everything below it. Flip the parity after
   #pricing so those sections keep the backgrounds they had before it was
   added (.demo bands stay navy via their !important rule). */
#pricing ~ .section:nth-of-type(even) { background: var(--bg); }
#pricing ~ .section:nth-of-type(odd) { background: var(--bg-soft); }
.problem p { font-size: 1.12rem; color: var(--slate); }

/* ── cards ──────────────────────────────────────────────────────────── */
.cards {
  display: grid; gap: 20px; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.card {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy);
  border-radius: var(--radius); padding: 24px; box-shadow: 0 1px 2px rgba(30, 43, 77, .05);
}
.card h3 { color: var(--navy); }
.card p { color: var(--muted); margin: 0; }

/* ── pricing ──────────────────────────────────────────────────────────────────── */
/* Prices are static text in index.html, mirrored from pricing.py (the single
   source of truth). Four cards across on a laptop, 2×2 under 900px, one
   column on phones. Reuses .cards/.card so the plan cards match the feature
   cards above them. */
.pricing-sub { color: var(--slate); font-size: 1.12rem; max-width: 960px; margin: 0; }
/* 960px (not the 720px the other sub-lines use) so the one-sentence pricing
   line reads on ONE line on a laptop instead of wrapping its last word
   (Todd 2026-09-02). Phones still wrap it naturally. */
.pricing-cards { grid-template-columns: repeat(4, 1fr); }
.plan { text-align: center; padding: 28px 20px; }
.plan h3 { margin-bottom: .35em; }
.plan .plan-price {
  color: var(--navy); font-size: 2rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.01em; margin: 0 0 .35em;
}
.plan .plan-price .per { font-size: 1rem; font-weight: 500; color: var(--muted); margin-left: 2px; }
.plan .plan-price a { color: var(--navy); }
.plan .plan-workers { color: var(--muted); margin: 0; }
.pricing-note { color: var(--muted); font-size: .95rem; margin: 1.5rem 0 0; }
.pricing-note + .pricing-note { margin-top: .4rem; }
@media (max-width: 900px) { .pricing-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pricing-cards { grid-template-columns: 1fr; } }

/* ── demo band ──────────────────────────────────────────────────────── */
.demo { background: var(--navy) !important; color: #c4cde0; }
.demo h2 { color: #fff; }
.demo p { max-width: 620px; margin: 0 auto 1.75rem; color: #c4cde0; }

/* ── contact ────────────────────────────────────────────────────────── */
.contact-form { margin-top: 1.5rem; }
.field { margin-bottom: 16px; display: flex; flex-direction: column; }
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; }
@media (max-width: 520px) { .field-row { flex-direction: column; gap: 0; } }
label { font-weight: 600; margin-bottom: 6px; color: var(--slate); font-size: .95rem; }
.req { color: var(--navy); }
.opt { color: var(--muted); font-weight: 400; font-size: .85rem; }
input {
  font: inherit; padding: 11px 13px; border: 1px solid #c5cdda;
  border-radius: var(--radius); background: #fff; color: var(--ink); width: 100%;
}
input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.form-hint { color: var(--muted); font-size: .9rem; margin: 4px 0 18px; }
.form-note { color: var(--muted); font-size: .85rem; margin-top: 12px; }
.thanks {
  margin-top: 1.5rem; padding: 28px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg-soft); text-align: center;
}
.thanks h3 { color: var(--navy); }
.thanks p { color: var(--slate); margin: 0; }

/* ── legal pages (terms / privacy placeholders) ─────────────────────── */
.draft-banner {
  background: #fef3c7; border: 1px solid #fde68a; color: #92400e;
  border-radius: var(--radius); padding: 14px 18px; margin: 24px 0 8px;
  font-size: .95rem;
}
.legal { padding: 40px 0 72px; }
.legal h1 { font-size: 2rem; }
.legal h2 { font-size: 1.25rem; margin-top: 1.75rem; }
.legal p, .legal li { color: var(--slate); }
.legal .updated { color: var(--muted); font-size: .9rem; }
.legal .back { display: inline-block; margin-bottom: 8px; }

/* ── footer ─────────────────────────────────────────────────────────── */
.footer { background: var(--navy); color: #9aa6c2; padding: 40px 0; font-size: .92rem; }
.footer-inner { display: flex; flex-direction: column; gap: 14px; }
.footer-disclaimer { max-width: 720px; color: #c4cde0; }
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.footer a { color: #c4cde0; }
.footer .sep { color: #4a5572; }