@layer tokens {
  :root {
    --text-landing-display: clamp(2.875rem, 1.55rem + 3.68vw, 4.5rem);
    --text-landing-feature: clamp(1.5rem, 1.06rem + 1.22vw, 2rem);
    --text-landing-body: clamp(1rem, 0.9rem + 0.28vw, 1.125rem);
    --text-public-display-mobile: clamp(46px, 14vw, 64px);
    --leading-public-body: 1.444444;
    --tracking-landing-display: -0.06em;

    --landing-button-padding-block: 0.8125rem;
    --landing-button-padding-inline: 1.375rem;
    --landing-nav-gap: 2.6875rem;
    --landing-hero-copy-start: 6.75rem;
    --landing-hero-label-gap: 1.0625rem;
    --landing-copy-label-gap: 0.9375rem;
    --landing-install-start: 5.8125rem;
    --landing-install-copy-offset: 0.6875rem;
    --landing-gallery-offset: 3.8125rem;
    --landing-system-gap: 2.0625rem;
    --landing-system-offset: 4.375rem;
    --landing-why-offset: 11.75rem;
    --landing-guides-offset: 4rem;
    --landing-guides-grid-offset: 3.6875rem;
    --landing-guide-padding-inline: 1.1875rem;
    --landing-guide-padding-end: 1.375rem;
    --landing-footer-offset: 3.9375rem;
    --landing-footer-copy-offset: 0.625rem;
    --landing-footer-base-offset: 2.8125rem;
    --landing-room-scrim: linear-gradient(to bottom, rgb(0 0 0 / 50%), transparent 50%);

    --public-card-reveal-duration: 260ms;
    --public-card-reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --public-card-reveal-distance: 1rem;
    --public-card-active-overlay: var(--color-brand);
    --public-content-section: 6rem;
    --public-content-section-mobile: 4rem;
    --public-article-hero-block: clamp(5rem, 9vw, 8rem);
    --public-article-hero-text-block: clamp(6rem, 11vw, 10rem);
    --public-border-none: 0;
    --public-border-collapse: collapse;

    /* One public breakpoint: the shell and the landing composition both
       change column count at 64rem, matching the article family.
       The logo does not scale: the mark holds one size at every width, and
       the bar around it steps once at that breakpoint rather than shrinking
       continuously, so nothing drifts as the window is dragged. */
    --site-header-height: 134px;
    --site-logo-width: 193px;
  }
}

@layer components {
  .p-public {
    background: var(--color-canvas);
  }

  .c-eyebrow.c-site-eyebrow {
    color: var(--color-label);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    line-height: normal;
  }

  .c-button.c-site-button {
    font-weight: var(--font-weight-regular);
    min-block-size: 49px;
    padding: var(--landing-button-padding-block) var(--landing-button-padding-inline);
  }

  .c-site-shell {
    inline-size: min(calc(100% - var(--layout-gutter) - var(--layout-gutter)), var(--layout-content-max));
    margin-inline: auto;
  }

  .c-header.c-site-header {
    border-block-end-color: var(--color-canvas);
    block-size: var(--site-header-height);
    position: relative;
  }

  .c-site-header__inner {
    align-items: center;
    block-size: var(--site-header-height);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
  }

  .c-site-header__logo {
    display: block;
    flex: 0 0 auto;
    inline-size: var(--site-logo-width);
  }

  .c-site-header__logo img {
    inline-size: var(--site-logo-width);
  }

  .c-nav.c-site-nav {
    flex-wrap: nowrap;
    gap: clamp(var(--space-5), 2.9vw, var(--landing-nav-gap));
  }

  .c-nav.c-site-nav a:not(.c-site-button) {
    align-items: center;
    display: inline-flex;
    min-block-size: 49px;
    padding: 0;
    white-space: nowrap;
  }

  .c-site-footer {
    background: var(--color-brand);
    color: var(--color-canvas);
    font-family: var(--font-label);
  }

  .c-site-footer__calculator {
    border-block-end: var(--border-hairline) solid var(--color-brand-muted);
    display: grid;
    gap: var(--layout-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: var(--landing-footer-offset) var(--space-20);
  }

  .c-site-footer__calculator h2 {
    align-self: start;
    font-size: var(--text-landing-display);
    letter-spacing: var(--tracking-landing-display);
    line-height: 1;
    max-inline-size: 530px;
  }

  .c-site-footer__calculator-copy {
    align-content: start;
    display: grid;
    justify-items: start;
    padding-block-start: var(--landing-footer-copy-offset);
  }

  .c-site-footer__calculator-copy .c-site-eyebrow {
    color: var(--color-brand-muted);
  }

  .c-site-footer__calculator-copy > p:nth-child(2) {
    font-family: var(--font-body);
    font-size: var(--text-landing-body);
    line-height: var(--leading-public-body);
    margin-block-start: var(--landing-copy-label-gap);
  }

  .c-button.c-site-footer__button {
    background: var(--color-transparent);
    color: var(--color-canvas);
    margin-block-start: var(--space-5);
  }

  .c-site-footer__base {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--layout-gap);
    padding-block: var(--landing-footer-base-offset) var(--space-16);
  }

  .c-site-footer__brand img {
    inline-size: 193px;
  }

  .c-site-footer__brand p {
    color: var(--color-brand-muted);
    font-size: 16px;
    margin-block-start: var(--space-5);
  }

  .c-site-footer__links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .c-site-footer__links ul {
    display: grid;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .c-site-footer__links a {
    font-size: 16px;
    text-decoration-color: var(--color-transparent);
    text-decoration-line: underline;
    text-underline-offset: var(--space-2);
  }

  .c-site-footer__links a:hover {
    text-decoration-color: currentColor;
  }

  .m-privacy-page {
    padding-block: clamp(var(--space-16), 12vw, var(--space-24));
  }

  .m-privacy-page > .u-stack {
    gap: var(--space-10);
  }

  .m-privacy-page h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    letter-spacing: var(--tracking-landing-display);
    line-height: 1;
  }

  .m-privacy-page h2 {
    font-size: var(--text-subheading);
    letter-spacing: var(--tracking-display);
  }

  .m-privacy-page section {
    border-block-start: var(--border-hairline) solid var(--color-brand-muted);
    padding-block-start: var(--space-6);
  }

  .m-privacy-page p {
    font-size: var(--text-landing-body);
    line-height: var(--leading-public-body);
  }

  .m-privacy-page__updated {
    color: var(--color-label);
    font-size: 0.875rem !important;
  }

  @media (max-width: 64rem) {
    .c-site-header,
    .c-site-header__inner {
      block-size: 88px;
    }

    .c-site-header[data-navigation][data-nav-ready] .c-site-header__panel {
      background: var(--color-canvas);
    }

    .c-site-footer__calculator,
    .c-site-footer__base {
      grid-template-columns: 1fr;
    }

    .c-site-footer__calculator h2 {
      font-size: var(--text-public-display-mobile);
      inline-size: 100%;
      letter-spacing: var(--tracking-landing-display);
    }

    .c-site-footer__calculator {
      gap: var(--space-8);
      padding-block: var(--space-16);
    }

    .c-site-footer__calculator-copy {
      padding: 0;
    }

    .c-site-footer__base {
      gap: var(--space-12);
      padding-block: var(--space-12) var(--space-12);
    }

    .c-site-footer__links {
      gap: var(--space-8);
    }
  }

}