/* Public marketing surface — foundation.
   The landing page shares the application's colour tokens, with its own
   surface roles scoped to .landing. It does not load application chrome
   or switch themes: the marketing art direction stays consistent.
   Content is visible by default; JavaScript progressively adds motion.

   Files in this directory, in load order (see landing.html):
     base.css      palette, type roles, buttons, footer, shared chapter layout
     nav.css       the marketing header: full-width bar, scroll glass, phone menu
     surfaces.css  light editorial sections and dark product surfaces
     panels.css    light sections as paper panels resting on the navy ground
     ui.css        the product-UI vocabulary the mockups are drawn in
     devices.css   the iPhone and laptop shells
     hero.css      opening scene
     sections.css  trust, faq, cta
     platform.css  the platform slideshow (copy + illustrations)
     device.css    one device (dashboard, history and mobile views)
     alerts.css    alerts (threshold dialog + phone notification)
     errors.css    error lifecycle
     updates.css   fleet rollout (dialog + globe + site progress)
     onboarding.css hardware-to-cloud story
     teams.css     the people and workflows behind the product
     product-updates.css  the public changelog + the landing filmstrip chapter */

.landing {
  /* ---- Brand anchors (01-tokens/colors.css) ---- */
  --lp-hull: var(--business-primary);
  --lp-abyss: var(--brand-abyss);
  --lp-current: var(--brand-deep-current);
  --lp-shoal: var(--brand-shoal);
  --lp-harbour: var(--business-secondary);
  --lp-cyan: var(--business-accent);

  /* ---- Status (dark-mode brightened, as in the product's dark theme) ---- */
  --lp-green: color-mix(in srgb, var(--business-success) 80%, white);
  --lp-amber: color-mix(in srgb, var(--business-warning) 80%, white);
  --lp-red: color-mix(in srgb, var(--business-danger) 75%, white);

  /* ---- Surfaces: one navy family, closer to the light = more raised ---- */
  --lp-ground: color-mix(in srgb, var(--business-footer) 82%, var(--lp-hull));
  --lp-ground-raised: color-mix(in srgb, var(--business-footer) 92%, var(--lp-harbour));
  --lp-bg: var(--lp-ground);
  --lp-panel: #0b1130;              /* mockup dialogs, cards */
  --lp-panel-raised: #101a44;       /* lifted panel, hover */
  --lp-panel-sunken: #070c22;       /* recessed screen background */

  /* ---- Ink ---- */
  --lp-ink-strong: #fff;    
  --lp-ink: #dbe7f5;
  --lp-mute: #8fa3c7;
  --lp-faint: #5b6785;

  /* ---- Lines ---- */
  --lp-line: rgb(255 255 255 / 12%);
  --lp-line-strong: rgb(255 255 255 / 18%);
  --lp-line-faint: rgb(255 255 255 / 7%);

  /* ---- Type (DESIGN.md: The Marketing-Voice Exception) ----
     Marketing copy is Archivo; headlines run condensed, like a machine
     rating plate. Everything drawn as product UI stays in the app's own
     Plex, so a mockup still looks like the real dashboard. Mono is for
     identifiers, codes and data only — never a marketing label. */
  --lp-font: "Archivo", "Segoe UI", sans-serif;
  --lp-ui-font: "IBM Plex Sans", "Segoe UI", sans-serif;
  --lp-mono: "IBM Plex Mono", ui-monospace, monospace;
  --lp-display-stretch: 82%;

  /* One readable scale across the illustrated product dialogs. */
  --lp-ui-title: clamp(1rem, .9rem + .25vw, 1.125rem);
  --lp-ui-body: clamp(.875rem, .85rem + .12vw, .9375rem);
  --lp-ui-label: .875rem;
  --lp-ui-small: .8125rem;

  /* ---- Shape (DESIGN.md: radii step 8 → 12 → 16 → 24) ---- */
  --lp-radius-sm: 8px;
  --lp-radius-md: 12px;
  --lp-radius-lg: 16px;
  --lp-radius-xl: 24px;

  /* ---- Depth ---- */
  --lp-shadow-panel: 0 20px 56px -16px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(255 255 255 / 8%);
  --lp-shadow-float: 0 32px 80px -24px rgb(0 0 0 / 55%), inset 0 1px 0 rgb(255 255 255 / 10%);

  /* ---- Rhythm ---- */
  --lp-gutter: 1.25rem;

  /* The sticky header's box. nav.css fills it; hero.css pulls the opening
     scene up underneath it. */
  --lp-nav-height: 4.5rem;

  /* The floor is the phone's value, not a safety net: 7vw only overtakes it
     past ~1029px, so every viewport narrower than that gets exactly the floor.
     A desktop-sized band there reads as a page with holes in it. */
  --lp-section-y: clamp(3.25rem, 7vw, 6.5rem);
  --lp-container: 82rem;

  /* ---- Motion (mirrors MOTION in js/landing.js) ---- */
  --lp-dur-quick: 350ms;
  --lp-dur-accent: 500ms;   /* fades and pops */
  --lp-dur-base: 800ms;
  --lp-dur-arrival: 1000ms; /* entrances and line draws */
  --lp-dur-slow: 1400ms;
  --lp-dur-chrome: 450ms;   /* nav surface changes */
  --lp-ease-enter: cubic-bezier(.2, .7, .3, 1);      /* power3.out */
  --lp-ease-emphasis: cubic-bezier(.16, 1, .3, 1);   /* power4.out */

  margin: 0;
  background: linear-gradient(
    180deg,
    var(--lp-ground) 0,
    var(--lp-ground) 100rem,
    var(--lp-ground-raised) 44%,
    var(--business-footer) 72%,
    var(--lp-ground) calc(100% - 100rem),
    var(--lp-ground) 100%
  );
  color: var(--lp-ink);
  font-family: var(--lp-font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
  overflow-x: clip;
}

/* No `scroll-behavior` here, deliberately: asking the document to scroll
   smoothly animates every programmatic scroll, including the scroll to the top
   that ScrollTrigger performs to measure the page. The first pinned chapter is
   then measured at the visitor's own offset and pins a screenful early. The
   navigation half of js/landing.js smooths activated anchors instead, and
   `scroll-padding-top` still keeps a target clear of the sticky nav. */
html:has(.landing) {
  scroll-padding-top: 5.5rem;
  background: var(--business-footer);
}

.landing *, .landing *::before, .landing *::after {
  box-sizing: border-box;
}

.landing img, .landing svg {
  display: block;
  max-width: 100%;
}

.landing img {
  height: auto;
}

.landing a {
  color: inherit;
  text-decoration: none;
}

.landing button {
  font: inherit;
}

.landing figure {
  margin: 0;
}

.landing :focus-visible {
  outline: 3px solid var(--lp-cyan);
  outline-offset: 4px;
  border-radius: 4px;
}

.landing ::selection {
  background: var(--lp-cyan);
  color: var(--lp-hull);
}

/* Layout primitives */

.landing__container {
  width: 100%;
  max-width: var(--lp-container);
  padding-inline: var(--lp-gutter);
  margin-inline: auto;
}

/* The container of a chapter that js/landing.js pins. Same content box, but
   full-bleed and centred with padding instead of auto margins: ScrollTrigger
   copies a pinned element's margins into its spacer once, when the pin is
   created, and never re-reads them — so a container that is centred by
   `margin-inline: auto` can end up pinned against the left edge for good. */
.landing__container--pinned {
  max-width: none;
  padding-inline: calc(max(0px, (100% - var(--lp-container)) / 2) + var(--lp-gutter));

  /* A pinned scene cannot be scrolled, so on a short screen it is scaled to the
     room it has instead of losing the chapter. js/landing.js measures the room
     and sets the factor on the section; without it the scene is untouched. */
  transform: scale(var(--lp-scene-fit, 1));
  transform-origin: top center;
}

.landing__section {
  position: relative;
  padding-block: var(--lp-section-y);
}

/* `.landing .landing__skip` outranks the `.landing a { color: inherit }` reset,
   which otherwise put pale ink on the cyan chip. */
.landing .landing__skip {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--lp-cyan);
  color: var(--lp-hull);
  font-weight: 600;
  transform: translateY(-200%);
  border-radius: var(--lp-radius-sm);
}

.landing .landing__skip:focus {
  transform: translateY(0);
}

/* Typography. A chapter opens on its headline: no eyebrow above it, no
   section number. Condensed type needs almost no negative tracking. */

.landing__headline {
  margin: 0;
  color: var(--lp-ink-strong);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-stretch: var(--lp-display-stretch);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.landing__headline--section {
  font-size: clamp(2.125rem, 3.8vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.01em;
}

.landing__headline--small {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.008em;
}

/* Emphasis is a change of width, never a second colour. */
.landing__headline em {
  font-style: normal;
  font-stretch: 100%;
}

/* Anything drawn as product UI speaks the app's own typeface. */
.landing-hero__devices,
.landing-chapter__visual,
.landing-onboarding__stage,
.landing-workspace,
.landing-history__card,
.landing-platform__screen,
.lp-panel,
.lp-phone,
.lp-window {
  font-family: var(--lp-ui-font);
}

.landing__sub {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  color: var(--lp-mute);
  font-size: 1.125rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.landing__label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lp-mute);
}

.landing__mono {
  font-family: var(--lp-mono);
  font-variant-numeric: tabular-nums;
}

.landing__steps {
  display: grid;
  gap: .9rem;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0;
}

.landing__steps li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--lp-ink);
  font-size: 1rem;
  line-height: 1.5;
}

.landing__steps li::before {
  content: "";
  position: absolute;
  top: .5625rem;
  left: 0;
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: var(--lp-cyan);
}

.landing__text-link {
  display: inline-flex;
  align-items: center;
  color: var(--lp-ink-strong);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding-block: .35rem;
  border-bottom: 1px solid var(--lp-line-strong);
  transition: border-color 180ms ease;
}

.landing__text-link:hover {
  border-color: var(--lp-cyan);
}

.landing__desktop-break {
  display: none;
}

/* Buttons — on the dark landing surfaces the primary is Shoal Blue, the lifted variant of the hull (DESIGN.md: The Primary-Is-The-Anchor Rule). */

.landing-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  min-height: 3rem;
  padding: .75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--lp-radius-md);
  color: var(--lp-ink-strong);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition:
    transform var(--lp-dur-quick) var(--lp-ease-emphasis),
    box-shadow var(--lp-dur-quick) var(--lp-ease-emphasis),
    background-color var(--lp-dur-quick) ease,
    border-color var(--lp-dur-quick) ease;
}

.landing-btn i {
  font-size: .8rem;
}

.landing-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--lp-shoal) 55%, transparent);
}

.landing-btn:active {
  transform: translateY(0);
}

/* Marketing links carry no arrow. The one that remains, on the contact
   submit, advances under the pointer. */
.landing-btn i.fa-arrow-right {
  transition: transform var(--lp-dur-quick) var(--lp-ease-emphasis);
}

.landing-btn:hover i.fa-arrow-right {
  transform: translateX(3px);
}

.landing-btn--primary {
  background: var(--lp-shoal);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--lp-shoal) 35%, transparent);
}

.landing-btn--primary:hover {
  background: color-mix(in srgb, var(--lp-shoal) 82%, white);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--lp-shoal) 45%, transparent);
}

.landing-btn--ghost {
  border-color: var(--lp-line-strong);
  background: rgb(255 255 255 / 4%);
}

.landing-btn--ghost:hover {
  background: rgb(255 255 255 / 9%);
  border-color: rgb(255 255 255 / 28%);
}

.landing-btn--light {
  background: var(--lp-ink-strong);
  color: var(--lp-hull);
}

.landing a.landing-btn--light {
  color: var(--lp-hull);
}

.landing-btn--light:hover {
  background: var(--lp-cyan);
}

.landing-btn--small {
  min-height: 2.5rem;
  padding: .5rem 1.1rem;
  font-size: .875rem;
  border-radius: var(--lp-radius-sm);
}

/* Badges — status colour only where it reports a state (The Signal Rule). */

.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .6rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lp-shoal) 22%, transparent);
  color: #9fd8f2;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.landing-badge--amber {
  background: color-mix(in srgb, var(--lp-amber) 16%, transparent);
  color: var(--lp-amber);
}

.landing-badge--green {
  background: color-mix(in srgb, var(--lp-green) 14%, transparent);
  color: var(--lp-green);
}

.landing-badge--red {
  background: color-mix(in srgb, var(--lp-red) 14%, transparent);
  color: var(--lp-red);
}

.landing-badge--mute {
  background: rgb(255 255 255 / 6%);
  color: var(--lp-ink);
}

/* Shared two-column chapter layout: copy beside a built visual. */

.landing-chapter__inner {
  display: grid;
  align-items: center;
  gap: 3rem;
}

.landing-chapter__copy {
  min-width: 0;
}

.landing-chapter__visual {
  min-width: 0;
  position: relative;
}

/* Footer */

.landing-footer {
  padding-block: 3rem 1.5rem;
  background: var(--lp-hull);
  border-top: 1px solid var(--lp-line-faint);
}

.landing-footer__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-bottom: 2rem;
}

.landing-footer__lockup {
  width: 8rem;
}

.landing-footer__main p {
  flex-basis: 100%;
  margin: 0;
  color: var(--lp-mute);
  font-size: .9rem;
}

.landing-footer__back {
  color: var(--lp-ink);
  font-size: .8rem;
  font-weight: 500;
}

.landing-footer__back:hover {
  color: var(--lp-cyan);
}

.landing-footer__back i {
  margin-left: .6rem;
  font-size: .7rem;
}

.landing-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lp-line-faint);
  color: var(--lp-mute);
  font-size: .8rem;
}

.landing-footer__links {
  display: flex;
  gap: 1.5rem;
}

.landing-footer__links a:hover {
  color: var(--lp-cyan);
}

/* Breakpoints — mobile first (DESIGN.md: The Mobile-Baseline Rule). */

@media (width >= 36rem) {
  .landing {
    --lp-gutter: 2rem;
  }

  .landing__desktop-break {
    display: initial;
  }
}

@media (width >= 56rem) {
  .landing {
    --lp-gutter: 3rem;
    --lp-section-y: 7.5rem;
  }

  .landing-chapter__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }

  .landing-chapter__inner--reverse .landing-chapter__copy {
    order: 2;
  }

  .landing-footer__main {
    flex-wrap: nowrap;
  }

  .landing-footer__main p {
    flex-basis: auto;
  }

  .landing-footer__back, .landing-footer__byline {
    margin-left: auto;
  }
}

@media (width >= 75rem) {
  .landing {
    --lp-section-y: 8.5rem;
  }

  .landing-chapter__inner {
    gap: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* One switch, so no component has to remember to opt out. GSAP is already
     gated by the matchMedia context in js/landing.js; this covers CSS. */
  .landing {
    --lp-dur-quick: 0ms;
    --lp-dur-accent: 0ms;
    --lp-dur-base: 0ms;
    --lp-dur-arrival: 0ms;
    --lp-dur-slow: 0ms;
    --lp-dur-chrome: 0ms;
  }

  .landing *, .landing *::before, .landing *::after {
    transition: none;
    transition-duration: 1ms !important;
    animation: none;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}