/* The marketing page at "/" (wwwroot/pages/index.html). Built on tokens.css like
   every other stylesheet here -- no colour, radius or font is introduced below,
   so the page picks up both themes and the corner scale for free.

   This is the one stylesheet in the app that cannot rely on a script: the static
   page's CSP has no script-src, so anything needing JS (a mobile menu drawer, a
   scroll animation, a theme toggle) is out of scope by construction rather than
   by preference. The layout is plain flex/grid and degrades by wrapping. */

.lp-shell {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- header ------------------------------------------------------------- */

.lp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0 8px;
}

.lp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--t1);
}

.lp-brand:hover {
  color: var(--t1);
  text-decoration: none;
}

.lp-brand img {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.lp-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lp-nav__link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--t2);
  padding: 8px 10px;
  border-radius: var(--rm);
}

.lp-nav__link:hover {
  color: var(--t1);
  background: var(--s3);
  text-decoration: none;
}

/* An <a> styled as a button. .btn is built for <button>, so the two properties
   a link does not inherit -- the underline and the block-level line-height --
   are corrected here rather than in components.css, which stays diffable
   against nativeweb. */
.lp-btn-link {
  text-decoration: none;
  line-height: 1.2;
}

.lp-btn-link:hover {
  text-decoration: none;
  color: var(--on-ac);
}

.lp-btn-link.btn--outline:hover {
  color: var(--t1);
}

/* --- hero --------------------------------------------------------------- */

.lp-hero {
  padding: 56px 0 64px;
  max-width: 760px;
}

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac);
  background: var(--ac-dim);
  border: 1px solid var(--ac-bd);
  border-radius: 999px;
  padding: 5px 12px;
  margin: 0 0 20px;
}

.lp-hero__title {
  font-size: clamp(32px, 5.4vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}

/* The one gradient on the page, and it is the brand's own -- background-clip
   text with a transparent fill, which falls back to the accent colour anywhere
   the clip is unsupported because -webkit-text-fill-color is ignored there too. */
.lp-hero__title em {
  font-style: normal;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ac);
  -webkit-text-fill-color: transparent;
}

.lp-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--t2);
  margin: 0 0 28px;
}

.lp-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.lp-hero__note {
  font-size: 13px;
  color: var(--t3);
  margin: 22px 0 0;
}

/* --- sections ----------------------------------------------------------- */

.lp-section {
  padding: 52px 0;
  border-top: 1px solid var(--bd);
}

.lp-section__title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.lp-section__lede {
  font-size: 15px;
  color: var(--t2);
  max-width: 640px;
  margin: 0 0 30px;
}

.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-card {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  box-shadow: var(--sh1);
  padding: 20px 22px;
}

.lp-card__title {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 7px;
}

.lp-card__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--t2);
  margin: 0;
}

/* --- the architecture claim --------------------------------------------- */

.lp-claim {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--rx);
  padding: 34px 34px 30px;
}

.lp-claim__quote {
  font-family: var(--font-head);
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 12px;
}

.lp-claim__body {
  font-size: 14.5px;
  color: var(--t2);
  max-width: 620px;
  margin: 0 0 26px;
}

/* Term/definition pairs, so the architecture properties read as a list to a
   screen reader instead of as two runs of loose text. */
.lp-defs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 26px;
  margin: 0;
}

.lp-defs dt {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t1);
  margin: 0 0 4px;
}

.lp-defs dd {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--t2);
  margin: 0;
}

/* --- scope -------------------------------------------------------------- */

.lp-scope {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.lp-scope__col {
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 20px 22px;
}

.lp-scope__col--is {
  background: var(--ac-dim);
  border-color: var(--ac-bd);
}

.lp-scope__head {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
}

.lp-scope__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t2);
}

/* The marker is a character in content, not an image, so it survives forced
   colours and reads as text; aria-hidden on the span keeps it out of the
   accessible name of the item. */
.lp-scope__mark {
  font-family: var(--font-mono);
  font-weight: 700;
  margin-right: 8px;
}

.lp-scope__col--is .lp-scope__mark {
  color: var(--ac);
}

.lp-scope__col--not .lp-scope__mark {
  color: var(--t3);
}

/* --- standards ---------------------------------------------------------- */

.lp-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-specs li {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--t2);
  background: var(--s3);
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 6px 12px;
}

/* --- footer ------------------------------------------------------------- */

.lp-footer {
  border-top: 1px solid var(--bd);
  padding: 26px 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--t3);
}