@layer components {
  .eyebrow--coral { --tone: var(--pw-secondary); }

  .hero--home {
    padding-block: clamp(5rem, 8vw, 7rem) clamp(3rem, 5vw, 4.5rem);

    & .hero--split { align-items: stretch; }
    & .hero__title {
      display: grid;
      font-size: clamp(3.75rem, 6vw, 5.6rem);
      & .accent { font-weight: 300; }
    }
    & :is(.hero__body, .hero__aside) {
      min-block-size: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    & .hero__copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(1.25rem, 2.2vw, 1.8rem);
      margin-block-start: clamp(1rem, 5vh, 4rem);
    }
    & .lead { color: var(--pw-fg-meta); font-weight: 300; font-size: 1.25rem; line-height: 1.6; }
    & .stage { margin-block-start: clamp(1rem, 5vh, 4rem); align-self: flex-end; }
    & .home-hero-proof {
      align-self: flex-end;
      inline-size: min(100%, 31rem);
      margin-block-start: clamp(1rem, 5vh, 4rem);
    }
    & .hero__foot { justify-content: center; }
  }

  .home-hero__kicker {
    margin: 0 0 .25rem;
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-xs);
    letter-spacing: .045em;
    color: var(--pw-fg-faint);
    & span {
      padding-block-end: .3rem;
      border-block-end: 1px solid var(--pw-primary-soft);
      color: var(--pw-fg-subtle);
    }
  }

  .hero__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.25rem 2.5rem;
    margin-block-start: clamp(3.5rem, 8vh, 6rem);
  }

  .home-proof {
    justify-content: center;
    & .meta-strip__item { align-items: center; text-align: center; }
  }

  .home-feature-section {
    & .feature__text { gap: 1.25rem; }
    & h2 { font-size: clamp(2.35rem, 4vw, 3.7rem); max-inline-size: 11ch; }
  }

  .home-code {
    position: relative;
    min-inline-size: 0;
    & .home-code__lang { color: var(--pw-code-kw); }
    & .terminal { border-width: .5px; }
    &.home-code--indigo .terminal { border-color: color-mix(in oklch, var(--pw-accent-browser) 25%, var(--pw-border-soft)); }
    &.home-code--coral .terminal { border-color: color-mix(in oklch, var(--pw-accent-php) 25%, var(--pw-border-soft)); }
  }

  .home-browser-demo {
    position: relative;
    min-inline-size: 0;
    padding-block-end: 1rem;
  }

  .home-browser-demo__window {
    overflow: hidden;
    border: 1px solid var(--pw-border-strong);
    border-radius: .7rem;
    background: var(--pw-bg-panel);
    box-shadow: 0 1.5rem 4rem -2rem color-mix(in oklch, var(--pw-primary) 20%, transparent);
  }

  .home-browser-demo__bar {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-block-size: 2.5rem;
    padding-inline: .85rem;
    background: var(--pw-bg-subtle);
    border-block-end: 1px solid var(--pw-border-soft);
    font-family: var(--pw-font-mono);
    font-size: .6rem;
  }

  .home-browser-demo__controls {
    display: flex;
    gap: .3rem;
    & i {
      inline-size: .35rem;
      block-size: .35rem;
      border-radius: 50%;
      background: var(--pw-fg-faint);
      opacity: .5;
    }
  }

  .home-browser-demo__address { color: var(--pw-fg-meta); }
  .home-browser-demo__live {
    margin-inline-start: auto;
    color: var(--pw-fg-faint);
    &::before {
      content: "";
      display: inline-block;
      inline-size: .3rem;
      block-size: .3rem;
      margin-inline-end: .4rem;
      border-radius: 50%;
      background: var(--pw-success);
    }
  }

  .home-browser-demo__viewport {
    display: block;
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
    font-family: var(--pw-font-sans);
  }

  .home-browser-demo__rail { stroke: var(--pw-border-soft); }
  .home-browser-demo__nav { stroke: var(--pw-fg-faint); }
  .home-browser-demo__heading { fill: var(--pw-fg-strong); font-size: 18px; font-weight: 500; }
  .home-browser-demo__muted { fill: var(--pw-fg-faint); font-size: 11px; }
  .home-browser-demo__avatar { fill: color-mix(in oklch, var(--pw-primary) 18%, var(--pw-bg-panel)); }
  .home-browser-demo__initial { fill: var(--pw-primary-soft); font-size: 11px; }
  .home-browser-demo__column { fill: var(--pw-bg-subtle); }
  .home-browser-demo__label { fill: var(--pw-fg-meta); font-size: 12px; }
  .home-browser-demo__progress-dot { fill: var(--pw-secondary-soft); }
  .home-browser-demo__done-dot { fill: var(--pw-success); }
  .home-browser-demo__slot { stroke: var(--pw-border-strong); stroke-dasharray: 4 5; }
  .home-browser-demo__background-task {
    & rect { fill: var(--pw-bg-nav); }
    & path { stroke: var(--pw-stroke); stroke-width: 3; stroke-linecap: round; }
  }
  .home-browser-demo__trail { stroke: var(--pw-primary-soft); stroke-width: 1.5; opacity: .55; }
  .home-browser-demo__task { transform: translate(198px, 0); }
  .home-browser-demo__task-face {
    fill: color-mix(in oklch, var(--pw-primary) 14%, var(--pw-bg-panel));
    stroke: color-mix(in oklch, var(--pw-primary-soft) 50%, transparent);
  }
  .home-browser-demo__task-tag { fill: var(--pw-primary-soft); font-size: 9px; letter-spacing: 1px; }
  .home-browser-demo__task-title { fill: var(--pw-fg-strong); font-size: 13px; font-weight: 500; }
  .home-browser-demo__task-lines { stroke: var(--pw-primary-soft); stroke-width: 3; opacity: .3; stroke-linecap: round; }
  .home-browser-demo__task-dot { fill: var(--pw-primary-soft); opacity: .6; }
  .home-browser-demo__target { stroke: var(--pw-primary-soft); stroke-width: 1.5; opacity: 0; }
  .home-browser-demo__verified {
    & circle { fill: var(--pw-success); }
    & path { stroke: var(--pw-bg-panel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  }
  .home-browser-demo__cursor {
    transform: translate(384px, 206px);
    & path { fill: var(--pw-primary-soft); stroke: var(--pw-bg-panel); stroke-width: 2; stroke-linejoin: round; }
    & rect { fill: var(--pw-primary-soft); }
    & text { fill: var(--pw-bg-panel); font-size: 10px; font-weight: 600; }
  }
  .home-browser-demo__capture-frame { stroke: var(--pw-primary-soft); stroke-width: 2; opacity: 0; }

  .home-browser-demo__receipt {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    inline-size: max-content;
    max-inline-size: calc(100% - 2rem);
    margin: -1.4rem 1rem 0 auto;
    padding: .65rem .85rem;
    border: 1px solid var(--pw-border-strong);
    border-radius: .6rem;
    background: var(--pw-bg-panel);
    box-shadow: 0 .5rem 1.5rem color-mix(in oklch, var(--pw-bg-app) 60%, transparent);
    font-size: .65rem;
    & svg { inline-size: 3.5rem; stroke: var(--pw-border-strong); flex-shrink: 0; }
    & strong { display: block; margin-block-end: .2rem; color: var(--pw-fg-subtle); font-family: var(--pw-font-mono); font-weight: 400; }
    & span span { color: var(--pw-fg-faint); }
  }
  .home-browser-demo__mini-window { fill: var(--pw-bg-subtle); }
  .home-browser-demo__mini-check { stroke: var(--pw-success); stroke-width: 2; }
  .home-browser-demo__receipt-check { color: var(--pw-success); font-size: 1rem; margin-inline-start: .4rem; }
  .home-browser-demo__steps {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin: 1.65rem .5rem 0;
    font-family: var(--pw-font-mono);
    font-size: .65rem;
  }
  .home-browser-demo__step {
    color: var(--pw-primary-soft);
    & b { margin-inline-start: .25rem; font-weight: 400; color: var(--pw-fg-meta); }
  }

  @media (prefers-reduced-motion: no-preference) {
    .home-browser-demo__task { animation: home-demo-drag 4.8s both; }
    .home-browser-demo__target { animation: home-demo-target 4.8s both; }
    .home-browser-demo__cursor { animation: home-demo-cursor 4.8s both; }
    .home-browser-demo__trail { animation: home-demo-trail 4.8s both; }
    .home-browser-demo__verified { animation: home-demo-verify 4.8s both; }
    .home-browser-demo__capture-frame { animation: home-demo-capture 4.8s both; }
    .home-browser-demo__receipt { animation: home-demo-receipt 4.8s both; }
    .home-browser-demo__step { animation: home-demo-step .4s both; }
    .home-browser-demo__step--locate { animation-delay: .5s; }
    .home-browser-demo__step--drag { animation-delay: 1.5s; }
    .home-browser-demo__step--assert { animation-delay: 3s; }
    .home-browser-demo__step--capture { animation-delay: 4s; }
  }

  @keyframes home-demo-drag {
    0%, 30% { transform: translate(0, 0); }
    37% { transform: translate(8px, -8px) rotate(-2deg); }
    57% { transform: translate(198px, -8px) rotate(1deg); }
    64%, 100% { transform: translate(198px, 0); }
  }
  @keyframes home-demo-target {
    0%, 13%, 66%, 100% { opacity: 0; }
    20%, 59% { opacity: 1; }
  }
  @keyframes home-demo-cursor {
    0%, 6% { transform: translate(330px, 254px); }
    24%, 30% { transform: translate(163px, 162px); }
    37% { transform: translate(171px, 154px); }
    57% { transform: translate(361px, 154px); }
    64% { transform: translate(361px, 162px); }
    76%, 100% { transform: translate(384px, 206px); }
  }
  @keyframes home-demo-trail { 0%, 34% { opacity: 0; } 64%, 100% { opacity: .55; } }
  @keyframes home-demo-verify { 0%, 65% { opacity: 0; } 72%, 100% { opacity: 1; } }
  @keyframes home-demo-capture { 0%, 78%, 94%, 100% { opacity: 0; } 82%, 88% { opacity: 1; } }
  @keyframes home-demo-receipt { 0%, 85% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
  @keyframes home-demo-step { from { opacity: .35; } to { opacity: 1; } }

  @media (42rem < width <= 64rem) {
    .home-browser-demo__live { display: none; }
    .home-browser-demo__bar { gap: .5rem; font-size: .55rem; }
    .home-browser-demo__receipt { gap: .4rem; padding: .5rem; font-size: .55rem; margin-inline-end: .5rem; }
    .home-browser-demo__receipt svg { inline-size: 2.5rem; }
    .home-browser-demo__steps { font-size: .5rem; margin-inline: 0; }
    .home-browser-demo__step b { margin-inline-start: 0; }
  }

  .home-highlights {
    margin-block-start: clamp(2.5rem, 6vh, 3.5rem);
    & .cards { gap: clamp(1rem, 1.8vw, 1.5rem); }
  }
  .home-highlight-card {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    grid-template-rows: min-content 1fr;
    gap: .45rem 1.25rem;
    align-content: start;
    min-block-size: 10rem;
    padding: clamp(1.5rem, 2vw, 1.85rem);
    overflow: visible;
    transition-property: border-color, transform;
    transition-duration: 320ms;
    transition-timing-function: cubic-bezier(.2, .8, .2, 1);

    & .home-highlight-card__icon {
      grid-row: 1 / span 2;
      inline-size: 3rem;
      block-size: 3rem;
      color: var(--pw-primary-soft);
      stroke: currentColor;
      stroke-width: 1.45;
      transform-origin: center;
      transition: transform 360ms cubic-bezier(.2, .8, .2, 1);
    }

    & .card__title { align-self: end; }
    & .card__desc { grid-column: 2; }

    &:focus-within {
      transform: translateY(-.25rem);
      transition-duration: 140ms;
      & .home-highlight-card__icon {
        transform: scale(1.08);
        transition-duration: 150ms;
      }
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .home-highlight-card:hover {
      transform: translateY(-.25rem);
      transition-duration: 140ms;
      & .home-highlight-card__icon {
        transform: scale(1.08);
        transition-duration: 150ms;
      }
    }
  }

  .home-symfony {
    background: color-mix(in oklch, var(--pw-accent-browser) 4%, var(--pw-bg-app));
  }

  .home-symfony__layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(3rem, 8vw, 7rem);
    align-items: center;
  }

  .home-symfony__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;

    & h2 {
      max-inline-size: 12ch;
      font-size: clamp(2.55rem, 4.5vw, 4.25rem);
    }

    & .lead { max-inline-size: 37rem; }
  }

  .home-symfony__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-block-start: .5rem;
  }

  .home-symfony__proof { min-inline-size: 0; }

  .home-symfony__signals {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin-block-start: 1.25rem;
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-xs);
    letter-spacing: .035em;

    & a {
      color: var(--pw-fg-meta);
      text-align: center;

      &:hover { color: var(--pw-primary-soft); }
    }
  }

  .home-integrations {
    & .section-head { max-inline-size: 48rem; }
  }

  .home-integration-grid { gap: clamp(1rem, 2vw, 1.5rem); }

  .home-integration-card {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-rows: min-content 1fr;
    gap: .45rem 1.15rem;
    align-content: start;
    min-block-size: 10.5rem;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    overflow: visible;
    transition: border-color 320ms, transform 320ms cubic-bezier(.2, .8, .2, 1);

    & .home-integration-card__icon {
      grid-row: 1 / span 2;
      inline-size: 2.75rem;
      block-size: 2.75rem;
      color: var(--pw-accent-browser);
      stroke: currentColor;
      stroke-width: 1.45;
      transform-origin: center;
      transition: transform 360ms cubic-bezier(.2, .8, .2, 1);
    }

    & .card__title { align-self: end; }
    & .card__desc { grid-column: 2; }

    &:focus-within {
      transform: translateY(-.25rem);
      transition-duration: 140ms;
      & .home-integration-card__icon {
        transform: scale(1.08);
        transition-duration: 150ms;
      }
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .home-integration-card:hover {
      transform: translateY(-.25rem);
      transition-duration: 140ms;
      & .home-integration-card__icon {
        transform: scale(1.08);
        transition-duration: 150ms;
      }
    }
  }

  .home-integrations__link {
    margin-block-start: 1.5rem;
  }

  .home-extensions {
    padding-block-start: clamp(2rem, 4vw, 3.5rem);
  }

  .home-extension-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    overflow: visible;
  }

  .home-extension {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    grid-template-rows: min-content 1fr;
    gap: .45rem 1.15rem;
    align-content: start;
    min-inline-size: 0;
    min-block-size: 10.5rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--pw-card-flat);
    border: 1px solid transparent;
    border-radius: var(--pw-r-md);
    color: inherit;
    overflow: visible;
    transition: border-color 320ms, background-color 320ms, transform 320ms cubic-bezier(.2, .8, .2, 1);

    &:focus-within {
      border-color: var(--pw-border-strong);
      transform: translateY(-.25rem);
      transition-duration: 140ms;
      & .home-extension__icon {
        transform: scale(1.08);
        transition-duration: 150ms;
      }
      & .home-extension__arrow { transform: translateX(.2rem); }
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .home-extension:hover {
      border-color: var(--pw-border-strong);
      background: color-mix(in oklch, var(--pw-accent-browser) 6%, var(--pw-card-flat));
      transform: translateY(-.25rem);
      transition-duration: 140ms;
      & .home-extension__icon {
        transform: scale(1.08);
        transition-duration: 150ms;
      }
      & .home-extension__arrow { transform: translateX(.2rem); }
    }
  }

  .home-extension__icon {
    grid-row: 1 / span 2;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    color: var(--pw-accent-browser);
    stroke: currentColor;
    stroke-width: 1.45;
    transform-origin: center;
    transition: transform 360ms cubic-bezier(.2, .8, .2, 1);
  }

  .home-extension__name {
    align-self: end;
    color: var(--pw-fg-strong);
    font-size: var(--pw-fs-md);
    font-weight: 400;
  }

  .home-extension__desc {
    grid-column: 2 / -1;
    color: var(--pw-fg-meta);
    font-size: var(--pw-fs-sm);
    font-weight: 300;
    line-height: 1.55;
  }

  .home-extension__arrow {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    color: var(--pw-primary-soft);
    transition: transform 360ms cubic-bezier(.2, .8, .2, 1);
  }

  .home-cta-section { padding-block: clamp(3rem, 5vw, 4.5rem); }
  .home-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    text-align: start;

    & h2 {
      max-inline-size: none;
      font-size: clamp(2rem, 3.5vw, 3rem);
      line-height: 1.08;
      text-wrap: balance;
    }
  }
  .home-cta__actions { justify-content: flex-end; }

  @media (width < 52rem) {
    .hero--home {
      & .hero--split,
      & :is(.hero__body, .hero__aside) { min-block-size: auto; }
      & :is(.stage, .home-hero-proof) { display: none; }
      & .meta-strip { justify-content: center; gap: clamp(1.75rem, 4vw, 3rem); }
      & .meta-strip__label { font-size: .66rem; letter-spacing: .08em; }
      & .meta-strip__value { font-size: .95rem; }
    }
  }

  @media (42rem < width < 52rem) {
    .home-highlights .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (width <= 68rem) {
    .hero--home {
      padding-block-start: clamp(2.75rem, 6vw, 4rem);
      & :is(.hero__copy, .stage, .home-hero-proof) { margin-block-start: 0; }
      & .hero__copy { gap: 1.35rem; }
      & .hero__title { font-size: clamp(3rem, 7vw, 4.4rem); }
      & .lead {
        font-size: 1.1rem;
        line-height: 1.5;
      }
      & .home-highlights { margin-block-start: clamp(2.25rem, 5vw, 3rem); }
      & .hero__foot,
      & .home-install { margin-block-start: clamp(2rem, 4vw, 2.75rem); }
    }
    .home-highlights { & .cards { gap: 1rem; } }
    .home-highlight-card {
      min-block-size: 0;
      padding: 1.35rem 1.45rem;
      & .card__desc { line-height: 1.45; }
    }
    .home-feature-section,
    .home-symfony,
    .home-integrations,
    .home-extensions {
      padding-block: clamp(3.25rem, 6vw, 4.5rem);
    }

    .home-symfony__layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 2.5rem;
    }

    .home-integration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-integration-card { min-block-size: 11rem; }

    .home-extension {
      padding: 1.5rem;
    }
  }

  @media (width <= 60rem) {
    .home-cta { grid-template-columns: minmax(0, 1fr); }
  }

  @media (42rem < width <= 64rem) {
    .hero--home {
      & .hero--split {
        grid-template-columns: minmax(0, 1.15fr) minmax(13rem, .85fr);
        gap: clamp(1.75rem, 4vw, 2.75rem);
        align-items: center;
      }
      & .hero__aside {
        display: flex;
        align-items: flex-end;
        justify-content: center;
      }
      & :is(.stage, .home-hero-proof) {
        display: block;
        inline-size: min(100%, 24rem);
      }
    }

    .home-feature-section {
      & .feature {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
      }
      & .feature--reverse > :first-child { order: 0; }
    }
  }

  @media (width <= 42rem) {
    .hero--home {
      padding-block-start: 2.75rem;
      & .hero__title { font-size: clamp(2.8rem, 13vw, 3.6rem); }
      & .home-highlights .cards { grid-template-columns: minmax(0, 1fr); }
      & .meta-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem .75rem;
      }
    }
    .home-symfony__signals { grid-template-columns: minmax(0, 1fr); }
    .home-symfony__signals a { text-align: start; }
    .home-integration-grid { grid-template-columns: minmax(0, 1fr); }
    .home-integration-card {
      min-block-size: 0;
    }
    .home-extension-list { grid-template-columns: minmax(0, 1fr); }
    .home-cta__actions {
      flex-wrap: nowrap;
      gap: .5rem;
    }
    .home-cta__actions .btn { padding-inline: .75rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-highlight-card,
    .home-highlight-card .home-highlight-card__icon,
    .home-integration-card,
    .home-integration-card .home-integration-card__icon,
    .home-extension,
    .home-extension .home-extension__icon,
    .home-extension .home-extension__arrow {
      transition: none;
    }
    .home-highlight-card:hover,
    .home-highlight-card:focus-within,
    .home-integration-card:hover,
    .home-integration-card:focus-within,
    .home-extension:hover,
    .home-extension:focus-within {
      transform: none;
      & :is(.home-highlight-card__icon, .home-integration-card__icon, .home-extension__icon, .home-extension__arrow) { transform: none; }
    }
  }
}