@layer components {

  /* Smooth scrolling for landing page
  /* ------------------------------------------------------------------------ */

  .landing {
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
  }


  /* App mockup (hero)
  /* ------------------------------------------------------------------------ */

  .landing-mockup {
    margin-block-start: var(--block-space-double);
    max-inline-size: 840px;
    margin-inline: auto;
    border-radius: 1em;
    overflow: hidden;
    box-shadow:
      0 1px 2px oklch(var(--lch-black) / 0.06),
      0 4px 12px oklch(var(--lch-black) / 0.08),
      0 16px 40px oklch(var(--lch-black) / 0.1),
      0 32px 64px oklch(var(--lch-black) / 0.06);
    border: 1px solid var(--color-ink-lighter);
    background: var(--color-canvas);
  }

  .landing-mockup__bar {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 0.75em;
    background: var(--color-ink-lightest);
    border-block-end: 1px solid var(--color-ink-lighter);
  }

  .landing-mockup__dot {
    block-size: 0.5em;
    inline-size: 0.5em;
    border-radius: 50%;
    background: var(--color-ink-light);
  }

  .landing-mockup__body {
    padding: 1.25em;
    display: grid;
    gap: 1em;
  }

  .landing-mockup__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .landing-mockup__title {
    font-weight: 800;
    font-size: var(--text-medium);
    color: var(--color-ink);
  }

  .landing-mockup__badge {
    font-size: var(--text-x-small);
    font-weight: 600;
    padding: 0.2em 0.6em;
    border-radius: 99rem;
    background: oklch(var(--lch-green-light));
    color: oklch(var(--lch-green-dark));
  }

  .landing-mockup__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75em;

    @media (max-width: 479px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .landing-mockup__stat {
    padding: 0.75em;
    border-radius: 0.5em;
    background: var(--color-ink-lightest);
    text-align: center;
  }

  .landing-mockup__stat-value {
    font-size: var(--text-large);
    font-weight: 800;
    line-height: 1.2;
  }

  .landing-mockup__stat-label {
    font-size: 0.65em;
    color: var(--color-ink-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-start: 0.15em;
  }

  /* Mini heat map inside mockup */
  .landing-mockup__heatmap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
  }

  .landing-mockup__cell {
    aspect-ratio: 1;
    border-radius: 3px;
    min-block-size: 1.5em;
  }


  /* Risk rows inside mockup */
  .landing-mockup__risks {
    display: grid;
    gap: 0.4em;
  }

  .landing-mockup__risk {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.5em 0.75em;
    border-radius: 0.5em;
    background: var(--color-ink-lightest);
    font-size: var(--text-small);
  }

  .landing-mockup__risk-code {
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--color-ink-medium);
    flex-shrink: 0;
  }

  .landing-mockup__risk-name {
    flex: 1;
    color: var(--color-ink);
    font-weight: 500;
  }

  .landing-mockup__risk-score {
    font-size: var(--text-x-small);
    font-weight: 700;
    padding: 0.15em 0.5em;
    border-radius: 99rem;
    flex-shrink: 0;
  }


  /* Action Board Mockup (landing page) — uses real .action-board classes
  /* ------------------------------------------------------------------------ */

  .landing-board-mockup.action-board {
    margin-block-start: var(--block-space-double);
    max-inline-size: 960px;
    margin-inline: auto;
    border-radius: 0.75em;
    overflow: hidden;
    box-shadow:
      0 2px 4px oklch(var(--lch-black) / 0.06),
      0 8px 20px oklch(var(--lch-black) / 0.08),
      0 20px 50px oklch(var(--lch-black) / 0.1);
    border: 1px solid var(--color-ink-lighter);
    background: var(--color-ink-lightest);
    padding: 0.75em;

    .card-columns {
      min-block-size: auto;
      padding-inline: 0;
    }

    /* Column backgrounds: tinted canvas */
    .cards {
      --column-color: color-mix(in srgb, var(--card-color) 20%, var(--color-canvas));
    }

    /* Card backgrounds: lightly tinted canvas */
    .card {
      --card-bg-color: color-mix(in srgb, var(--card-color) 8%, var(--color-canvas));

      cursor: default;
    }

    .card__link {
      display: none;
    }

    @media (max-width: 639px) {
      .card-columns {
        grid-template-columns: 1fr;
        scroll-snap-type: none;
        overflow: visible;
      }
    }
  }

  /* Board feature highlights below mockup */
  .landing-board-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--inline-space);
    margin-block-start: var(--block-space-double);

    @media (max-width: 639px) {
      grid-template-columns: 1fr;
    }
  }

  .landing-board-feature {
    text-align: center;
  }

  .landing-board-feature h3 {
    font-size: var(--text-small);
    font-weight: 700;
    margin-block-end: 0.35em;
  }

  .landing-board-feature p {
    font-size: var(--text-x-small);
    color: var(--color-ink-dark);
    line-height: 1.6;
    max-inline-size: 30ch;
    margin-inline: auto;
  }


  /* Testimonials
  /* ------------------------------------------------------------------------ */

  .landing-testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--inline-space);
    margin-block-start: var(--block-space-double);

    @media (max-width: 799px) {
      grid-template-columns: 1fr;
      max-inline-size: 480px;
      margin-inline: auto;
    }
  }

  .landing-testimonial {
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 1em;
    padding: var(--block-space-double) var(--inline-space-double);
    text-align: start;
    transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s ease;

    @media (any-hover: hover) {
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px oklch(var(--lch-black) / 0.08);
      }
    }
  }

  .landing-testimonial__quote {
    font-size: var(--text-small);
    color: var(--color-ink);
    line-height: 1.7;
    font-style: italic;
    margin-block-end: var(--block-space-double);
  }

  .landing-testimonial__author {
    display: flex;
    align-items: center;
    gap: 0.6em;
  }

  .landing-testimonial__avatar {
    block-size: 2.25em;
    inline-size: 2.25em;
    border-radius: 50%;
    background: oklch(var(--lch-yellow-lighter));
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: var(--text-x-small);
    color: oklch(var(--lch-yellow-darker));
    flex-shrink: 0;
  }

  .landing-testimonial:nth-child(2) .landing-testimonial__avatar {
    background: oklch(var(--lch-aqua-lighter));
    color: oklch(var(--lch-aqua-darker));
  }

  .landing-testimonial:nth-child(3) .landing-testimonial__avatar {
    background: oklch(var(--lch-violet-lighter));
    color: oklch(var(--lch-violet-darker));
  }

  .landing-testimonial__name {
    font-size: var(--text-small);
    font-weight: 600;
    line-height: 1.2;
  }

  .landing-testimonial__role {
    font-size: var(--text-x-small);
    color: var(--color-ink-medium);
  }


  /* Who is this for
  /* ------------------------------------------------------------------------ */

  .landing-personas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--inline-space);
    margin-block-start: var(--block-space-double);
    text-align: center;

    @media (max-width: 799px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 479px) {
      grid-template-columns: 1fr;
    }
  }

  .landing-persona {
    padding: var(--block-space-double) var(--inline-space);
    border-radius: 1em;
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s ease;

    @media (any-hover: hover) {
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px oklch(var(--lch-black) / 0.08);
      }
    }
  }

  .landing-persona__icon {
    display: grid;
    place-items: center;
    block-size: 2.5em;
    inline-size: 2.5em;
    border-radius: 50%;
    margin-inline: auto;
    margin-block-end: var(--block-space);

    .icon {
      --icon-size: 1.2em;
    }
  }

  .landing-persona__icon--construction {
    background: oklch(var(--lch-yellow-light));
  }

  .landing-persona__icon--it {
    background: oklch(var(--lch-blue-light));
  }

  .landing-persona__icon--pm {
    background: oklch(var(--lch-green-light));
  }

  .landing-persona__icon--events {
    background: oklch(var(--lch-violet-light));
  }

  .landing-persona h3 {
    font-size: var(--text-small);
    font-weight: 700;
    margin-block-end: 0.25em;
  }

  .landing-persona p {
    font-size: var(--text-x-small);
    color: var(--color-ink-dark);
    line-height: 1.6;
  }


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

  .landing-footer__columns {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--inline-space-double);
    margin-block-end: var(--block-space-double);
    padding-block-end: var(--block-space-double);
    border-block-end: 1px solid var(--color-ink-lighter);

    @media (max-width: 639px) {
      grid-template-columns: 1fr 1fr;
      gap: var(--block-space-double) var(--inline-space-double);
    }
  }

  .landing-footer__col-title {
    font-size: var(--text-small);
    font-weight: 700;
    margin-block-end: 0.75em;
  }

  .landing-footer__col-links {
    list-style: none;
    padding: 0;
    margin: 0;

    li + li {
      margin-block-start: 0.35em;
    }

    a {
      font-size: var(--text-x-small);
      color: var(--color-ink-dark);
      text-decoration: none;

      @media (any-hover: hover) {
        &:hover { text-decoration: underline; }
      }
    }
  }

  .landing-footer__tagline {
    font-size: var(--text-x-small);
    color: var(--color-ink-medium);
    max-inline-size: 30ch;
    line-height: 1.5;
    margin-block-start: 0.5em;
  }

  .landing-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-x-small);
    color: var(--color-ink-medium);

    @media (max-width: 479px) {
      flex-direction: column;
      gap: var(--block-space-half);
    }
  }

  .landing-footer__bottom-links {
    display: flex;
    gap: var(--inline-space);

    a {
      font-size: var(--text-x-small);
      color: var(--color-ink-medium);
      text-decoration: none;

      @media (any-hover: hover) {
        &:hover { text-decoration: underline; }
      }
    }
  }
}