/* Public marketing website stylesheet.
   W2.0 isolated this file from the app stylesheet (public pages load ONLY public.css
   via base.html's head_css block). W2.1b-i adds the restrained public design
   foundation: design tokens + global typography/baseline + shared color/link/button
   foundations + a container foundation, with the W1 .public-* chrome refactored to
   inherit the tokens (light touch — no full nav/footer finish, no home-* section
   composition; those are W2.1b-ii / W3 / W4). System font stack only — no web fonts,
   no CDN, no dependencies. */

/* ---- Design tokens (locked values) --------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Colors */
  --color-navy: #0A1628;
  --color-orange: #F6931A;
  --color-gray: #8B8F94;
  --color-text: #1A2332;
  --color-bg: #FFFFFF;
  --color-border: #E5E7EB;
  --color-muted: #8B8F94;

  /* Type scale (system sans stack — no dependency) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;

  /* Spacing — 8px base rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;

  /* Layout */
  --container-max: 1120px;
}

/* ---- Base / reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
}
img { max-width: 100%; height: auto; }

/* ---- Typography --------------------------------------------------------------- */
h1, h2, h3 {
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-2); }

/* ---- Links + buttons ---------------------------------------------------------- */
a { color: var(--color-navy); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font: inherit;
  color: var(--color-bg);
  background: var(--color-navy);
  border: 1px solid var(--color-navy);
  padding: var(--space-1) var(--space-3);
  border-radius: 4px;
  cursor: pointer;
}
button:hover { background: var(--color-text); border-color: var(--color-text); }
button:disabled,
button[disabled] {
  /* Intentional disabled state (e.g. the "Coming soon" CTA): muted + not-allowed,
     never broken. Baseline only — no bespoke home-cta treatment here. */
  color: var(--color-muted);
  background: var(--color-bg);
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* ---- Container / layout foundation --------------------------------------------- */
/* The generic content region (all public pages). Centered max-width column with the
   mobile horizontal padding. Nav/footer stay full-bleed (aligning their inner content
   to the container needs an inner wrapper = markup = deferred to W3/W4). */
.public-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3);
}

/* ---- Public chrome (W1) — refactored to inherit tokens (light touch) ------------ */
.public-shell { display: flex; flex-direction: column; min-height: 100vh; }
.public-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--color-bg);         /* light ground for the navy-on-white lockup */
  border-bottom: 1px solid #8B8F9433;  /* kept literally as-is (W2.1b-ii may retreat) */
}
.public-brand { display: inline-flex; align-items: center; }
.public-logo { height: 40px; width: auto; display: block; }
.public-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.public-nav-links a { color: var(--color-navy); text-decoration: none; }
.public-nav-links a:hover { color: var(--color-orange); }
.public-nav-login {
  color: var(--color-bg);
  background: var(--color-orange);     /* orange CTA — sparing accent */
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
}
.public-nav-login:hover { color: var(--color-bg); }
.public-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.5rem 1.25rem;
  background: var(--color-navy);       /* brand navy ground */
  color: var(--color-bg);
}
.public-footer a { color: var(--color-bg); }
.public-footer-name { font-weight: 600; }
.public-tagline { margin: 0.25rem 0 0; color: var(--color-muted); }
.public-reach-label { color: var(--color-muted); }
.public-reach-list {
  display: flex;
  gap: 0.75rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  min-height: 1rem;                    /* keeps the empty structural slots visible */
}
.public-reach-slot { min-width: 1rem; }
.public-footer-baseline { width: 100%; color: var(--color-muted); }

/* ---- Home page composition (W2.1b-ii) ------------------------------------------
   Purely visual finish for the public Home, written against the W2.1a home-* hooks.
   Emphasis comes from TWO levers only: vertical rhythm/whitespace and typography
   (size, leading, color). No background fills, borders, cards, shadows, dividers, or
   orange on Home. Flat white page, one left-aligned spine, ~680px prose measure. */

/* Single left-aligned spine + readable prose measure. Each section is a left-aligned
   block within the centered .public-main container, so eyebrow/headings/body/CTAs
   share one left edge and body text never runs the full 1120px width. Section
   separation is whitespace; per-section weight is tuned below.
   (Base rhythm: --space-6 / 3rem block — locked. Heavier/softer beats override it.) */
.home-hero,
.home-problem,
.home-sampling,
.home-demo,
.home-identity,
.home-close {
  max-width: 680px;
  padding-block: var(--space-6);
}

/* Shared eyebrow treatment — muted, small, uppercase, letter-spaced. Reused as-is by
   the S5 identity tagline, an intentional bookend to the Hero eyebrow. */
.home-eyebrow,
.home-identity-close,
.public-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Hero (S1) — eyebrow -> H1 -> subhead -> CTAs, sized to content (not full-viewport). */
.home-hero-subhead {
  max-width: 680px;
  font-size: var(--text-lg);
  color: var(--color-text);
}
.home-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
/* Secondary working CTA — link-like, keeps its ↓. The disabled Demo button reads as
   the visually-intended-but-muted primary via the W2.1b-i disabled state (untouched). */
/* The live demo CTA (a link now that the demo is open) — styled like the primary button. */
a.home-cta--demo {
  display: inline-block;
  color: var(--color-bg);
  background: var(--color-navy);
  border: 1px solid var(--color-navy);
  padding: var(--space-1) var(--space-3);
  border-radius: 4px;
}
a.home-cta--demo:hover { background: var(--color-text); border-color: var(--color-text); text-decoration: none; }

.home-cta--sampling {
  color: var(--color-navy);
  font-weight: 500;
}

/* Problem (S2) — the HEAVIEST beat: the most vertical breathing room on the page, so
   it stands clearly apart from the uniform --space-6 rhythm (composed from existing
   tokens, no new token; base rhythm untouched), plus a pain paragraph at --text-lg
   with looser leading so it reads clearly larger than standard body. Weight from
   space + type only — H2 stays --text-xl, no border/fill. */
.home-problem { padding-block: calc(var(--space-12) + var(--space-6)); }
.home-problem p {
  font-size: var(--text-lg);
  line-height: 1.8;
}

/* Sampling (S3) — outcome line gets slightly more typographic prominence. */
.home-sampling-outcome {
  font-size: var(--text-lg);
  color: var(--color-text);
}
/* Two-column anchors on desktop (stack on mobile). Borderless — no cards, boxes,
   shadows, or left-rules; separation is column-gap + alignment only. Label carries
   navy/semibold emphasis; desc stays body. No orange. */
.home-anchors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}
.home-anchor-label {
  margin: 0 0 var(--space-1);
  color: var(--color-navy);
  font-weight: 600;
}
.home-anchor-desc { margin: 0; }

/* Close (S6) — the SOFTEST beat: generous relative whitespace and the quietest type
   (muted body). Stays left-aligned (no centered exception); no CTA (none in markup). */
.home-close { padding-block: var(--space-8); }
.home-close p { color: var(--color-muted); }

/* ---- Responsive (restrained — one breakpoint) ---------------------------------- */
@media (max-width: 640px) {
  h1 { font-size: var(--text-2xl); }   /* ease the hero H1 on narrow screens */
  .public-main { padding: var(--space-2) var(--space-3); }

  /* Home (W2.1b-ii): section vertical spacing steps down; S2/S6 stay relatively heavier. */
  .home-hero,
  .home-sampling,
  .home-demo,
  .home-identity {
    padding-block: var(--space-4);
  }
  .home-problem { padding-block: var(--space-8); }
  .home-close { padding-block: var(--space-6); }

  /* Anchors stack; content measure collapses to the available width naturally. */
  .home-anchors { grid-template-columns: 1fr; }
}

/* ---- Sampling page composition (W3) --------------------------------------------
   Additive public /sampling page. Parallels the Home spine: each <section> is a
   left-aligned block within the centered .public-main, capped to the ~680px prose
   measure, separated by whitespace. Emphasis from rhythm + type only — no fills,
   borders, cards, shadows, dividers, or orange. Uniform --space-6 rhythm (no
   Home-style per-section tone-curve). Consumes existing tokens only. */
.w3-lead,
.w3-lifecycle,
.w3-clarity,
.w3-close {
  max-width: 680px;
  padding-block: var(--space-6);
}

/* Lead — eyebrow -> H1 -> orienting line. Lead body reads at --text-lg to open the
   page slightly warmer, consistent with Home's hero subhead scale. */
.w3-lead p:not(.public-eyebrow) {
  font-size: var(--text-lg);
  color: var(--color-text);
}

/* Responsive — fold into the SAME single breakpoint discipline as Home. Section
   vertical spacing steps down; measure collapses naturally. (h1 shrink and
   .public-main padding are already global at this breakpoint — inherited, not
   redefined.) */
@media (max-width: 640px) {
  .w3-lead,
  .w3-lifecycle,
  .w3-clarity,
  .w3-close {
    padding-block: var(--space-4);
  }
}

/* ---- Velosys page composition (W4) --------------------------------------------
   "How Velosys is built" — three beats (fidelity -> burden -> clarity). Same prose
   measure + uniform --space-6 rhythm as Sampling (W3); no Home-style tone-curve.
   Consumes existing tokens only. */
.w4-lead,
.w4-burden,
.w4-clarity {
  max-width: 680px;
  padding-block: var(--space-6);
}

@media (max-width: 640px) {
  .w4-lead,
  .w4-burden,
  .w4-clarity {
    padding-block: var(--space-4);
  }
}