/* ── Keyframes (moved from inline <style> blocks) ── */

@keyframes layerSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.6); opacity: 0.6; }
}

@keyframes badgeReveal {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Root ── */

.lp-root {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* ── Shared layout ── */

.lp-section {
    padding: 96px 48px;
    width: 100%;
}

.lp-container {
    max-width: 1040px;
    margin: 0 auto;
    width: 100%;
}

/* ── Hero ── */

.lp-hero {
    background: var(--bg);
    padding-top: 65px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-height: 600px;
}

.lp-hero__eyebrow {
    display: block;
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.66);
}

.lp-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 48px 0 clamp(44px, 5vw, 88px);
    text-align: left;
    background: linear-gradient(to right, rgba(0,5,16,0.85) 0%, rgba(0,5,16,0.62) 28%, rgba(0,5,16,0.34) 55%, #46566b 78%, #d6dae0 100%);
}

.lp-hero__media {
    position: relative;
    align-self: stretch;
    min-height: 0;
    overflow: hidden;
}

.lp-hero__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, #d6dae0 0%, transparent 10%, transparent 100%);
}

/* Mobile: the split collapses to a single column, copy first and the video beneath it. */
@media (max-width: 900px) {
    .lp-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 40px;
    }

    .lp-hero__content {
        align-self: auto;
        padding: 100px 24px 0;
        background: none;
    }

    .lp-hero__media {
        aspect-ratio: 16 / 9;
        align-self: auto;
        margin-bottom: 24px;
    }

    .lp-hero__media::after {
        background: none;
    }

    .lp-hero__eyebrow {
        font-size: 11px;
        letter-spacing: 0.1em;
    }

    .lp-hero__lede,
    .lp-hero__note {
        max-width: none;
    }

    .lp-hero__btns {
        margin-top: 32px;
    }
}

.wai-root .lp-hero-h1 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(32px, 3vw, 52px);
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 48px;
}

.lp-hero-h1__line {
    display: block;
}

.lp-hero-h1__neon {
    color: var(--accent-neon);
    text-shadow: 0 0 38px rgba(108,184,255,0.28), 0 0 78px rgba(108,184,255,0.14);
}

.lp-hero__lede {
    display: block;
    max-width: 520px;
    margin: 0 0 16px;
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--text);
    text-shadow: 0 1px 3px rgba(2,6,12,0.85), 0 0 22px rgba(2,6,12,0.65);
}

.lp-hero__lede strong {
    font-weight: 600;
    color: var(--accent-neon);
    text-shadow: 0 0 26px rgba(108,184,255,0.35);
}

.lp-hero__note {
    display: block;
    position: relative;
    max-width: 480px;
    margin: 0;
    padding-left: 16px;
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 400;
    line-height: 1.7;
    color: rgba(228,240,252,0.74);
    text-shadow: 0 1px 3px rgba(2,6,12,0.8);
}

.lp-hero__note::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--accent-neon), rgba(108,184,255,0));
}

.lp-hero__btns {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: auto;
    margin-bottom: 40px;
}

.wai-root .lp-hero-sub {
    font-size: 18px;
    color: rgba(255,255,255,0.92);
    font-weight: 400;
    max-width: 660px;
    margin: 0 auto 40px;
    line-height: 1.65;
    text-align: center;
    text-shadow: 0 1px 3px rgba(2,6,12,0.9), 0 0 16px rgba(2,6,12,0.8), 0 0 42px rgba(2,6,12,0.6);
}

.lp-btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.lp-btn-primary:hover {
    opacity: 0.88;
}

.lp-btn-secondary {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.13);
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.lp-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
}

/* ── Assurance pills ── */

.lp-pills { background: var(--bg); padding: 0 48px 6px; width: 100%; }

.lp-pills__bar {
    align-items: center;
    background: radial-gradient(ellipse 70% 140% at 50% 50%, rgba(60,132,216,0.07) 0%, transparent 70%);
    border: 1px solid var(--border);
    border-radius: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
    max-width: 1240px;
    padding: 22px 16px;
}

.lp-pills__item { align-items: center; display: flex; gap: 15px; justify-content: center; position: relative; }
.lp-pills__icon { align-items: center; color: var(--mint); display: inline-flex; flex: none; }

.lp-pills__label {
    color: var(--text);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(15px, 1.5vw, 20px);
    font-weight: 500;
    letter-spacing: -0.2px;
    line-height: 1.2;
    white-space: nowrap;
}

.lp-pills__item + .lp-pills__item::before {
    background: var(--border);
    content: '';
    height: 36px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
}

@media (max-width: 900px) {
    .lp-pills { padding: 0 20px 4px; }
    .lp-pills__bar { gap: 24px 0; grid-template-columns: repeat(2, 1fr); padding: 26px 12px; }
    .lp-pills__item:nth-child(odd)::before { display: none; }
}

@media (max-width: 560px) {
    .lp-pills__bar { gap: 20px; grid-template-columns: 1fr; }
    .lp-pills__item { justify-content: flex-start; padding-left: 22px; }
    .lp-pills__item + .lp-pills__item::before { display: none; }
}

/* ── Industries ── */

.lp-industries {
    background: var(--surface);
    padding-top: 96px;
    padding-bottom: 96px;
    overflow: hidden;
    width: 100%;
}

.lp-industries__header {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 48px;
    margin-bottom: 40px;
}

.wai-root .lp-section-h2 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: 400;
    color: var(--text);
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 14px;
}

.lp-section-sub {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.7;
    max-width: 420px;
    margin: 0;
}

.lp-section-sub--mb25 {
    margin-bottom: 25px;
}

.lp-industries__track-wrap {
    position: relative;
    overflow: hidden;
}

.lp-industries__track {
    display: flex;
    gap: 10px;
    padding-left: 48px;
    /* transform and transition are applied inline (state-driven) */
}

.lp-industry-card {
    flex: 0 0 340px;
    height: 520px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* background is per-card (dynamic) */
}

.lp-industry-card__text-area {
    position: relative;
    overflow: hidden;
    padding: 24px 24px 20px;
    flex-shrink: 0;
}

/*
  Blurred header backdrop. Same URL as .lp-industry-card__image, declared as a background so the browser fetches
  the file once instead of twice — the markup used to carry a second, decorative <img> for exactly this.
*/
.lp-industry-card__text-area.has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--lp-card-img);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    transform: scaleY(-1);
    filter: blur(2px) brightness(0.35);
}

/* The card titles are near-white over whatever this image happens to be, and the vertical photography is bright
   daylight — so the scrim has to darken rather than frost. A white wash here put white text on a white sky. */
.lp-industry-card__glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,12,36,0.58) 0%, rgba(0,12,36,0.42) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.lp-industry-card__name {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.3px;
    margin: 0 0 8px;
    position: relative;
    z-index: 1;
}

.lp-industry-card__desc {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    line-height: 1.65;
    max-width: 260px;
    margin: 0;
    position: relative;
    z-index: 1;
}

.lp-industry-card__image {
    flex: 1;
    width: 100%;
    object-fit: cover;
    display: block;
    min-height: 0;
}

.lp-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(12,24,48,0.92);
    border: 1px solid var(--border-strong);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    z-index: 10;
}

.lp-carousel-btn--prev {
    left: 56px;
}

.lp-carousel-btn--next {
    right: 24px;
}

/* ── Architecture / 4Ds ── */

.lp-arch {
    /* background applied inline as a gradient override over s.section */
    padding: 96px 48px;
    width: 100%;
}

.lp-arch__badge {
    display: inline-block;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.lp-arch__header {
    margin-bottom: 60px;
}

.wai-root .lp-arch-h2 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -1px;
    line-height: 1.08;
    margin-bottom: 14px;
}

.lp-arch__sub {
    font-size: 16px;
    color: var(--text-2);
}

.lp-arch__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.lp-arch__visual {
    position: relative;
    height: 420px;
}

/* Layer card: most styles are dynamic (isActive, dist, layer.color, etc.) — kept inline */

.lp-layer-card__left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lp-layer-card__badge {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.35s ease;
}

.lp-layer-card__badge-label {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

.lp-layer-card__name {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    transition: color 0.25s;
}

.lp-layer-card__tagline {
    font-size: 11px;
    font-weight: 600;
    margin: 3px 0 0;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    animation: layerSlideUp 0.3s ease forwards;
}

.lp-layer-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.lp-arch__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lp-arch-list-item {
    padding: 18px 22px;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.2s;
}

.lp-arch-list-item:not(.lp-arch-list-item--active):hover {
    background: var(--border);
}

.lp-arch-list-item--active {
    background: var(--surface);
    border-radius: 0 10px 10px 0;
}

.lp-arch-list-item__title {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    transition: color 0.15s;
}

.lp-arch-list-item__desc {
    font-size: 14px;
    color: var(--text-3);
    margin: 0;
    line-height: 1.5;
}

/* ── Self-serve platform ── */

/* The video is fitted rather than cropped, so it letterboxes on tall viewports. This ground is the video's own
   background put through the same invert, which makes the band edges disappear instead of framing the artwork. */
.lp-platform {
    position: relative;
    overflow: hidden;
    padding: 112px 48px 72px;
    background: #080a0c;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lp-platform__video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* The pipeline animation is drawn light-on-dark — a near-white ground with dark objects — which is the inverse of
   this section. Flipping lightness (and rotating hue back so the greens and blues survive) turns it into a dark
   backdrop with light artwork, so the white copy on top keeps its contrast without burying the animation under a
   near-opaque scrim the way a straight tint would. */
.lp-platform__video {
    border: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: contain;
    filter: invert(1) hue-rotate(180deg) saturate(0.9);
    pointer-events: none;
}

/* Light enough to leave the artwork readable, since the video already carries its own darkness. The radial pass
   keeps the middle — where the headline sits — denser than the edges. */
.lp-platform__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 72% 58% at 50% 40%, rgba(0,12,36,0.62) 0%, rgba(0,12,36,0.38) 55%, rgba(0,12,36,0.22) 100%),
        rgba(0,12,36,0.14);
    z-index: 1;
    pointer-events: none;
}

/* Column flex so the cards and CTA can be pinned to the foot of the section with an auto margin, leaving the
   headline at the top and the video visible in the space that opens up between them. */
.lp-platform__content {
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

.lp-platform__bottom { margin-top: auto; }

.lp-platform__badge {
    display: inline-block;
    align-self: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-2);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    padding: 4px 12px;
    margin-bottom: 24px;
}

.wai-root .lp-platform__h2 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 18px;
}

.lp-platform__h2-dim { color: var(--text-3); }

.lp-platform__sub {
    font-size: 16px;
    color: var(--text-2);
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto 20px;
    text-align: center;
}

/* Three abreast on desktop, stacking to one card per row on phones. Equal columns rather than auto-fit so the
   row never breaks into an orphaned 2 + 1 at intermediate widths. */
.lp-platform__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 250px auto 52px;
    text-align: left;
    max-width: 1080px;
    align-items: stretch;
}

@media (max-width: 860px) {
    .lp-platform { padding: 88px 24px 56px; }
    .lp-platform__grid { grid-template-columns: 1fr; max-width: 460px; gap: 16px; margin-top: 38px; }
}

.lp-platform__card {
    display: flex;
    flex-direction: column;
    background: rgba(24,48,72,0.55);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 26px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.lp-platform__card:hover {
    background: rgba(24,48,72,0.85);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

.lp-platform__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--elevated);
    color: var(--text);
    margin-bottom: 16px;
    flex-shrink: 0;
}

.wai-root .lp-platform__card-title {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.4;
}

.lp-platform__card-desc {
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.7;
    margin: 0;
}

.lp-platform__cta {
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.lp-platform__cta:hover { opacity: 0.82; }

.lp-bridge {
    background: var(--surface);
    text-align: center;
    font-size: clamp(32px, 4vw, 56px);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: -1px;
    padding: 96px 48px;
}

/* ── Team (dark video section) ── */

.lp-team {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-team__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    display: flex;
}

/*
  One video for the whole band. The source is 1454x1080 letterboxed into a 16:9 frame, so its content is
  1454/1920 = 75.72% of the frame width. Blowing the frame up to 100/0.7572 = 132.05vw and centring it puts that
  content edge to edge and pushes both black bars off-screen — which is what the three offset copies of the same
  MP4 used to achieve. The panels below are now overlays only.
*/
.lp-team__video-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 132.05vw;
    height: 74.28vw;
    min-height: 100%;
}

.lp-team__video {
    border: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.lp-team__panel {
    width: 12.14vw;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.lp-team__glass {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(24,48,72,0.45) 0%, rgba(12,24,48,0.30) 50%, rgba(60,132,216,0.12) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
}

.lp-team__seam--right-edge {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    z-index: 2;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.4) 20%, rgba(255,255,255,0.4) 80%, transparent 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.lp-team__seam--left-edge {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    z-index: 2;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.4) 20%, rgba(255,255,255,0.4) 80%, transparent 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.lp-team__outer-fade--left {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to right, rgba(0,12,36,0.88) 0%, rgba(0,12,36,0.12) 60%, transparent 100%);
}

.lp-team__outer-fade--right {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to left, rgba(0,12,36,0.88) 0%, rgba(0,12,36,0.12) 60%, transparent 100%);
}

.lp-team__center {
    flex: 1;
    position: relative;
}

.lp-team__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,12,36,0.35) 0%, rgba(0,12,36,0.55) 100%);
    z-index: 1;
    pointer-events: none;
}

.lp-team__content {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 112px 48px;
}

.wai-root .lp-team-h2 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(28px, 4.5vw, 52px);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -1.5px;
    line-height: 1.08;
    margin-bottom: 28px;
}

.lp-team__sub {
    font-size: 17px;
    color: var(--text-2);
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto;
}

/* ── Use Cases ── */

/* The second light band on the page. Same approach as .lp-problem: redefining the tokens on the section means
   every descendant inherits the light values, and data-nav-theme="light" flips the nav to match. The cards keep
   their photography, so their own copy is pinned to white further down rather than following --text. */
.lp-use-cases {
    --bg: #eef2f7;
    --surface: #ffffff;
    --text: #0b1220;
    --text-2: #46566b;
    --text-3: #8494a8;
    --border: #d3dce6;
    --border-strong: #b7c4d2;
    --accent: #245490;
    --accent-bright: #1d4677;
    background: linear-gradient(180deg, #eef2f7 0%, #ffffff 55%, #eef2f7 100%);
    padding-top: 96px;
    padding-bottom: 96px;
    overflow: hidden;
    width: 100%;
}

.lp-use-cases__header {
    padding: 0 48px;
    margin-bottom: 40px;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 48px;
}

@media (max-width: 900px) {
    .use-cases-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lp-use-card {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* background is per-card (dynamic) */
}

.lp-use-card__icon {
    margin-bottom: 20px;
}

.lp-use-card__name {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
    /* color is dynamic (cs.dark) */
}

.lp-use-card__desc {
    font-size: 14px;
    line-height: 1.65;
    /* color is dynamic (cs.dark) */
}

/* ── Clients ── */

.lp-clients {
    padding: 96px 48px 104px;
    background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
}

.lp-clients__header {
    text-align: center;
    margin-bottom: 48px;
}

.lp-clients__badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 15px;
    margin-bottom: 20px;
}

.lp-clients__header .lp-section-sub {
    max-width: 560px;
    margin: 0 auto;
}

.lp-clients__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.lp-client-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 26px 24px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.lp-client-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: 0 14px 36px rgba(0,0,0,0.45);
}

.lp-client-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.lp-client-card__logo {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    overflow: hidden;
}

.lp-client-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.lp-client-card__sector {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--client-accent, var(--accent-bright));
    line-height: 1.4;
}

.wai-root .lp-client-card__quote {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    line-height: 1.55;
    color: var(--text);
    letter-spacing: -0.3px;
    margin: 0 0 14px;
}

.wai-root .lp-client-card__summary {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.7;
    flex: 1;
    margin: 0 0 24px;
}

.lp-client-card__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.lp-client-card__mark {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--on-accent);
    background: var(--client-accent, var(--accent));
}

.lp-client-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.lp-client-card__name {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text);
}

.lp-client-card__url {
    font-size: 13px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-client-card__arrow {
    flex-shrink: 0;
    color: var(--text-3);
    transition: color 0.15s, transform 0.15s;
}

.lp-client-card:hover .lp-client-card__arrow {
    color: var(--client-accent, var(--accent-bright));
    transform: translate(2px, -2px);
}

.wai-root .lp-clients__more {
    text-align: center;
    font-size: 15px;
    color: var(--text-2);
    margin-top: 36px;
}

.lp-clients__more a {
    color: var(--accent-bright);
    font-weight: 500;
}

.lp-clients__more a:hover { opacity: 0.7; }

@media (max-width: 980px) {
    .lp-clients__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

@media (max-width: 640px) {
    .lp-clients { padding: 64px 24px 72px; }
}

/* ── Observability ── */

@keyframes metalShine {
    0%        { transform: translateX(-100%) skewX(-15deg); }
    60%, 100% { transform: translateX(250%) skewX(-15deg); }
}

.lp-metal-silver {
    background:
        linear-gradient(160deg,
            #0c1830 0%,
            #16283f 8%,
            #1f3852 18%,
            #2b4a68 28%,
            #24405c 36%,
            #16283f 48%,
            #213952 58%,
            #2b4a68 66%,
            #1c3149 76%,
            #0e1c33 88%,
            #1a2f47 100%
        );
    position: relative;
    overflow: hidden;
}

.lp-metal-silver::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(120,168,216,0.0) 30%,
        rgba(120,168,216,0.30) 50%,
        rgba(120,168,216,0.0) 70%,
        transparent 100%
    );
    animation: metalShine 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.lp-metal-silver > * {
    position: relative;
    z-index: 1;
}

.lp-obs {
    /* background: var(--surface) applied inline via s.section */
}

.lp-obs__header {
    text-align: center;
    margin-bottom: 64px;
}

.wai-root .lp-obs-h2 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -1px;
    line-height: 1.08;
    margin-bottom: 16px;
}

.lp-obs__sub {
    font-size: 17px;
    color: var(--text-2);
}

.lp-obs__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 56px;
}

.lp-feature-card {
    background: var(--surface-2);
    border-radius: 16px;
    padding: 36px;
    border: 1px solid var(--border);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.lp-feature-card:hover {
    box-shadow: 0 4px 24px rgba(0,0,0,0.45);
    border-color: var(--border-strong);
}

.lp-feature-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    margin-bottom: 22px;
}

.lp-feature-card__title {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}

.lp-feature-card__desc {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.65;
}


/* ── Problem ── */

/* The one light band on the page. Redefining the tokens on the section itself, rather than rewriting each child
   rule, means every descendant inherits the light values unchanged. data-nav-theme="light" flips the nav to match. */
.lp-problem {
    --bg: #e5ebf2;
    --surface: #f2f5f9;
    --text: #0b1220;
    --text-2: #46566b;
    --text-3: #8494a8;
    --border: #ccd7e3;
    --border-strong: #aebed0;
    --accent: #245490;
    --accent-bright: #1d4677;
    background: linear-gradient(180deg, #f2f5f9 0%, #e5ebf2 100%);
}
.lp-problem__eyebrow { color: var(--accent-bright); display: block; font-size: 11px; font-weight: 600; letter-spacing: 2px; margin-bottom: 18px; text-transform: uppercase; }
.wai-root .lp-problem__h2 { margin-bottom: 44px; max-width: 18ch; }
.lp-problem__list { list-style: none; margin: 0 0 34px; padding: 0; }
.lp-problem__item {
    align-items: flex-start;
    border-top: 1px solid var(--border);
    color: var(--text-2);
    display: flex;
    font-size: clamp(17px, 2vw, 21px);
    gap: 16px;
    line-height: 1.45;
    padding: 20px 0;
}

/* Unticked on purpose: these are the chores nobody has done, so an empty box carries the copy better than
   a bullet would. Margin is em-derived so the box stays on the first line as the clamped size changes. */
.lp-problem__item::before {
    border: 1.5px solid var(--text-3);
    border-radius: 4px;
    content: '';
    flex: none;
    height: 18px;
    margin-top: calc(0.725em - 9px);
    width: 18px;
}

.lp-problem__item:last-child { border-bottom: 1px solid var(--border); }

.lp-problem__verdict {
    color: var(--text);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(19px, 2.4vw, 27px);
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 1.35;
    margin: 0 0 60px;
    max-width: 32ch;
}

.lp-problem__turn { border-left: 2px solid var(--accent); color: var(--text-2); font-size: 16px; line-height: 1.75; margin: 0; max-width: 62ch; padding-left: 24px; }
.lp-problem__turn-lead { color: var(--text); font-weight: 500; }

@media (max-width: 640px) {
    .lp-problem__item { gap: 13px; padding: 16px 0; }
    .lp-problem__verdict { margin-bottom: 44px; }
    .lp-problem__turn { padding-left: 18px; }
}

/* ── Simplicity / Flow diagram ── */

.lp-flow {
    background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
}

.lp-flow__header {
    text-align: center;
    margin-bottom: 56px;
}

.lp-flow__diagram {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
}

.lp-flow__step-wrap {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
}

.lp-flow__step {
    flex: 1 1 0;
    min-width: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px 24px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lp-flow__step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.lp-flow__step-title {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.4px;
    margin: 0 0 6px;
}

.lp-flow__step-desc {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0 0 22px;
}

.lp-flow__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.lp-flow__chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 8px;
    border-radius: 12px;
    background: var(--elevated);
    border: 1px solid var(--border);
}

.lp-flow__media {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-flow__media-img {
    width: 100%;
    max-width: 160px;
    height: auto;
    object-fit: contain;
}

.lp-flow__chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    color: var(--accent-bright);
    flex-shrink: 0;
}

.lp-flow__chip-label {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
}

.lp-flow__arrow {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    padding: 0 4px;
}

.lp-flow__arrow svg {
    width: 40px;
    height: 22px;
}

.lp-flow__arrow--spacer {
    visibility: hidden;
}

@media (max-width: 900px) {
    .lp-flow__diagram {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .lp-flow__step-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .lp-flow__arrow {
        flex: 0 0 auto;
        padding: 14px 0;
        transform: rotate(90deg);
    }

    .lp-flow__arrow--spacer {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Server-rendered additions.

   Everything below replaces a style React used to compute inline (state-driven
   props, per-index arrays). The resting state is the server-rendered HTML;
   landing.js only toggles classes and two custom properties on top of it.
   ══════════════════════════════════════════════════════════════════════════ */

/* Industries carousel. Was an inline transform + transition driven by React state;
   landing.js now only writes --lp-offset (the card index). */
.lp-industries__track {
    transform: translateX(calc(var(--lp-offset, 0) * -350px));
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* React mounted/unmounted the arrows; both are always in the DOM now and toggled with [hidden]. */
.lp-carousel-btn[hidden] {
    display: none;
}

/* ── 4Ds layer cards ──
   --layer-index positions the card in the stack, --layer-color / --layer-accent carry the
   per-layer palette, and .is-active swaps to the raised white treatment. */
.lp-layer-card {
    position: absolute;
    top: calc(var(--layer-index) * 62px);
    left: calc(var(--layer-index) * 20px);
    right: calc(var(--layer-index) * -3px);
    height: 76px;
    background: var(--layer-accent);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 0 20px 0 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 6px var(--border);
    transition: all 0.42s cubic-bezier(0.34, 1.45, 0.64, 1);
    z-index: calc(5 - var(--layer-index));
}

.lp-layer-card.is-active {
    background: var(--surface);
    border: 1.5px solid color-mix(in srgb, var(--layer-color) 21%, transparent);
    border-left: 4px solid var(--layer-color);
    box-shadow: 0 20px 56px color-mix(in srgb, var(--layer-color) 16%, transparent), 0 6px 16px var(--border);
    transform: translateY(-14px) translateX(-4px) scale(1.025);
    z-index: 10;
}

.lp-layer-card__badge { background: var(--border); }
.lp-layer-card.is-active .lp-layer-card__badge { background: color-mix(in srgb, var(--layer-color) 8%, transparent); animation: badgeReveal 0.35s cubic-bezier(0.34,1.5,0.64,1) forwards; }
.lp-layer-card__badge-label { color: var(--text-3); }
.lp-layer-card.is-active .lp-layer-card__badge-label { color: var(--layer-color); }
.lp-layer-card__name { color: var(--text-2); }
.lp-layer-card.is-active .lp-layer-card__name { color: var(--text); }
.lp-layer-card__tagline { color: var(--layer-color); display: none; }
.lp-layer-card.is-active .lp-layer-card__tagline { display: block; }
.lp-layer-card__dot { background: var(--border); }
.lp-layer-card.is-active .lp-layer-card__dot { background: var(--layer-color); animation: dotPulse 1.8s ease-in-out infinite; }

/* Was an inline borderLeft toggled on activeLayer. */
.lp-arch-list-item { border-left: 3px solid transparent; }
.lp-arch-list-item--active { border-left-color: var(--accent); }

/* ── Use-case cards ──
   Per-index background stays inline in the view (static data); only the light/dark text
   treatment is class-driven. The icon inherits `color`, which is how <use> picks it up. */
.lp-use-card__icon { color: var(--text); }
.lp-use-card__name { color: var(--text); }
.lp-use-card__desc { color: var(--text-2); }
.lp-use-card.is-dark .lp-use-card__icon { color: rgba(255,255,255,0.85); }
.lp-use-card.is-dark .lp-use-card__name { color: var(--text); }
.lp-use-card.is-dark .lp-use-card__desc { color: rgba(255,255,255,0.55); }

/* Flow chip marks: brand symbols carry their own fill, capability marks follow currentColor. */
.lp-flow__chip-icon { display: inline-flex; color: var(--text); }
.lp-flow__chip-icon img { object-fit: contain; }
.lp-flow__chip-emoji { font-size: 26px; line-height: 1; }

/* ── FAQ ──
   <details>/<summary> rather than a JS accordion: the answers are in the DOM for a crawler and readable with
   scripting off, which is the same contract the rest of these pages keep. The name attribute gives a JS-less
   visitor a one-at-a-time accordion from the browser; landing.js drops it and takes over both the exclusivity
   and the height animation, because native exclusivity closes the outgoing row too abruptly to animate. */

.lp-faq { background: var(--bg); }
.wai-root .lp-faq__h2 { margin-bottom: 44px; }
.lp-faq__list { border-top: 1px solid var(--border); }
.lp-faq__item { border-bottom: 1px solid var(--border); }

.lp-faq__q {
    align-items: center;
    color: var(--text);
    cursor: pointer;
    display: flex;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(16px, 1.7vw, 19px);
    font-weight: 500;
    gap: 24px;
    justify-content: space-between;
    letter-spacing: -0.2px;
    line-height: 1.4;
    list-style: none;
    padding: 26px 0;
    transition: color 0.18s ease;
}

.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__q:hover { color: var(--accent-bright); }

.lp-faq__q::after {
    background: linear-gradient(var(--text-3), var(--text-3)) center / 100% 1.5px no-repeat, linear-gradient(var(--text-3), var(--text-3)) center / 1.5px 100% no-repeat;
    content: '';
    flex: none;
    height: 15px;
    transition: transform 0.25s ease;
    width: 15px;
}

.lp-faq__item[open] .lp-faq__q { color: var(--accent-bright); }
.lp-faq__item[open] .lp-faq__q::after { transform: rotate(135deg); }

/* landing.js holds [open] on for the whole collapse so the answer does not blank out mid-animation; this pair
   returns the heading and marker to their resting look as soon as the row starts closing. */
.lp-faq__item.is-closing .lp-faq__q { color: var(--text); }
.lp-faq__item.is-closing .lp-faq__q::after { transform: none; }

@keyframes lpFaqReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.lp-faq__item[open] .lp-faq__a { animation: lpFaqReveal 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
.lp-faq__item.is-closing .lp-faq__a { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .lp-faq__q::after { transition: none; }
    .lp-faq__item[open] .lp-faq__a { animation: none; }
}

.wai-root .lp-faq__a {
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    max-width: 78ch;
    padding: 0 48px 30px 0;
}

@media (max-width: 640px) {
    .lp-faq__q { gap: 18px; padding: 22px 0; }
    .wai-root .lp-faq__a { font-size: 15px; padding: 0 0 24px; }
}

/* ── Ledger ── */

.bl-ledger-section { background: var(--surface); }
.bl-ledger__header { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.bl-ledger { max-width: 900px; margin: 0 auto; }
.bl-ledger__heads { display: grid; gap: 0 22px; grid-template-columns: minmax(0, 0.85fr) 112px minmax(0, 1.2fr); padding: 0 18px 12px; }
.bl-ledger__head { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; display: flex; align-items: center; }
.bl-ledger__head--record { color: var(--record); justify-content: flex-end; }
.bl-ledger__head--pub { color: var(--pub); grid-column: 3; }
.bl-ledger__rows { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; list-style: none; margin: 0; padding: 6px; }
.bl-ledger__row { align-items: center; border-radius: 10px; display: grid; gap: 0 22px; grid-template-columns: minmax(0, 0.85fr) 112px minmax(0, 1.2fr); padding: 16px 14px; transition: background 0.2s ease; }
.bl-ledger__row:hover, .bl-ledger__row.is-on { background: var(--elevated); }
.bl-ledger__row:focus-visible { outline: 2px solid var(--pub-mark); outline-offset: 2px; }
.bl-ledger__field { align-items: baseline; display: grid; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; gap: 4px 18px; grid-template-columns: minmax(0, 1fr) auto; }
.bl-ledger__key { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-ledger__val { color: var(--record); font-weight: 500; text-align: right; }
.bl-ledger__pub { font-size: 15px; line-height: 1.45; color: var(--text-2); transition: color 0.2s ease; }
.bl-ledger__row.is-on .bl-ledger__pub { color: var(--pub); }
.bl-ledger__wire { align-items: center; display: flex; opacity: 0.6; transition: opacity 0.2s ease; }
.bl-ledger__row.is-on .bl-ledger__wire { opacity: 1; }
.bl-ledger__node { background: var(--record-mark); flex: none; height: 6px; transform: rotate(45deg); width: 6px; }
.bl-ledger__node--end { background: var(--pub-mark); }
.bl-ledger__line { background: linear-gradient(90deg, var(--record-mark), var(--pub-mark)); flex: 1; height: 1px; }

@media (max-width: 760px) {
    .bl-ledger__heads { display: none; }
    .bl-ledger__row { gap: 10px; grid-template-columns: minmax(0, 1fr); padding: 16px 12px; }
    .bl-ledger__field { font-size: 12px; gap: 4px 12px; }
    .bl-ledger__key { overflow: visible; text-overflow: clip; white-space: normal; }
    .bl-ledger__wire { display: none; }
    .bl-ledger__pub { border-left: 2px solid var(--pub-mark); padding-left: 12px; }
}

/* site.css resets .wai-root h1..h5 at (0,1,1); these heading classes are declared bare at (0,1,0) and lose
   font-size/font-weight to it. Re-declaring them under .wai-root restores the intended scale. */
.wai-root .lp-flow__step-title { font-size: 20px; font-weight: 500; letter-spacing: -0.4px; }
.wai-root .lp-industry-card__name { font-size: 18px; font-weight: 500; letter-spacing: -0.3px; }
.wai-root .lp-arch-list-item__title { font-size: 15px; font-weight: 600; }
.wai-root .lp-use-card__name { font-size: 18px; font-weight: 500; letter-spacing: -0.3px; }
.wai-root .lp-feature-card__title { font-size: 17px; font-weight: 600; margin-bottom: 10px; }

/* ── Problem section reveal ──
   Plays once the band scrolls into view and replays if it is scrolled fully past and back. Everything is gated
   behind .js so a visitor without scripts gets the finished state, and each element carries its own
   --reveal-step so the whole stagger is one delay expression rather than a rule per child. */

@keyframes lpProblemRise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

@keyframes lpProblemSweep {
    from       { transform: scaleX(0); opacity: 1; }
    55%        { opacity: 1; }
    to         { transform: scaleX(1); opacity: 0; }
}

@keyframes lpProblemBox {
    from { opacity: 0; transform: scale(0.2) rotate(-25deg); }
    to   { opacity: 1; transform: none; }
}

@keyframes lpProblemBar {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

.js .lp-problem .lp-reveal { opacity: 0; }
.js .lp-problem.is-in-view .lp-reveal { animation: lpProblemRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--reveal-step, 0) * 95ms); }

.js .lp-problem .lp-problem__item { position: relative; }

/* An accent rule wipes across the top of each chore, then fades out and leaves the static border underneath. */
.js .lp-problem .lp-problem__item::after {
    background: var(--accent);
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: -1px;
    transform: scaleX(0);
    transform-origin: left;
}
.js .lp-problem.is-in-view .lp-problem__item::after { animation: lpProblemSweep 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--reveal-step, 0) * 95ms); }

.js .lp-problem .lp-problem__item::before { opacity: 0; }
.js .lp-problem.is-in-view .lp-problem__item::before { animation: lpProblemBox 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--reveal-step, 0) * 95ms + 150ms); }

/* The quote bar is drawn top-down instead of appearing whole. The real border keeps its 2px of layout and the
   pseudo sits over it, so nothing shifts when the animation lands. */
.js .lp-problem .lp-problem__turn { border-left-color: transparent; position: relative; }
.js .lp-problem .lp-problem__turn::before {
    background: var(--accent);
    bottom: 0;
    content: '';
    left: -2px;
    position: absolute;
    top: 0;
    transform: scaleY(0);
    transform-origin: top;
    width: 2px;
}
.js .lp-problem.is-in-view .lp-problem__turn::before { animation: lpProblemBar 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--reveal-step, 0) * 95ms + 120ms); }

@media (prefers-reduced-motion: reduce) {
    .js .lp-problem .lp-reveal,
    .js .lp-problem .lp-problem__item::before,
    .js .lp-problem .lp-problem__item::after,
    .js .lp-problem .lp-problem__turn::before { animation: none; opacity: 1; transform: none; }
    .js .lp-problem .lp-problem__item::after { display: none; }
    .js .lp-problem .lp-problem__turn::before { transform: scaleY(1); }
}

/* ── Use-case cards with photography ──
   The photo fills the card and a scrim carries it down to the brand navy so the copy keeps its contrast no
   matter what the frame is doing underneath. */

.lp-use-card { position: relative; }
.lp-use-card.has-photo { justify-content: flex-end; }

.lp-use-card__photo {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    transform: scale(1.02);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
    z-index: 0;
}

.lp-use-card.has-photo:hover .lp-use-card__photo { transform: scale(1.09); }

.lp-use-card__scrim {
    background: linear-gradient(180deg, rgba(0,12,36,0.10) 0%, rgba(0,12,36,0.42) 40%, rgba(0,12,36,0.88) 100%);
    inset: 0;
    position: absolute;
    z-index: 1;
}

.lp-use-card__body { position: relative; z-index: 2; }
.lp-use-card.has-photo .lp-use-card__icon { margin-bottom: 14px; }

/* The band around these cards is light but the photography is not, so the card's own copy is pinned to white
   instead of inheriting --text, which the section redefines to near-black. */
.lp-use-card.has-photo .lp-use-card__icon,
.lp-use-card.has-photo .lp-use-card__name { color: #ffffff; }
.lp-use-card.has-photo .lp-use-card__desc { color: rgba(255,255,255,0.78); }

/* A soft drop shadow keeps the dark tiles from looking pasted onto the light ground. */
.lp-use-card.has-photo {
    box-shadow: 0 10px 30px rgba(11,18,32,0.16), 0 2px 6px rgba(11,18,32,0.10);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.lp-use-card.has-photo:hover {
    box-shadow: 0 18px 44px rgba(11,18,32,0.22), 0 3px 10px rgba(11,18,32,0.12);
    transform: translateY(-3px);
}

@media (max-width: 640px) {
    .lp-use-cases__header, .use-cases-grid { padding: 0 24px; }
    .use-cases-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
    .use-cases-grid { grid-template-columns: 1fr; }
}

/* ── Tinted feature cards ──
   Each card carries a gradient chosen for what it claims, plus an --feature-accent used for the icon, the glow,
   and the hover border. Children are lifted above the glow with their own stacking context. */

.lp-feature-card.is-tinted {
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 12px 34px rgba(0,0,0,0.34);
    overflow: hidden;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.lp-feature-card.is-tinted::after {
    background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--feature-accent) 26%, transparent) 0%, transparent 62%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.lp-feature-card.is-tinted > * { position: relative; z-index: 1; }
.lp-feature-card.is-tinted .lp-feature-card__icon { background: rgba(255,255,255,0.14); color: var(--feature-accent); }
.wai-root .lp-feature-card.is-tinted .lp-feature-card__title { color: #ffffff; letter-spacing: -0.2px; }
.lp-feature-card.is-tinted .lp-feature-card__desc { color: rgba(255,255,255,0.76); }

.lp-feature-card.is-tinted:hover {
    border-color: color-mix(in srgb, var(--feature-accent) 45%, transparent);
    box-shadow: 0 22px 52px rgba(0,0,0,0.46);
    transform: translateY(-4px);
}

@media (max-width: 860px) {
    .lp-obs__grid { grid-template-columns: 1fr; }
    .lp-arch__grid { gap: 40px; grid-template-columns: 1fr; }
    .lp-arch__visual { height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-feature-card.is-tinted:hover { transform: none; }
    .lp-use-card.has-photo:hover .lp-use-card__photo { transform: scale(1.02); }
    .lp-use-card.has-photo:hover { transform: none; }
}