/* ============================================================================
   262-php-21-landing-hero — the dark opening of a landing page

   After the design proposal (PAGE 4). Every colour is a token from
   01-type-color.css, mixed — no hex value of its own. Type: the display face
   for the title (H1 of the style guide), .label for the eyebrow, .x-btn.
   ========================================================================== */

.x262-lhero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: min(80vh, 680px);
    padding: clamp(5.5rem, 12vw, 7.5rem) 0 3.5rem;
    color: var(--paper);
    background: color-mix(in srgb, var(--green-800) 24%, var(--ink));
}

/* Three quiet layers: glow, grid, vignette. */
.x262-lhero__layer { position: absolute; inset: -10% -5%; pointer-events: none; }
.x262-lhero__layer--glow {
    background:
        radial-gradient(38rem 30rem at 78% 22%, color-mix(in srgb, var(--green-600) 60%, transparent), transparent 70%),
        radial-gradient(30rem 24rem at 12% 78%, color-mix(in srgb, var(--green-100) 18%, transparent), transparent 72%);
}
.x262-lhero__layer--grid {
    background-image:
        linear-gradient(color-mix(in srgb, var(--paper) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--paper) 7%, transparent) 1px, transparent 1px);
    background-size: 64px 64px;
}
.x262-lhero__layer--vig {
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ink) 55%, transparent),
        color-mix(in srgb, var(--ink) 15%, transparent) 45%,
        color-mix(in srgb, var(--ink) 85%, transparent));
}

.x262-lhero__inner { position: relative; z-index: 2; width: 100%; }
.x262-lhero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: 3rem;
    align-items: end;
}

.x262-lhero .label { color: color-mix(in srgb, var(--paper) 78%, transparent); }

/* The title rises in line by line — CSS only, no script needed. */
.x262-lhero__title {
    margin: .2em 0 .3em;
    max-width: 16ch;
    font-family: var(--font-display);
    font-weight: var(--w-display);
    font-size: clamp(2.6rem, 7.5vw, 6rem);
    line-height: .94;
    letter-spacing: var(--tr-display);
    color: inherit;
}
.x262-lhero__title span { display: block; overflow: hidden; }
.x262-lhero__title i {
    display: block;
    font-style: normal;
    animation: x262-lhero-rise .9s cubic-bezier(.16, 1, .3, 1) both;
}
.x262-lhero__title span:nth-child(2) i { animation-delay: .09s; }
.x262-lhero__title span:nth-child(3) i { animation-delay: .18s; }
@keyframes x262-lhero-rise { from { transform: translateY(110%); } to { transform: none; } }

.x262-lhero__lead {
    margin: 0;
    max-width: 46ch;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: color-mix(in srgb, var(--paper) 82%, transparent);
}

.x262-lhero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.625rem 0 0; }
.x262-lhero__ghost {
    background: transparent;
    color: var(--paper);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--paper) 60%, transparent);
}
.x262-lhero__ghost:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); }

/* The card on the right: the member's card, or the login prompt. */
.x262-lhero__card {
    padding: 1.375rem;
    border: 1px solid color-mix(in srgb, var(--paper) 24%, transparent);
    border-radius: var(--radius-lg, 6px);
    background: color-mix(in srgb, var(--paper) 10%, transparent);
    backdrop-filter: blur(8px);
}
.x262-lhero__card p { margin: .5rem 0 0; }
.x262-lhero__cardtitle { font-weight: var(--w-heading); margin-top: 0 !important; }

.x262-lhero__who { display: flex; align-items: center; gap: .75rem; }
.x262-lhero__av {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--green-600);
    font-weight: var(--w-heading);
}
.x262-lhero__role {
    display: block;
    font-size: var(--fs-body-sm);
    color: color-mix(in srgb, var(--paper) 70%, transparent);
}

.x262-lhero__rows { display: grid; gap: .5rem; margin: 1.125rem 0 0; font-size: var(--fs-body-sm); }
.x262-lhero__rows div { display: flex; justify-content: space-between; gap: 1rem; }
.x262-lhero__rows dt { color: color-mix(in srgb, var(--paper) 66%, transparent); }
.x262-lhero__rows dd { margin: 0; font-weight: var(--w-heading); }

@media (max-width: 960px) {
    .x262-lhero__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .x262-lhero { min-height: auto; padding: 5rem 0 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .x262-lhero__title i { animation: none; }
}