@layer pages {
  .landing {
    --landing-w: 1200px;
    --landing-bar-h: var(--site-bar-h);
    scroll-padding-block-start: var(--landing-bar-h);
  }

  html:has(.landing) { scroll-padding-block-start: calc(var(--landing-bar-h, 56px) + var(--s-4)); }

  main#main {
    display: grid;
    gap: var(--s-16);
    max-inline-size: calc(var(--landing-w) + 2 * var(--page-gutter));
    margin-inline: auto;
    padding: var(--s-10) var(--page-gutter) var(--s-16);
  }

  .landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: var(--s-12);
  }

  .landing-hero__copy {
    display: grid;
    gap: var(--s-5);
    align-content: center;
  }

  .landing-hero__title {
    font: var(--t-large-title);
    font-size: clamp(2rem, 1.25rem + 2vw, 2.75rem);
    text-wrap: balance;
    line-height: 1.08;
    letter-spacing: var(--t-large-title-track);
  }

  .landing-hero__line { display: block; }

  .landing-hero__lead {
    max-inline-size: 40ch;
    color: var(--label-secondary);
    font: var(--t-title-3);
    font-weight: 400;
  }

  .landing-hero__shot {
    position: relative;
    margin: 0;
    padding-block-end: var(--s-8);
  }

  .landing-window {
    margin: 0;
    border: 1px solid var(--separator);
    border-radius: var(--r-3);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-3);
    overflow: hidden;
  }

  .landing-window__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    block-size: 28px;
    padding-inline: var(--s-3);
    border-block-end: 1px solid var(--separator);
    background: var(--bg-elevated-2);
  }

  .landing-window__bar span {
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--r-full);
    background: var(--separator);
  }

  .landing-shot {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
    background: var(--fill);
  }

  .landing-shot--dark { display: none; }

  :root[data-theme="dark"] .landing-shot--light { display: none; }
  :root[data-theme="dark"] .landing-shot--dark { display: block; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .landing-shot--light { display: none; }
    :root:not([data-theme="light"]) .landing-shot--dark { display: block; }
  }

  .landing-gauge-card {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: calc(var(--s-6) * -1);
    display: grid;
    gap: var(--s-4);
    inline-size: 15rem;
    padding: var(--s-4);
    border: 1px solid var(--separator);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-2);
  }

  .landing-gauge-card__row {
    display: grid;
    gap: var(--s-1);
  }

  .landing-gauge-card__label {
    font: var(--t-subhead);
    color: var(--label-secondary);
  }

  .landing-unit-first { margin-inline: 0 0.2em; }

  .landing-facts__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
  }

  .landing-fact {
    display: grid;
    align-content: start;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-6);
  }

  .landing-fact + .landing-fact { border-inline-start: 1px solid var(--separator); }
  .landing-fact:first-child { padding-inline-start: 0; }

  .landing-fact__value {
    font-size: var(--n-display);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--label);
  }

  .landing-fact__label {
    margin: 0;
    color: var(--label-secondary);
    font: var(--t-callout);
  }

  .landing-section {
    display: grid;
    gap: var(--s-8);
    scroll-margin-block-start: calc(var(--landing-bar-h) + var(--s-4));
  }

  .landing-section--narrow {
    max-inline-size: var(--w-form);
    inline-size: 100%;
    justify-self: center;
    gap: var(--s-4);
  }

  .landing-section__head {
    display: grid;
    gap: var(--s-2);
    max-inline-size: 48rem;
  }

  .landing-section__title {
    font: var(--t-title-1);
    letter-spacing: var(--t-title-1-track);
    text-wrap: balance;
  }

  .landing-section__lead {
    color: var(--label-secondary);
    font: var(--t-body);
    max-inline-size: var(--w-text);
  }

  .landing-section__note {
    padding-inline: var(--s-4);
    color: var(--label-secondary);
    font: var(--t-footnote);
    letter-spacing: var(--t-footnote-track);
  }

  .landing-features {
    display: grid;
    gap: var(--s-16);
  }

  .landing-feature {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: var(--s-12);
  }

  .landing-feature:nth-child(even) .landing-feature__copy { order: 2; }

  .landing-feature__copy {
    display: grid;
    gap: var(--s-3);
    align-content: center;
  }

  .landing-feature__title {
    font: var(--t-title-2);
    letter-spacing: var(--t-title-2-track);
  }

  .landing-feature__text {
    color: var(--label-secondary);
    font: var(--t-body);
    max-inline-size: 44ch;
  }

  .landing-feature__points {
    display: grid;
    gap: var(--s-2);
    margin: var(--s-2) 0 0;
    padding: 0;
    list-style: none;
    font: var(--t-callout);
  }

  .landing-feature__points li {
    position: relative;
    padding-inline-start: var(--s-5);
  }

  .landing-feature__points li::before {
    content: "";
    position: absolute;
    inset-inline-start: 2px;
    inset-block-start: 0.5em;
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--r-full);
    background: var(--accent-fill);
  }

  .landing-scale {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 4px solid var(--fill);
  }

  .landing-scale__step {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--s-1);
    padding: var(--s-6) var(--s-6) 0 0;
  }

  .landing-scale__step::before {
    content: "";
    position: absolute;
    inset-block-start: -12px;
    inset-inline-start: 0;
    inline-size: 2px;
    block-size: 16px;
    border-radius: 1px;
    background: var(--label);
  }

  .landing-scale__step:last-child::after {
    content: "";
    position: absolute;
    inset-block-start: -12px;
    inset-inline-end: 0;
    inline-size: 2px;
    block-size: 16px;
    border-radius: 1px;
    background: var(--label);
  }

  .landing-scale__tick {
    color: var(--label-secondary);
    font-size: var(--n-body);
  }

  .landing-scale__title { font: var(--t-headline); }

  .landing-scale__text {
    color: var(--label-secondary);
    font: var(--t-callout);
  }

  .landing-row__title {
    font: var(--t-body);
    color: var(--label);
  }

  .landing-row__text {
    font: var(--t-subhead);
    color: var(--label-secondary);
  }

  #security .ui-row__body,
  #pricing .ui-row__body { gap: 2px; }

  .landing-price {
    flex: none;
    font-size: var(--n-body);
    text-align: end;
  }

  .landing-fleet {
    padding: var(--s-4) var(--s-4) var(--s-2);
    max-inline-size: 22rem;
  }

  .landing-skeleton-short { --w: 40%; }

  .landing-form { max-inline-size: none; }

  .landing-done { color: var(--success); }

  @media (max-width: 1023px) {
    .landing-hero,
    .landing-feature { grid-template-columns: 1fr; gap: var(--s-8); }
    .landing-feature:nth-child(even) .landing-feature__copy { order: 0; }
    .landing-gauge-card { inset-inline-start: var(--s-4); }
  }

  @media (max-width: 767px) {
    main#main { gap: var(--s-12); padding-block-start: var(--s-6); }

    .landing-hero__shot { padding-block-end: 0; }

    .landing-gauge-card {
      position: static;
      inline-size: auto;
      margin-block-start: var(--s-3);
      grid-template-columns: 1fr 1fr;
      box-shadow: none;
    }

    .landing-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); }
    .landing-fact { padding: var(--s-1) var(--s-4); }
    .landing-fact:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
    .landing-fact__value { font-size: var(--n-large); }

    .landing-features { gap: var(--s-12); }

    .landing-scale {
      grid-template-columns: 1fr;
      border-block-start: 0;
      border-inline-start: 4px solid var(--fill);
      gap: var(--s-6);
    }

    .landing-scale__step { padding: 0 0 0 var(--s-5); }

    .landing-scale__step::before,
    .landing-scale__step:last-child::after {
      inset-block-start: 0.35em;
      inset-inline-start: -12px;
      inline-size: 16px;
      block-size: 2px;
    }

    .landing-scale__step:last-child::after { display: none; }

  }
}