/* ===========================================================================
 * assets/css/cm/landing.css — CM021 public landing page.
 *
 * A COMPLETE, SELF-CONTAINED sheet for one page. Every rule is scoped under .lp
 * or a .lp- class, so this file can sit in the kit list without ever touching a
 * signed-in screen. Deliberately UNLAYERED: the landing page loads the Bootstrap
 * Icons stylesheet (unlayered, it only styles .bi::before) and then this one, and
 * a rule inside @layer always loses to an unlayered one.
 *
 * DESIGN LANGUAGE — measured from microsoft.com, not guessed at:
 *   type      "Segoe UI Variable Text", "Segoe UI", system stack. Body 16/24.
 *             Large headings are LIGHT (500) with NEGATIVE tracking (-0.02em);
 *             small card headings are HEAVIER (600) with less. That inversion is
 *             most of what makes the page read as Fluent rather than as Bootstrap.
 *   colour    white ground · #0E1726 headings · #F2F2F2 panels and footer
 *             · #E1DFDD hairlines · one accent for fills and links
 *   shape     8px radius everywhere. No gradients, no glow, no gloss.
 *   space     a very wide 1600px measure, 48px gutters between cards, and far
 *             more vertical air than feels right until you see it at full size.
 *
 * WHAT IS BORROWED IS THE GRAMMAR, NOT THE BRAND. No Microsoft mark, asset,
 * wording or product name appears here; this is MaintenanceHub's own page wearing
 * a widely-used enterprise layout vocabulary.
 *
 * COLOUR SYSTEM, AND WHERE EACH HALF LIVES — read this before auditing contrast.
 *   :root  --lp-accent / --lp-accent-ink / --lp-accent-hover / --lp-link, written
 *          INLINE by the renderer from root's setting. They are data, not style,
 *          and they are pre-fitted server-side: the accent clears 4.5:1 against
 *          its own label and --lp-link is pushed deeper so it is readable as TEXT
 *          on white (Microsoft's own #0078D4 is 4.44:1 on white, which is why
 *          their link blue is darker than their button blue).
 *   .lp    the neutral ramp below.
 * So getComputedStyle(document.documentElement) resolves the accent and returns
 * EMPTY STRING for every neutral. Read each half from its owner.
 * =========================================================================== */

.lp {
  /* neutral ramp — flat, no tints */
  --lp-ink:      #0E1726;   /* headings                                   */
  --lp-text:     #171717;   /* body copy            15.3:1 on white        */
  --lp-text-2:   #505050;   /* secondary            8.1:1  on white        */
  --lp-page:     #ffffff;
  --lp-grey:     #F2F2F2;   /* panels, footer                              */
  --lp-grey-2:   #FAF9F8;   /* hero wash                                   */
  --lp-line:     #E1DFDD;
  --lp-line-2:   #C8C6C4;

  --lp-r:        8px;
  --lp-wrap:     1600px;
  --lp-gut:      clamp(16px, 3vw, 48px);

  /* Segoe first: on Windows this IS the Microsoft type voice and costs nothing.
     Everywhere else the system stack lands somewhere very close. The optional
     webfont the renderer may add slots in ahead of the fallbacks. */
  --lp-font: "Segoe UI Variable Text", "Segoe UI", "Inter", system-ui, -apple-system,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  margin: 0;
  background: var(--lp-page);
  color: var(--lp-text);
  font-family: var(--lp-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp img { max-width: 100%; height: auto; }

/* NO blanket `.lp a { color }` rule, deliberately.
 *
 * `.lp a` scores (0,1,1) and beats every single-class rule below it — `.lp-btn--primary` (0,1,0),
 * `.lp-brand`, `.lp-card`, `.lp-skip`. The first build of this sheet had one, and the result was
 * link-blue text on a blue button fill: the label was present in the DOM, correctly contrast-fitted
 * server-side, and invisible. Almost every anchor on this page already carries a class that states
 * its own colour, so the blanket rule bought nothing and silently overrode four components.
 * Prose links — the only anchors with no class of their own — are coloured here instead. */
.lp p a:not([class]), .lp li > a:not([class]) { color: var(--lp-link); }

.lp-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lp-skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--lp-accent); color: var(--lp-accent-ink);
  padding: 12px 20px; font-weight: 600; text-decoration: none;
}
.lp-skip:focus { inset-inline-start: 0; }

/* Fluent's focus ring is a solid dark stroke, not a coloured glow. */
.lp :focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 2px; }
.lp-promo :focus-visible, .lp-foot :focus-visible { outline-color: var(--lp-ink); }

.lp-wrap { width: 100%; max-width: var(--lp-wrap); margin-inline: auto; padding-inline: var(--lp-gut); }

/* ---------------------------------------------------------------- typography
 * The inversion described at the top: big = light + tight, small = heavy.
 * Uppercase is never written into the markup, only ever applied here, so a
 * screen reader still receives ordinary sentence case. */
.lp-h1, .lp-h2, .lp-h3 { color: var(--lp-ink); margin: 0; }
.lp-h1 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 500; line-height: 1.2;  letter-spacing: -0.022em; }
.lp-h2 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; line-height: 1.25; letter-spacing: -0.019em; }
.lp-h3 { font-size: 18px;                     font-weight: 600; line-height: 1.34; letter-spacing: -0.011em; }
.lp-lead { font-size: clamp(16px, 1.2vw, 18px); color: var(--lp-text-2); margin: 12px 0 0; max-width: 62ch; }

.lp-eyebrow {
  margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--lp-text-2);
}

/* -------------------------------------------------------------------- buttons
 * Flat fill, 8px radius, 15px/600, no border and no shadow. The whole affordance
 * is the colour, which is why the colour is contrast-fitted server-side. */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 22px; border: 1px solid transparent;
  border-radius: var(--lp-r); font: 600 15px/1.3 var(--lp-font);
  text-decoration: none; cursor: pointer; transition: background-color .12s ease, border-color .12s ease;
}
.lp-btn--primary { background: var(--lp-accent); color: var(--lp-accent-ink); }
.lp-btn--primary:hover { background: var(--lp-accent-hover); }
/* Fluent's secondary is a hairline box on the page ground, never a tinted fill. */
.lp-btn--ghost { background: transparent; color: var(--lp-ink); border-color: var(--lp-ink); }
.lp-btn--ghost:hover { background: rgba(0, 0, 0, .04); }
.lp-btn--sm { min-height: 36px; padding: 7px 16px; font-size: 14px; }

/* A text link with a chevron — Microsoft's most-used call to action. */
.lp-more {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--lp-link); font-size: 15px; font-weight: 600; text-decoration: none;
}
.lp-more:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ promo bar */
.lp-promo { background: var(--lp-grey); border-bottom: 1px solid var(--lp-line); font-size: 13px; }
.lp-promo-in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 48px; padding-block: 8px; }
.lp-promo-msg { color: var(--lp-text-2); }
.lp-promo-msg strong { color: var(--lp-ink); font-weight: 600; }
.lp-promo-gap { flex: 1 1 auto; }
.lp-promo a { color: var(--lp-link); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.lp-promo a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------- header
 * 54px, white, hairline under it. Not sticky-translucent, not shadowed — the
 * page is meant to feel like paper. */
.lp-head { background: var(--lp-page); border-bottom: 1px solid var(--lp-line); position: sticky; top: 0; z-index: 100; }
.lp-head-in { display: flex; align-items: center; gap: 24px; min-height: 54px; }

.lp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lp-ink); flex: none; }
.lp-logo { width: 26px; height: 26px; object-fit: contain; }
.lp-logo--mono {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 3px;
  background: var(--lp-accent); color: var(--lp-accent-ink); font-weight: 700; font-size: 15px;
}
.lp-brand-name { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

.lp-nav { margin-inline-start: auto; }
.lp-nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.lp-nav-list > li > a:not(.lp-btn) {
  display: block; padding: 8px 12px; border-radius: 4px;
  color: var(--lp-text); text-decoration: none; font-size: 14px;
}
.lp-nav-list > li > a:not(.lp-btn):hover { background: var(--lp-grey); text-decoration: underline; }
.lp-nav-cta { margin-inline-start: 8px; }

.lp-burger {
  display: none; margin-inline-start: auto; align-items: center; justify-content: center;
  width: 40px; height: 38px; padding: 0; border: 1px solid var(--lp-line-2); border-radius: var(--lp-r);
  background: var(--lp-page); cursor: pointer;
}
.lp-burger-bars { display: grid; gap: 4px; width: 18px; }
.lp-burger-bars i { display: block; height: 2px; background: var(--lp-ink); border-radius: 1px; }

/* ------------------------------------------------------------------------ hero
 * Full-bleed pale wash, two columns: copy and a product shot. Microsoft puts a
 * photograph here; this draws the product in CSS instead — no request, nothing to
 * go stale against the real interface, crisp at any density. */
.lp-hero { background: var(--lp-grey-2); border-bottom: 1px solid var(--lp-line); }
.lp-hero-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 7vw, 88px);
}
.lp-hero-copy { min-width: 0; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

/* --------------------------------------------------------- the CSS product shot */
.lp-hero-art { min-width: 0; display: flex; justify-content: center; }
.lp-screen {
  width: 100%; max-width: 560px; border-radius: 12px; overflow: hidden;
  background: var(--lp-page); border: 1px solid var(--lp-line);
  box-shadow: 0 8px 28px rgba(14, 23, 38, .10), 0 1px 2px rgba(14, 23, 38, .06);
}
.lp-screen-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--lp-grey); border-bottom: 1px solid var(--lp-line); }
.lp-screen-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--lp-line-2); }
.lp-screen-body { display: flex; gap: 14px; padding: 16px; min-height: 236px; }
.lp-screen-side { display: grid; gap: 8px; align-content: start; width: 84px; flex: none; }
.lp-screen-side span { display: block; height: 9px; border-radius: 3px; background: #E8E6E4; }
.lp-screen-side span:first-child { background: var(--lp-accent); }
.lp-screen-main { flex: 1; display: grid; gap: 12px; align-content: start; min-width: 0; }
.lp-screen-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lp-screen-kpis b { display: block; height: 44px; border-radius: 6px; background: var(--lp-grey-2); border: 1px solid var(--lp-line); }
.lp-screen-chart {
  display: flex; align-items: flex-end; gap: 8px; height: 104px; padding: 12px;
  border: 1px solid var(--lp-line); border-radius: 6px; background: var(--lp-page);
}
.lp-screen-chart u { flex: 1; border-radius: 3px 3px 0 0; background: #DEDCDA; }
.lp-screen-chart u:nth-child(4), .lp-screen-chart u:nth-child(6) { background: var(--lp-accent); }
.lp-screen-rows { display: grid; gap: 7px; }
.lp-screen-rows em { display: block; height: 10px; border-radius: 3px; background: #E8E6E4; }
.lp-screen-rows em:nth-child(2) { width: 80%; }
.lp-screen-rows em:nth-child(3) { width: 62%; }
.lp-phone { display: none; }   /* the Fluent shot is one clean device, not a collage */

/* ------------------------------------------------------------------ quick links
 * The icon row Microsoft puts directly under the hero: an icon, an underlined
 * label, nothing else. It is the fastest route to the four things people came for. */
.lp-quick { border-bottom: 1px solid var(--lp-line); }
/* Centred and intrinsically sized, NOT stretched across the measure. With 1fr tracks a site that
   publishes two destinations instead of four gets them flung to opposite ends of a 1600px row, which
   reads as a mistake. Sized to content, the row looks deliberate at any count. */
.lp-quick-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 4vw, 64px);
  list-style: none; margin: 0; padding: 20px 0;
}
.lp-quick-list > li { min-width: 140px; }
.lp-quick-list a {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px;
  color: var(--lp-text); text-decoration: none; font-size: 14px; text-align: center; border-radius: var(--lp-r);
}
.lp-quick-list a span { text-decoration: underline; text-underline-offset: 3px; }
.lp-quick-list a:hover { background: var(--lp-grey-2); }
.lp-quick-list .q-ico { color: var(--lp-ink); }

/* ----------------------------------------------------------------------- bands */
.lp-band { padding-block: clamp(48px, 6vw, 80px); }
.lp-band--white { background: var(--lp-page); }
.lp-band--grey { background: var(--lp-grey); }
.lp-band--contact { background: var(--lp-grey); }
.lp-band-head { margin-bottom: clamp(24px, 3vw, 40px); }
.lp-band-head .lp-lead { margin-top: 8px; }

/* ---------------------------------------------------------------------- stats */
.lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.lp-stat-n { display: block; font-size: clamp(32px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.022em; color: var(--lp-ink); line-height: 1.1; }
.lp-stat-l { display: block; margin-top: 6px; font-size: 15px; color: var(--lp-text-2); }

/* -------------------------------------------------------------------- cards
 * Three up, 48px gutters. Borderless white tiles: Microsoft lets the image and
 * the whitespace do the separating, so a heavy border would read as the wrong
 * decade. A hairline appears only on the link cards, which have no image. */
.lp-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 3vw, 48px); list-style: none; margin: 0; padding: 0; }
.lp-feat-ico {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px;
  border-radius: var(--lp-r); background: var(--lp-grey); color: var(--lp-ink);
}
.lp-feat-t { margin-bottom: 8px; }
.lp-feat-b { margin: 0; color: var(--lp-text-2); font-size: 15px; }

.lp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
/* auto-fit stretches a LONE item across the whole row, which turns a one-link
   section into an absurdly wide card. Capping the item prevents that. */
.lp-cards > li { max-inline-size: 520px; }
.lp-card {
  display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px;
  background: var(--lp-page); border: 1px solid var(--lp-line); border-radius: var(--lp-r);
  text-decoration: none; color: var(--lp-text);
  transition: box-shadow .14s ease, border-color .14s ease;
}
.lp-card:hover { border-color: var(--lp-line-2); box-shadow: 0 4px 16px rgba(14, 23, 38, .10); }
.lp-card-ico { color: var(--lp-ink); }
.lp-card-title { color: var(--lp-ink); font-size: 18px; font-weight: 600; letter-spacing: -0.011em; }
.lp-card-desc { color: var(--lp-text-2); font-size: 15px; }
.lp-card-go { margin-top: auto; color: var(--lp-link); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.lp-ext { display: inline-block; margin-inline-start: 4px; color: var(--lp-text-2); }

/* ---------------------------------------------------------------------- facts */
.lp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.lp-fact { display: flex; gap: 14px; align-items: flex-start; }
.lp-fact-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--lp-r); background: var(--lp-page); color: var(--lp-ink); border: 1px solid var(--lp-line); }
.lp-fact-body { min-width: 0; }
.lp-fact-label { display: block; font-size: 13px; color: var(--lp-text-2); }
.lp-fact-value { display: block; color: var(--lp-ink); font-weight: 600; word-break: break-word; }
a.lp-fact-value { text-decoration: none; color: var(--lp-link); }
a.lp-fact-value:hover { text-decoration: underline; }

/* --------------------------------------------------------------- closing call */
.lp-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }

/* --------------------------------------------------------------------- footer
 * #F2F2F2, many short link columns, 11px type, and a legal strip under it. */
.lp-foot { background: var(--lp-grey); color: var(--lp-text-2); font-size: 11px; padding-block: 40px 0; }
.lp-foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; }
.lp-foot-col h2 { font-size: 12px; font-weight: 600; color: var(--lp-ink); margin: 0 0 12px; }
.lp-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lp-foot-col a { color: var(--lp-text-2); text-decoration: none; }
.lp-foot-col a:hover { text-decoration: underline; color: var(--lp-ink); }
.lp-foot-legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 32px; padding-block: 16px; border-top: 1px solid var(--lp-line);
}
.lp-foot-legal a { color: var(--lp-text-2); text-decoration: none; }
.lp-foot-legal a:hover { text-decoration: underline; }
.lp-foot-gap { flex: 1 1 auto; }

/* ==========================================================================
 * RESPONSIVE. Three breakpoints, each fixing a specific failure:
 *   1080px — the two-column hero stops fitting the product shot
 *    900px — the horizontal nav stops fitting, so it collapses to a panel
 *    600px — single column, buttons go full width, the promo strip is dropped
 * ========================================================================== */
@media (max-width: 1080px) {
  .lp-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .lp-hero-art { order: 2; }
  .lp-screen { max-width: 620px; }
}

@media (max-width: 900px) {
  .lp-burger { display: inline-flex; }
  .lp-head-in { position: relative; flex-wrap: wrap; }
  .lp-nav {
    position: absolute; inset-inline: 0; top: 100%; margin: 0; display: none;
    background: var(--lp-page); border-bottom: 1px solid var(--lp-line);
    box-shadow: 0 10px 22px rgba(14, 23, 38, .12);
  }
  .lp-nav-open .lp-nav { display: block; }
  .lp-nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--lp-gut) 16px; }
  .lp-nav-list > li > a:not(.lp-btn) { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--lp-line); font-size: 15px; }
  .lp-nav-cta { margin: 14px 0 0; }
  .lp-nav-cta .lp-btn { width: 100%; }
}

@media (max-width: 600px) {
  .lp-promo { display: none; }
  .lp-actions .lp-btn { width: 100%; }
  .lp-close { flex-direction: column; align-items: flex-start; }
  .lp-close .lp-btn { width: 100%; }
  .lp-cards, .lp-facts, .lp-feats { grid-template-columns: 1fr; }
  .lp-cards > li { max-inline-size: none; }
  .lp-screen-body { min-height: 190px; }
}

/* A visitor who asked for less motion gets none of the transitions. */
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { transition: none !important; animation: none !important; }
}

/* Printing a landing page is rare but it happens — somebody taking the contact
   details into a meeting. Drop the chrome, keep the content. */
@media print {
  .lp-promo, .lp-head, .lp-burger, .lp-hero-art, .lp-band--close, .lp-skip, .lp-quick { display: none !important; }
  .lp-hero, .lp-band--grey, .lp-foot { background: #fff !important; }
  .lp-card, .lp-fact-ico { border-color: #999 !important; box-shadow: none !important; }
  .lp-band { padding-block: 18px; }
}