/* =========================================================================
   JobSteward — Marketing layer
   v1.0 · 2026-07-17 · Extends tokens.css. Spec: MARKETING.md
   Import order MATTERS: tokens.css first, this file second.
   Landing surfaces only. Do NOT import into the product app.
   Synced verbatim from the JobSteward design system. Do not hand-edit.
   ========================================================================= */

:root {
  /* ---- Marketing display scale (on top of the product scale) ---- */
  --m-t-hero:       64px;  --m-t-hero-lh:     68px;
  --m-t-section:    40px;  --m-t-section-lh:  46px;
  --m-t-lede:       20px;  --m-t-lede-lh:     32px;
  --m-t-eyebrow:    11px;  --m-t-eyebrow-lh:  14px;

  /* ---- Dark ground (marketing-only license; max 2 sections per page) ---- */
  --m-ground-dark:        #0D2440;            /* = --c-navy-deep */
  --m-on-dark:            #FFFFFF;            /* 15.63:1 on navy-deep */
  --m-on-dark-secondary:  rgba(255,255,255,.72);
  --m-hairline-dark:      rgba(255,255,255,.14);

  /* ---- Section rhythm ---- */
  --m-section-y:  var(--s-9);   /* 96px desktop */
  --m-frame-shadow: var(--e-modal);

  /* ---- Cabin light (SideRays) ---- */
  --m-rays-opacity: .45; /* @kind other */
  --m-rays-scrim:   linear-gradient(     /* protects text contrast over the rays */
                      to bottom right,
                      rgba(13,36,64,.86) 0%,
                      rgba(13,36,64,.55) 55%,
                      rgba(13,36,64,.15) 100%); /* @kind color */
  /* Static fallback used under reduced-motion / reduced-data / mobile */
  --m-rays-static:  radial-gradient(
                      120% 90% at 100% 0%,
                      rgba(232,185,74,.30) 0%,
                      rgba(216,161,31,.14) 38%,
                      rgba(13,36,64,0)    72%); /* @kind color */
}

@media (max-width: 767px) {
  :root {
    --m-t-hero:    40px;  --m-t-hero-lh:    44px;
    --m-t-section: 30px;  --m-t-section-lh: 35px;
    --m-t-lede:    17px;  --m-t-lede-lh:    27px;
    --m-section-y: var(--s-7);  /* 48px */
  }
}

/* -------------------------------------------------------------------------
   Type
   ------------------------------------------------------------------------- */
.m-hero-title {
  font-family: var(--font-display);
  font-size: var(--m-t-hero); line-height: var(--m-t-hero-lh);
  font-weight: 400;            /* never 600+ at hero size — the serif gets heavy */
  letter-spacing: -0.02em;
  margin: 0;
}
.m-section-title {
  font-family: var(--font-display);
  font-size: var(--m-t-section); line-height: var(--m-t-section-lh);
  font-weight: 500; letter-spacing: -0.01em; margin: 0;
}
.m-lede {
  font-size: var(--m-t-lede); line-height: var(--m-t-lede-lh);
  color: var(--c-ink-secondary);
  max-width: var(--l-reading-max);
  margin: var(--s-4) 0 0;
}
.m-eyebrow {
  font-size: var(--m-t-eyebrow); line-height: var(--m-t-eyebrow-lh);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--c-ink-muted); margin: 0 0 var(--s-2);
}

/* -------------------------------------------------------------------------
   Sections & grounds
   ------------------------------------------------------------------------- */
.m-section { padding: var(--m-section-y) var(--l-gutter); }
.m-inner   { max-width: var(--l-content-max); margin: 0 auto; }

.m-ground-dark { background: var(--m-ground-dark); color: var(--m-on-dark); }
.m-ground-dark .m-hero-title,
.m-ground-dark .m-section-title { color: var(--m-on-dark); }
.m-ground-dark .m-lede          { color: var(--m-on-dark-secondary); }
.m-ground-dark .m-eyebrow       { color: var(--m-on-dark-secondary); }
.m-ground-dark hr,
.m-ground-dark .m-rule          { border-color: var(--m-hairline-dark); }
.m-ground-dark a                { color: var(--m-on-dark); }

/* -------------------------------------------------------------------------
   CTA — one primary button on the page; Log in is a nav text link only
   ------------------------------------------------------------------------- */
.m-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--l-touch);            /* 44px */
  padding: 12px 22px;
  font-family: var(--font-text); font-size: var(--t-body); font-weight: 600;
  border: none; border-radius: var(--r-md); cursor: pointer;
  background: var(--c-navy); color: #fff;
  transition: background-color var(--d-fast) var(--ease-standard),
              transform var(--d-fast) var(--ease-standard);
}
.m-cta:hover  { background: var(--c-navy-hover); transform: translateY(calc(-1 * var(--move-nudge))); text-decoration: none; }
.m-cta:active { transform: translateY(0); }
/* On dark grounds the primary button inverts — never gold (gold can't carry accessible label text) */
.m-ground-dark .m-cta { background: #fff; color: var(--c-navy); }
.m-ground-dark .m-cta:hover { background: rgba(255,255,255,.88); }

.m-link-login {                            /* tertiary; nav only */
  font-size: var(--t-body-sm); font-weight: 500; color: var(--c-ink-secondary);
}
.m-ground-dark .m-link-login { color: var(--m-on-dark-secondary); }

/* -------------------------------------------------------------------------
   The cabin frame — the product screenshot. The most important element.
   ------------------------------------------------------------------------- */
.m-frame {
  border-radius: var(--r-tile);
  border: var(--b-hairline) solid var(--c-hairline);
  box-shadow: var(--m-frame-shadow);
  background: var(--c-surface);
  overflow: hidden;
  /* No tilt/perspective by default — legibility is this element's whole job. */
}
.m-frame__bar {                            /* slim navy bar w/ braid mark; NOT traffic-light dots */
  height: 34px; background: var(--c-navy-deep);
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-3);
}
.m-frame__bar img { height: 18px; width: 18px; }
.m-frame img.m-shot { display: block; width: 100%; height: auto; }

/* Mobile: crop to a meaningful region and bleed to the edge — never shrink the
   whole dashboard to 360px, it becomes unreadable. */
@media (max-width: 767px) {
  .m-frame--bleed {
    margin-inline: calc(-1 * var(--l-gutter));
    border-radius: 0; border-left: none; border-right: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
}

/* -------------------------------------------------------------------------
   Scroll reveal — default marketing motion. Once only, never re-trigger.
   Add .is-in via IntersectionObserver (unobserve after first fire).
   ------------------------------------------------------------------------- */
.m-reveal {
  opacity: 0; transform: translateY(var(--move-slide));
  transition: opacity var(--d-base) var(--ease-enter),
              transform var(--d-base) var(--ease-enter);
}
.m-reveal.is-in { opacity: 1; transform: translateY(0); }
.m-reveal[data-stagger="1"] { transition-delay: 60ms; }
.m-reveal[data-stagger="2"] { transition-delay: 120ms; }
.m-reveal[data-stagger="3"] { transition-delay: 180ms; }

/* =========================================================================
   "CABIN LIGHT" — the single licensed motion exception.
   Soft gold rays raking in from the top-right of the DARK hero only.
   Not used on the v2 landing page (its hero is white ground).
   ========================================================================= */
.m-hero { position: relative; overflow: hidden; isolation: isolate; }

.m-rays,
.m-hero .side-rays-container {     /* override the upstream z-index:3 */
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;            /* decorative: never intercepts the CTA */
  opacity: var(--m-rays-opacity);
  /* Fade the rays out before they reach the content/frame side of the hero */
  -webkit-mask-image: linear-gradient(to bottom left, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
          mask-image: linear-gradient(to bottom left, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
}
.m-rays canvas { display: block; width: 100%; height: 100%; }

/* Scrim: guarantees AA on hero text at the rays' brightest frame. */
.m-hero__scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--m-rays-scrim); }

/* Content always rides above the light. */
.m-hero__content { position: relative; z-index: 1; }

/* Static fallback — painted on the container when JS/WebGL is skipped. */
.m-rays--static { background: var(--m-rays-static); }

@media (prefers-reduced-motion: reduce) {
  .m-rays canvas { display: none; }
  .m-rays { background: var(--m-rays-static); }
  .m-reveal { opacity: 1; transform: none; transition: none; }
}

/* Mobile: no full-viewport shader. ~83% of visits are mobile; battery wins. */
@media (max-width: 767px) {
  .m-rays canvas { display: none; }
  .m-rays { background: var(--m-rays-static); }
}