/* ─────────────────────────────────────────────────────────────────────────
   Sendinvo marketing chrome — the 2026 design language.

   SINGLE SOURCE OF TRUTH for the site-wide nav and footer. The markup lives
   in src/partials/marketing-{nav,footer}.html and is stamped into every
   marketing page by scripts/build-web.mjs.

   WHY THE "lp-" PREFIX: the older marketing CSS (landing.css, marketing.css)
   is entirely scoped under ".landing-page", and the page bodies still depend
   on its ".mk-*" rules. Those pages therefore keep the .landing-page wrapper
   while their bodies are migrated, so this file uses its own namespace and
   its own "--lp-" tokens rather than competing for ".nav" / ".wrap". Nothing
   here is scoped to a wrapper class, so the chrome renders identically on a
   migrated page and an unmigrated one.

   Colours are 1:1 with src/styles/tokens.generated.css (the Figma paint
   styles), re-declared under --lp-* so this file stands alone and cannot be
   knocked over by whatever else a page happens to load.
   ───────────────────────────────────────────────────────────────────────── */

/* The wordmark in the nav is live text, not the logo SVG, matching the design
   file. That makes Söhne load-bearing for the brand mark, so this file
   declares the face itself rather than relying on system.css still being
   loaded. Declaring the same family and src twice is free: the browser
   dedupes by URL and fetches once. */
@font-face {
  font-family: "Söhne";
  src: url("/src/assets/fonts/Sohne-Buch.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --lp-black: #140700;
  --lp-muted-grey: #6f7691;
  --lp-cool-grey: #9fa3b5;
  --lp-pale-grey: #e7e8ed;
  --lp-whisper-grey: #f1f0f1;
  --lp-off-white: #fafafb;
  --lp-white: #ffffff;
  --lp-blue: #4a7ce8;
  --lp-muted-blue: #dbe5fa;
  /* Not a Figma paint style. The design file uses this lighter blue for the
     accents that sit ON the near-black bands ("+More", the FAQ +/- marks),
     where the standard blue is too dark to read comfortably. */
  --lp-blue-light: #6e96ed;

  --lp-wrap: 1130px;
}

/* ── Cross-system normalisation ─────────────────────────────────────────
   system.css applies a GLOBAL cap-trim to a, span, h1-h6 and friends via a
   :where() rule (specificity 0). Marketing pages still load it, and that trim
   collapses a 24px footer link to its 11px cap height, which crushes the
   footer columns to under half their height. The design language is built on
   untrimmed line boxes, so the chrome opts out explicitly.

   Buttons are excluded on purpose: .lp-btn NEEDS the trim, because trimming
   the label to cap height is what turns 11px of padding into a 32px pill.

   Do not "simplify" this away because the footer happens to look right — it
   only looks right on a page that is not loading system.css. */
.lp-nav-logo,
.lp-nav-links a,
.lp-footer-col h2,
.lp-footer-col li,
.lp-footer-col li a,
.lp-footer-col li span {
  text-box-trim: none;
  text-box-edge: auto;
}

/* ── Container ─────────────────────────────────────────────────────────── */
.lp-wrap {
  width: var(--lp-wrap);
  max-width: calc(100% - 48px);
  margin-inline: auto;
}

/* ── Buttons ────────────────────────────────────────────────────────────
   The DS Button component (.ar-btn in system.css). The Figma nav buttons are
   instances of it, so the values are copied verbatim with the tokens
   resolved: marketing pages must not pull in the 88KB app design system for
   two pills. Kept on parallel class names so the parity stays obvious.

   display:inline-block is deliberate — flex would suppress text-box-trim,
   and the trim is what makes 11px of padding produce a 32px pill. */
.lp-btn {
  appearance: none;
  border: 0;
  border-radius: 1000px;
  position: relative;
  padding: 11px 12px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  font-family: "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.2, 0, 0, 1),
              background-color 120ms ease;
  touch-action: manipulation;
}
.lp-btn:active { transform: scale(0.97); }

/* Doubled up (.lp-btn.lp-btn-primary) on purpose, and the same below for the
   secondary. These buttons are usually <a>, and any page-level `a { color:
   ... }` reset lands at (0,1,1) — higher than a single class — so a plain
   .lp-btn-primary loses the LABEL COLOUR to it no matter the load order. That
   is how the home page ended up with black text on a blue CTA. Two classes
   beat one class plus one element, so this holds wherever the button is used. */
.lp-btn.lp-btn-primary {
  background: var(--lp-blue);
  color: var(--lp-white);
}
/* Hover darkens the fill itself rather than laying an overlay over it, so the
   label stays crisp. The hex is the same value for engines without
   color-mix. */
.lp-btn-primary:hover {
  background-color: #4370d1;
  background-color: color-mix(in srgb, var(--lp-blue) 90%, #000);
}

/* Inset shadow rather than a border, so the outline costs no height and the
   pill sits level with the primary beside it. */
.lp-btn.lp-btn-secondary {
  background: transparent;
  color: var(--lp-blue);
  box-shadow: inset 0 0 0 1px var(--lp-muted-blue);
}
/* Half the primary's 10%: the secondary has no fill, so the black lands
   straight on the page behind it. At 10% the wash swallowed the muted-blue
   outline, and that outline is what makes this read as a button. */
.lp-btn-secondary:hover { background-color: rgba(0, 0, 0, 0.05); }

/* text-box-trim is Chrome 133+ / Safari 18.2+. Without it the label box stays
   20px and the padding above would render a 42px pill, so pin the height and
   centre conventionally. */
@supports not (text-box-trim: trim-both) {
  .lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding-block: 0;
  }
}


/* Large CTA. The design file's hero and pricing buttons are 48px where the DS
   ships a single 32px size, so this is a size on top of the base pill,
   centred by explicit height rather than by trim.

   The 2px bottom padding is a 1px optical lift, not spacing: Söhne is
   ascent-heavy, so a label centred on its line box reads low. Inside a fixed
   48px height the padding shortens the content box, and centring in that
   raises the label 1px. The button stays exactly 48px. */
.lp-btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 18px 2px;
  font-size: 21px;
  line-height: 30px;
  text-box-trim: none;
}

/* ── Nav ───────────────────────────────────────────────────────────────── */
/* The 40px of space above the nav is PADDING, not a margin, and lives inside
   the component. On the design file the nav inherits it from the hero's
   padding, but this nav ships on 50+ pages with their own hero treatments, so
   it has to carry its own.

   It must not be a margin: the nav is the wrapper's first child, so a top
   margin collapses straight out of the wrapper, drops the whole page 40px and
   paints the body colour above it as a grey band. Padding cannot collapse.

   76 = 40 above + a 36px nav. With border-box the content box is exactly the
   36px the design specifies, so the links still centre in it. */
.lp-nav {
  display: flex;
  align-items: center;
  height: 76px;
  padding-top: 40px;
}
.lp-nav-col {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
}
.lp-nav-logo {
  font-family: "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--lp-black);
  text-decoration: none;
}
/* Centred within the middle third. Figma left-aligns the links inside that
   column, which parks all ~68px of slack on the right and sits the block 34px
   left of the page centre; centring lands it on the page centre at any
   width. Deliberate deviation from the design file. */
.lp-nav-links {
  gap: 24px;
  justify-content: center;
}
.lp-nav-links a {
  font-family: "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--lp-muted-grey);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease;
}
.lp-nav-links a:hover { color: var(--lp-black); }
/* The current section is stated rather than merely coloured, so it is not
   colour-alone signalling. aria-current carries it to assistive tech. */
.lp-nav-links a[aria-current="page"] { color: var(--lp-black); }

.lp-nav-actions {
  gap: 8px;
  justify-content: flex-end;
}

/* Below the design's desktop width the three equal columns stop fitting: the
   links wrap under the logo and the actions crowd them. Collapsing to a
   centred two-row stack keeps every destination reachable without a
   JS menu. */
@media (max-width: 860px) {
  .lp-nav {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding-block: 12px;
  }
  .lp-nav-col { flex: 0 0 auto; }
  .lp-nav-links {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    gap: 16px;
  }
  .lp-nav-actions { justify-content: center; }
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.lp-footer {
  background: var(--lp-black);
  /* No top padding, matching the design file. Every page puts a padded dark
     band immediately above this (pricing on the home page, the closing CTA
     everywhere else) and it is the same black, so the two read as one region
     and a second gap here just pushes the columns down. */
  padding-bottom: 74px;
  font-family: "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.lp-footer-grid {
  /* Figma's footer content is 1128 wide, 2px narrower than the 1130 the rest
     of the page uses. */
  width: 1128px;
  max-width: calc(100% - 48px);
  margin-inline: auto;
  display: flex;
  gap: 16px;
  align-items: flex-end;
}
.lp-footer-col {
  width: 213px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-footer-col:nth-child(3) { width: 212px; }
/* The other columns are bottom-aligned (all the same height, so it does not
   show). Company is shorter, and Figma stretches it to the top instead so its
   heading lines up with the others. */
.lp-footer-col:last-child {
  flex: 1 0 0;
  width: auto;
  min-width: 0;
  align-self: flex-start;
}
/* Deliberately doubled up (.lp-footer .lp-footer-col) rather than the single
   class it needs. The home page also loads lp-home.css, which carries the
   design file's own `h1, h2, h3 { margin: 0 }` reset; scoped, that lands at
   the same specificity as a plain `.lp-footer-col h2` and wins on load order,
   silently dropping this 9px and making the footer 9px shorter on the home
   page than on every other page. */
.lp-footer .lp-footer-col h2 {
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.25px;
  font-weight: 400;
  color: var(--lp-whisper-grey);
  margin: 0 0 9px;
}
.lp-footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-footer-col li a,
.lp-footer-col li span {
  display: block;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.25px;
  color: var(--lp-cool-grey);
  text-decoration: none;
}
.lp-footer-col li a { transition: color 0.15s ease; }
.lp-footer-col li a:hover { color: var(--lp-white); }
/* Sits on the black footer, so it takes the lighter blue used for the other
   on-black accents, and fades on hover the way they do rather than shifting
   colour. */
.lp-footer-col li a.is-all { color: var(--lp-blue-light); }
.lp-footer-col li a.is-all:hover { color: var(--lp-blue-light); opacity: 0.7; }
.lp-footer-copy { color: var(--lp-muted-grey) !important; }

/* 1175, not 860. The five columns are fixed-width and do not shrink
   (213 + 213 + 212 + 213 + 213 plus four 16px gaps = 1128), and the grid is
   capped at calc(100% - 48px). So the row needs a 1176px viewport to fit, and
   anywhere below that the columns overflowed the grid and scrolled the whole
   page sideways. Reflow has to start as soon as the row stops fitting, not at
   some later phone breakpoint. */
@media (max-width: 1175px) {
  .lp-footer-grid {
    flex-wrap: wrap;
    gap: 32px 16px;
    align-items: flex-start;
  }
  .lp-footer-col,
  .lp-footer-col:nth-child(3) { width: calc(33.333% - 11px); }
  .lp-footer-col:last-child { flex: 0 0 auto; width: calc(33.333% - 11px); }
}

/* Two across once three no longer fit comfortably. */
@media (max-width: 860px) {
  .lp-footer-col,
  .lp-footer-col:nth-child(3),
  .lp-footer-col:last-child { width: calc(50% - 8px); }
}

/* ── Focus ─────────────────────────────────────────────────────────────── */
:where(.lp-nav, .lp-footer) :where(a, button):focus-visible {
  outline: 2px solid var(--lp-blue);
  outline-offset: 3px;
  border-radius: 4px;
}