/* =====================================================================
   Newsletter Landing 2026 — page-specific styles
   ---------------------------------------------------------------------
   Page-only structural rules. All primitive tokens live in
   landing-2026-v5.css :root — do not redefine here.
   Page wrapper: .lp26-page--tep-newsletter
   ===================================================================== */

/* ---------------------------------------------------------------------
   §1 Hero
   --------------------------------------------------------------------- */
.lp26-page--tep-newsletter .lp26-tep-hero {
    background-image: linear-gradient(
        179.02deg,
        var(--rg-white) 64.562%,
        var(--rg-accent-3) 98.026%
    );
    padding: 108px var(--rg-space-8);
}

.lp26-page--tep-newsletter .lp26-tep-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rg-space-6);
    width: 600px;
    max-width: 100%;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------
   Badges (light = §1 hero, solid = §6 dark CTA)
   --------------------------------------------------------------------- */
.lp26-page--tep-newsletter .lp26-tep-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--rg-space-1) var(--rg-space-3);
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-medium);
    font-size: var(--rg-fs-b2);
    line-height: var(--rg-lh-b2);
    letter-spacing: var(--rg-ls-body);
    border-radius: var(--rg-radius-full);
    white-space: nowrap;
}

.lp26-page--tep-newsletter .lp26-tep-badge--light {
    background: var(--rg-white);
    border: 1px solid var(--rg-neutral-5);
    color: var(--rg-accent-11);
}

.lp26-page--tep-newsletter .lp26-tep-badge--solid {
    background: var(--rg-accent-9);
    color: var(--rg-accent-contrast);
}

/* ---------------------------------------------------------------------
   §1 hero copy
   --------------------------------------------------------------------- */
.lp26-page--tep-newsletter .lp26-tep-hero__copy {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-5);
    width: 100%;
    text-align: center;
}

.lp26-page--tep-newsletter .lp26-tep-hero__headline {
    margin: 0;
    font-family: var(--rg-font-heading);
    font-weight: var(--rg-fw-medium);
    font-size: var(--rg-fs-display);
    line-height: var(--rg-lh-display);
    letter-spacing: var(--rg-ls-display);
    color: var(--rg-accent-12);
}

.lp26-page--tep-newsletter .lp26-tep-hero__headline em {
    font-style: italic;
    color: var(--rg-accent-9);
    font-weight: inherit;
}

.lp26-page--tep-newsletter .lp26-tep-hero__subhead {
    margin: 0;
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-medium);
    font-size: var(--rg-fs-b1);
    line-height: var(--rg-lh-b1);
    letter-spacing: var(--rg-ls-body);
    color: var(--rg-neutral-11);
}

/* ---------------------------------------------------------------------
   Subscribe form (shared by §1 hero + §6 bottom CTA)
   --------------------------------------------------------------------- */
.lp26-page--tep-newsletter .lp26-tep-form {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-4);
    width: 400px;
    max-width: 100%;
    margin: 0;
}

.lp26-page--tep-newsletter .lp26-tep-form__field {
    display: block;
    width: 100%;
    margin: 0;
}

.lp26-page--tep-newsletter .lp26-tep-form__field .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lp26-page--tep-newsletter .lp26-tep-form__input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 var(--rg-space-3);
    background: var(--rg-color-surface);
    border: 1px solid var(--rg-color-input-border);
    border-radius: var(--rg-radius-3);
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-regular);
    font-size: var(--rg-fs-b1);
    line-height: var(--rg-lh-b1);
    letter-spacing: var(--rg-ls-body);
    color: var(--rg-neutral-12);
    box-sizing: border-box;
}

.lp26-page--tep-newsletter .lp26-tep-form__input::placeholder {
    color: var(--rg-color-placeholder);
}

.lp26-page--tep-newsletter .lp26-tep-form__input:focus {
    outline: none;
    border-color: var(--rg-accent-9);
}

.lp26-page--tep-newsletter .lp26-tep-form__btn,
.lp26-page--tep-newsletter a.lp26-tep-form__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rg-space-3);
    width: 100%;
    height: 40px;
    padding: 0 var(--rg-space-4);
    background: var(--rg-accent-9);
    border: 0;
    border-radius: var(--rg-radius-2);
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-medium);
    font-size: var(--rg-fs-b1);
    line-height: var(--rg-lh-b1);
    letter-spacing: var(--rg-ls-body);
    color: var(--rg-accent-contrast);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.lp26-page--tep-newsletter .lp26-tep-form__btn:hover,
.lp26-page--tep-newsletter a.lp26-tep-form__btn:hover {
    background: var(--rg-accent-10);
}

/* ---------------------------------------------------------------------
   §3 "Once Every 2 Weeks, RG Edge Brings You" — 4 cards
   --------------------------------------------------------------------- */
.lp26-page--tep-newsletter .lp26-tep-cards {
    background: var(--rg-olive-1);
    padding: var(--rg-space-9) var(--rg-space-8);
}

.lp26-page--tep-newsletter .lp26-tep-cards__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rg-space-8);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.lp26-page--tep-newsletter .lp26-tep-cards__heading {
    margin: 0;
    width: 100%;
    font-family: var(--rg-font-heading);
    font-weight: var(--rg-fw-semibold);
    font-style: normal;
    font-size: var(--rg-fs-h3-lg);
    line-height: var(--rg-lh-h3-lg);
    color: var(--rg-accent-12);
}

.lp26-page--tep-newsletter .lp26-tep-cards__heading em {
    font-style: italic;
    font-weight: inherit;
    color: var(--rg-accent-9);
}

.lp26-page--tep-newsletter .lp26-tep-cards__row {
    display: flex;
    align-items: stretch;
    gap: var(--rg-space-2);
    width: 100%;
}

.lp26-page--tep-newsletter .lp26-tep-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--rg-space-5);
    background: var(--rg-olive-1);
    border: 1px solid var(--rg-olive-5);
    height: 360px;
    box-sizing: border-box;
}

.lp26-page--tep-newsletter .lp26-tep-card__icon {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon fills the 140×140 cell while preserving aspect ratio. */
.lp26-page--tep-newsletter img.lp26-tep-card__icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lp26-page--tep-newsletter .lp26-tep-card__copy {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-4);
    width: 100%;
}

.lp26-page--tep-newsletter .lp26-tep-card__title {
    margin: 0;
    font-family: var(--rg-font-heading);
    font-weight: var(--rg-fw-semibold);
    font-style: italic;
    font-size: var(--rg-fs-h4);
    line-height: var(--rg-lh-h4);
    color: var(--rg-accent-9);
}

.lp26-page--tep-newsletter .lp26-tep-card__body {
    margin: 0;
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-regular);
    font-size: var(--rg-fs-b1);
    line-height: var(--rg-lh-b1);
    letter-spacing: var(--rg-ls-body);
    color: var(--rg-neutral-11);
}

/* ---------------------------------------------------------------------
   §4 Featured Posts
   --------------------------------------------------------------------- */
.lp26-page--tep-newsletter .lp26-tep-featured {
    background: var(--rg-olive-2);
    padding: 100px var(--rg-space-8);
}

.lp26-page--tep-newsletter .lp26-tep-featured__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rg-space-8);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.lp26-page--tep-newsletter .lp26-tep-featured__heading {
    margin: 0;
    width: 100%;
    font-family: var(--rg-font-heading);
    font-weight: var(--rg-fw-semibold);
    font-size: var(--rg-fs-h3-lg);
    line-height: var(--rg-lh-h3-lg);
    color: var(--rg-accent-12);
}

.lp26-page--tep-newsletter .lp26-tep-featured__heading em {
    font-style: italic;
    font-weight: inherit;
    color: var(--rg-accent-9);
}

.lp26-page--tep-newsletter .lp26-tep-featured__card {
    display: flex;
    align-items: stretch;
    gap: var(--rg-space-5);
    padding: var(--rg-space-4);
    background: var(--rg-white);
    width: 100%;
    box-sizing: border-box;
}

.lp26-page--tep-newsletter .lp26-tep-featured__cover-wrap {
    display: block;
    flex: 0 0 480px;
    height: 270px;
    line-height: 0;
    border: 1px solid var(--rg-neutral-1, #fcfcfd);
    overflow: hidden;
    text-decoration: none;
    box-sizing: border-box;
}

.lp26-page--tep-newsletter img.lp26-tep-featured__cover {
    display: block;
    width: 480px;
    height: 270px;
    object-fit: cover;
}

.lp26-page--tep-newsletter .lp26-tep-featured__excerpt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 270px;
    padding: var(--rg-space-4) var(--rg-space-4) 0;
    box-sizing: border-box;
}

.lp26-page--tep-newsletter .lp26-tep-featured__excerpt-top {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-4);
    width: 100%;
}

.lp26-page--tep-newsletter .lp26-tep-featured__date {
    display: inline-flex;
    align-items: center;
    gap: var(--rg-space-1);
    margin: 0;
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-medium);
    font-size: var(--rg-fs-b2);
    line-height: var(--rg-lh-b2);
    letter-spacing: var(--rg-ls-body);
    color: var(--rg-neutral-11);
}

.lp26-page--tep-newsletter .lp26-tep-featured__date-icon {
    font-size: 16px;
    line-height: 1;
    color: var(--rg-neutral-11);
    /* Material Symbols base settings */
    font-variation-settings: 'opsz' 20, 'wght' 400, 'GRAD' 0, 'FILL' 0;
}

.lp26-page--tep-newsletter .lp26-tep-featured__title {
    margin: 0;
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-semibold);
    font-size: var(--rg-fs-h3-lg);
    line-height: var(--rg-lh-h3-lg);
    color: var(--rg-neutral-12);
}

.lp26-page--tep-newsletter .lp26-tep-featured__lede {
    margin: 0;
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-regular);
    font-size: var(--rg-fs-b1);
    line-height: var(--rg-lh-b2); /* 20px per Figma — tighter than default 24 */
    letter-spacing: var(--rg-ls-ui);
    color: var(--rg-neutral-11);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 40px;
}

.lp26-page--tep-newsletter .lp26-tep-featured__byline {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.lp26-page--tep-newsletter .lp26-tep-featured__author {
    margin: 0;
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-semibold);
    font-size: var(--rg-fs-b1);
    line-height: var(--rg-lh-b1);
    letter-spacing: var(--rg-ls-body);
    color: var(--rg-neutral-12);
}

.lp26-page--tep-newsletter .lp26-tep-featured__role {
    margin: 0;
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-medium);
    font-size: var(--rg-fs-b1);
    line-height: var(--rg-lh-b1);
    letter-spacing: var(--rg-ls-body);
    color: var(--rg-neutral-11);
}

/* ---------------------------------------------------------------------
   §5 Editorial quote
   --------------------------------------------------------------------- */
.lp26-page--tep-newsletter .lp26-tep-quote {
    background: var(--rg-olive-2);
    padding: 100px var(--rg-space-5);
}

.lp26-page--tep-newsletter .lp26-tep-quote__inner {
    display: flex;
    align-items: center;
    gap: var(--rg-space-9);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.lp26-page--tep-newsletter .lp26-tep-quote__portrait {
    position: relative;
    flex: 0 0 350px;
    width: 350px;
    height: 350px;
    overflow: hidden;
}

.lp26-page--tep-newsletter img.lp26-tep-quote__portrait-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.lp26-page--tep-newsletter .lp26-tep-quote__portrait-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    pointer-events: none;
    background-image: linear-gradient(
        180deg,
        rgba(248, 250, 248, 0) 0%,
        rgba(248, 250, 248, 0) 73.293%,
        var(--rg-olive-2) 100%
    );
}

.lp26-page--tep-newsletter .lp26-tep-quote__copy {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-6);
}

.lp26-page--tep-newsletter img.lp26-tep-quote__mark {
    display: block;
    width: 36px;
    height: 30px;
}

.lp26-page--tep-newsletter .lp26-tep-quote__lead {
    margin: 0;
    font-family: var(--rg-font-heading);
    font-weight: var(--rg-fw-medium);
    font-style: italic;
    font-size: var(--rg-fs-h3-lg);
    line-height: var(--rg-lh-h3-lg);
    color: var(--rg-accent-9);
}

.lp26-page--tep-newsletter .lp26-tep-quote__body {
    display: flex;
    flex-direction: column;
    /* 48px between paragraphs matches Figma's `text<br><br>` rhythm
       (2 × 24px line-height = 48px visual gap). */
    gap: var(--rg-space-8);
}

.lp26-page--tep-newsletter .lp26-tep-quote__body p {
    margin: 0;
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-medium);
    font-size: var(--rg-fs-h5);
    line-height: var(--rg-lh-h5);
    color: var(--rg-neutral-12);
}

.lp26-page--tep-newsletter .lp26-tep-quote__attribution {
    margin: 0;
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-medium);
    font-size: var(--rg-fs-b1);
    line-height: var(--rg-lh-b1);
    letter-spacing: var(--rg-ls-body);
    color: var(--rg-neutral-11);
}

/* ---------------------------------------------------------------------
   §6 Bottom CTA hero (dark band)
   --------------------------------------------------------------------- */
.lp26-page--tep-newsletter .lp26-tep-cta {
    background: var(--rg-accent-12);
    padding: 80px var(--rg-space-8);
}

.lp26-page--tep-newsletter .lp26-tep-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rg-space-6);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.lp26-page--tep-newsletter .lp26-tep-cta__headline {
    margin: 0;
    width: 100%;
    text-align: center;
    font-family: var(--rg-font-heading);
    font-weight: var(--rg-fw-regular);
    font-size: var(--rg-fs-h2);
    line-height: var(--rg-lh-h2);
    color: var(--rg-white);
}

.lp26-page--tep-newsletter .lp26-tep-cta__headline em {
    font-style: italic;
    font-weight: inherit;
    color: var(--rg-accent-8);
}

/* ---------------------------------------------------------------------
   Mobile (≤768px)
   --------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* §1 Hero */
    .lp26-page--tep-newsletter .lp26-tep-hero {
        padding: 80px var(--rg-space-4);
    }

    .lp26-page--tep-newsletter .lp26-tep-hero__inner {
        width: 100%;
        gap: var(--rg-space-5); /* 24 */
    }

    /* Mobile H1 — Figma: Playfair SemiBold 36/38, letter-spacing 0 */
    .lp26-page--tep-newsletter .lp26-tep-hero__headline {
        font-weight: var(--rg-fw-semibold);
        font-size: var(--rg-fs-mobile-h1-sb);
        line-height: var(--rg-lh-mobile-h1-sb);
        letter-spacing: 0;
    }

    .lp26-page--tep-newsletter .lp26-tep-form {
        width: 100%;
    }

    /* §3 Cards */
    .lp26-page--tep-newsletter .lp26-tep-cards {
        padding: var(--rg-space-9) var(--rg-space-4);
    }

    /* Mobile H3 — Figma: Playfair SemiBold 28/30 */
    .lp26-page--tep-newsletter .lp26-tep-cards__heading {
        font-size: var(--rg-fs-mobile-h3-sb);
        line-height: var(--rg-lh-mobile-h3-sb);
    }

    /* On mobile only "RG Edge" is italic; "Every 2 Weeks," renders regular black */
    .lp26-page--tep-newsletter .lp26-tep-cards__heading em:first-of-type {
        font-style: normal;
        color: var(--rg-accent-12);
    }

    .lp26-page--tep-newsletter .lp26-tep-cards__row {
        flex-direction: column;
        gap: var(--rg-space-2);
    }

    .lp26-page--tep-newsletter .lp26-tep-card {
        width: 100%;
        height: auto;
        padding: var(--rg-space-4);
        gap: var(--rg-space-8); /* 48 — Figma flex-col gap between icon and copy */
    }

    .lp26-page--tep-newsletter .lp26-tep-card__icon {
        width: 100px;
        height: 100px;
    }

    /* Card-1 hardcodes 3× <br> to force 4 lines on desktop (so card titles
       align under space-between). On mobile cards are full width and Figma
       renders that body as natural-wrap — hide the forced breaks. */
    .lp26-page--tep-newsletter .lp26-tep-break-desktop {
        display: none;
    }

    /* §4 Featured Posts */
    .lp26-page--tep-newsletter .lp26-tep-featured {
        padding: var(--rg-space-9) var(--rg-space-4);
    }

    .lp26-page--tep-newsletter .lp26-tep-featured__heading {
        font-size: var(--rg-fs-mobile-h2);
        line-height: var(--rg-lh-mobile-h2);
    }

    .lp26-page--tep-newsletter .lp26-tep-featured__card {
        flex-direction: column;
        gap: var(--rg-space-5); /* 24 — Figma column gap */
        padding: var(--rg-space-1);
    }

    .lp26-page--tep-newsletter .lp26-tep-featured__cover-wrap {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 480 / 270;
    }

    .lp26-page--tep-newsletter img.lp26-tep-featured__cover {
        width: 100%;
        height: 100%;
        aspect-ratio: 480 / 270;
    }

    .lp26-page--tep-newsletter .lp26-tep-featured__excerpt {
        height: auto;
        padding: 0 var(--rg-space-3) var(--rg-space-3); /* + 12px bottom per Figma */
    }

    /* Mobile featured-post title — Figma: DM Sans SemiBold 28/30 */
    .lp26-page--tep-newsletter .lp26-tep-featured__title {
        font-size: var(--rg-fs-mobile-h3-sb);
        line-height: var(--rg-lh-mobile-h3-sb);
    }

    /* §5 Quote */
    .lp26-page--tep-newsletter .lp26-tep-quote {
        padding: var(--rg-space-8) var(--rg-space-6);
    }

    .lp26-page--tep-newsletter .lp26-tep-quote__inner {
        flex-direction: column;
        gap: var(--rg-space-6); /* 32 */
        align-items: center;
    }

    .lp26-page--tep-newsletter .lp26-tep-quote__portrait {
        flex: 0 0 200px;
        width: 200px;
        height: 200px;
    }

    .lp26-page--tep-newsletter .lp26-tep-quote__copy {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    /* Mobile quote lead — Figma: Playfair Medium Italic 28/30 */
    .lp26-page--tep-newsletter .lp26-tep-quote__lead {
        font-size: var(--rg-fs-mobile-h3-sb);
        line-height: var(--rg-lh-mobile-h3-sb);
    }

    /* Mobile quote body paragraphs — Figma swaps text color from neutral-12
       (desktop) to accent-12 (mobile). */
    .lp26-page--tep-newsletter .lp26-tep-quote__body p {
        color: var(--rg-accent-12);
    }

    /* §6 Bottom CTA */
    .lp26-page--tep-newsletter .lp26-tep-cta {
        padding: 80px var(--rg-space-4);
    }

    .lp26-page--tep-newsletter .lp26-tep-cta__inner {
        gap: var(--rg-space-5); /* 24 */
    }

    .lp26-page--tep-newsletter .lp26-tep-cta__headline {
        font-size: var(--rg-fs-mobile-h2);
        line-height: var(--rg-lh-mobile-h2);
    }
}

/* =====================================================================
   HubSpot Forms embed — scoped overrides
   ---------------------------------------------------------------------
   The placeholder native form was a flat email + Subscribe stack.
   HubSpot ships its own markup (.hs-form / .hs-form-field / .hs-input /
   .hs-button / .legal-consent-container / .hs-error-msgs etc.) and we
   load the embed with cssRequired:"" so NO HubSpot stylesheet is
   applied. These rules are the only CSS those generated elements get.
   Match the visual rules above (.lp26-tep-form__input / __btn) so the
   final look is indistinguishable from the placeholder design — but new
   fields a marketer adds in the HubSpot form editor (First name, Last
   name, dropdowns, checkboxes…) render with the same look automatically
   with zero PHP/CSS changes here.

   Layout strategy:
   - Stack every field full-width with `--rg-space-4` between them.
   - One column on desktop and mobile (Figma is single-column on both).
   - The submit button is full-width like the placeholder.

   Variants:
   - .lp26-tep-hs-form--light → hero (white card on the cream §1 band)
   - .lp26-tep-hs-form--dark  → bottom CTA (sits on the dark accent-12 §6 band)
   ===================================================================== */
.lp26-page--tep-newsletter .lp26-tep-hs-form {
    width: 400px;
    max-width: 100%;
    margin: 0;
}

/* HubSpot wraps each form instance in `.hs-form`. */
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-form,
.lp26-page--tep-newsletter .lp26-tep-hs-form form.hs-form {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-4);
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Each visible field is wrapped in `.hs-form-field`. Hidden fields render
   as `.hs-form-field.hs-fieldtype-text input[type=hidden]` or as bare
   <input type="hidden"> — both should take zero layout space. */
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-form-field {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.lp26-page--tep-newsletter .lp26-tep-hs-form input[type="hidden"] {
    display: none !important;
}

/* HubSpot labels: hide visually but keep for a11y, since Figma uses
   placeholders only. Marketers can flip a single field to a visible label
   by adding `data-show-label` to its wrapper — see override below. */
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-form-field > label,
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-form-field > .hs-field-desc {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-form-field[data-show-label] > label {
    position: static !important;
    width: auto; height: auto;
    margin: 0 0 var(--rg-space-2);
    clip: auto;
    font-family: var(--rg-font-body);
    font-size: var(--rg-fs-b2);
    color: var(--rg-neutral-11);
}

/* Inputs (text / email / tel / number / url / password) + selects */
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-input,
.lp26-page--tep-newsletter .lp26-tep-hs-form input[type="text"],
.lp26-page--tep-newsletter .lp26-tep-hs-form input[type="email"],
.lp26-page--tep-newsletter .lp26-tep-hs-form input[type="tel"],
.lp26-page--tep-newsletter .lp26-tep-hs-form input[type="number"],
.lp26-page--tep-newsletter .lp26-tep-hs-form input[type="url"],
.lp26-page--tep-newsletter .lp26-tep-hs-form select.hs-input,
.lp26-page--tep-newsletter .lp26-tep-hs-form textarea.hs-input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 var(--rg-space-3);
    background: var(--rg-color-surface);
    border: 1px solid var(--rg-color-input-border);
    border-radius: var(--rg-radius-3);
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-regular);
    font-size: var(--rg-fs-b1);
    line-height: var(--rg-lh-b1);
    letter-spacing: var(--rg-ls-body);
    color: var(--rg-neutral-12);
    box-sizing: border-box;
}
.lp26-page--tep-newsletter .lp26-tep-hs-form textarea.hs-input {
    height: auto;
    min-height: 96px;
    padding: var(--rg-space-3);
    line-height: var(--rg-lh-b1);
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-input::placeholder {
    color: var(--rg-color-placeholder);
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-input:focus,
.lp26-page--tep-newsletter .lp26-tep-hs-form select.hs-input:focus,
.lp26-page--tep-newsletter .lp26-tep-hs-form textarea.hs-input:focus {
    outline: none;
    border-color: var(--rg-accent-9);
}

/* Checkbox / radio rows (the consent checkbox uses these) */
.lp26-page--tep-newsletter .lp26-tep-hs-form .inputs-list,
.lp26-page--tep-newsletter .lp26-tep-hs-form ul.inputs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-2);
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .inputs-list li {
    margin: 0;
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-form-booleancheckbox label,
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-form-checkbox label,
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-form-radio label {
    display: flex;
    align-items: flex-start;
    gap: var(--rg-space-2);
    position: static !important;
    width: auto; height: auto;
    margin: 0;
    clip: auto;
    font-family: var(--rg-font-body);
    font-size: var(--rg-fs-b2);
    line-height: 1.45;
    color: var(--rg-neutral-12);
    cursor: pointer;
}
.lp26-page--tep-newsletter .lp26-tep-hs-form input[type="checkbox"],
.lp26-page--tep-newsletter .lp26-tep-hs-form input[type="radio"] {
    width: 16px; height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--rg-accent-9);
}

/* Legal/consent text (HubSpot's "Privacy policy" block + the optional
   marketing consent disclaimer). Sits below the checkbox row above the
   submit button. */
.lp26-page--tep-newsletter .lp26-tep-hs-form .legal-consent-container,
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-richtext,
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-richtext p {
    margin: 0;
    font-family: var(--rg-font-body);
    font-size: var(--rg-fs-b2);
    line-height: 1.45;
    color: var(--rg-neutral-11);
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .legal-consent-container a,
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-richtext a {
    color: var(--rg-accent-9);
    text-decoration: underline;
}

/* Submit button — matches `.lp26-tep-form__btn` so dark/light variants of
   the page render the same orange CTA. HubSpot puts its button in
   `.hs-submit > .actions > .hs-button`. */
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-submit {
    margin: 0;
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-submit .actions {
    margin: 0;
    padding: 0;
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-button,
.lp26-page--tep-newsletter .lp26-tep-hs-form input[type="submit"].hs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rg-space-3);
    width: 100%;
    height: 40px;
    padding: 0 var(--rg-space-4);
    background: var(--rg-accent-9);
    border: 0;
    border-radius: var(--rg-radius-2);
    font-family: var(--rg-font-body);
    font-weight: var(--rg-fw-medium);
    font-size: var(--rg-fs-b1);
    line-height: var(--rg-lh-b1);
    letter-spacing: var(--rg-ls-body);
    color: var(--rg-accent-contrast);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
    -webkit-appearance: none;
            appearance: none;
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-button:hover {
    background: var(--rg-accent-10);
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-button:focus-visible {
    outline: 2px solid var(--rg-accent-9);
    outline-offset: 2px;
}

/* Validation messages — HubSpot uses .hs-error-msgs (per-field) and
   .hs-form__validation-message (top-level). Render as compact red text. */
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-error-msgs,
.lp26-page--tep-newsletter .lp26-tep-hs-form ul.hs-error-msgs {
    list-style: none;
    margin: var(--rg-space-1) 0 0;
    padding: 0;
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-error-msg,
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-main-font-element {
    font-family: var(--rg-font-body);
    font-size: var(--rg-fs-b2);
    color: #d6453d;
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-input.invalid.error {
    border-color: #d6453d;
}

/* Thank-you (inlineMessage) — HubSpot drops the success copy into
   `.submitted-message`. Match the headline color for the band. */
.lp26-page--tep-newsletter .lp26-tep-hs-form .submitted-message,
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-form__success {
    font-family: var(--rg-font-body);
    font-size: var(--rg-fs-b1);
    line-height: var(--rg-lh-b1);
    color: var(--rg-neutral-12);
    padding: var(--rg-space-3) 0;
}

/* Dark variant (§6 bottom CTA, sits on accent-12 band) — flip text + link
   colors. Inputs stay on a white surface for legibility (matches the
   light band) — Figma renders the bottom-band form as white inputs too. */
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .legal-consent-container,
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .hs-richtext,
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .hs-richtext p,
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .hs-form-booleancheckbox label,
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .hs-form-checkbox label,
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .submitted-message {
    color: rgba(255, 255, 255, 0.88);
}
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .legal-consent-container a,
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .hs-richtext a {
    color: #fff;
}

/* Form flash on gated click — drives the eye to the subscribe input. */
.lp26-page--tep-newsletter .lp26-tep-hs-form.is-flashing {
    animation: lp26NlFormFlash 1.2s ease;
}
@keyframes lp26NlFormFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
    20%      { box-shadow: 0 0 0 4px var(--rg-accent-9, #f25c2a); }
    60%      { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* =====================================================================
   Native HubSpot form — TEP newsletter overrides
   ---------------------------------------------------------------------
   The shared landing-2026-v5.css styles `.lp26-native-hs-form` with
   visible labels. Figma node 2196-19594 (TEP) hides labels in favour
   of a placeholder-driven input. The legal-consent block stays visible
   so the consent the marketing team configured in HubSpot is presented
   to the user as HubSpot intends. Scoped to .lp26-page--tep-newsletter
   so other pages are unaffected.
   ===================================================================== */

/* Hide field labels (visually hidden, accessible) */
.lp26-page--tep-newsletter .lp26-tep-hs-form .lp26-native-hs-form .hs-form-field > label {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Strip the browser-default <fieldset> chrome.
   landing-2026-v5.css doesn't reset it because other pages' fieldsets
   contain multiple fields and the boxed look reads as intentional. TEP
   has one field per fieldset, so the native grooved border + padding
   look like a stray box around the input. Belt-and-braces reset. */
.lp26-page--tep-newsletter .lp26-tep-hs-form .lp26-native-hs-form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0; /* Firefox flex-child fix */
}

/* Match Figma's input border-radius (Radius/2 = 4px) — the shared CSS
   uses 6px, slightly off-spec for this section. */
.lp26-page--tep-newsletter .lp26-tep-hs-form .hs-input {
    border-radius: 4px;
}

/* Consent block — typographically homogeneous with the rest of the form.
   The shared CSS leaves this in browser-default body font; force it to
   use the landing tokens so checkbox + privacy text read like part of
   the same component. Bottom margin gives the Subscribe button visible
   breathing room — Figma node 2196-19594 shows ~24px between the privacy
   line and the CTA button. */
.lp26-page--tep-newsletter .lp26-tep-hs-form .legal-consent-container {
    margin-top: var(--rg-space-3, 12px);
    margin-bottom: var(--rg-space-5, 24px);
    font-family: var(--rg-font-body);
    font-size: var(--rg-fs-b2);
    line-height: 1.45;
    color: var(--rg-neutral-11, #60646c);
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .legal-consent-container a {
    color: var(--rg-accent-9, #1b6a50);
    text-decoration: underline;
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .legal-consent-container .hs-form-booleancheckbox-display {
    display: flex;
    align-items: flex-start;
    gap: var(--rg-space-2, 8px);
}
.lp26-page--tep-newsletter .lp26-tep-hs-form .legal-consent-container input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--rg-accent-9, #1b6a50);
}

/* Dark variant (§6 bottom CTA band): invert the submit button so it
   reads against the accent-12 background. Input keeps the white surface
   from the shared CSS — matches Figma's bottom-band rendering. */
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .lp26-form-submit {
    background: #fff;
    color: var(--rg-accent-12, #00160e);
}
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .lp26-form-submit:hover {
    background: rgba(255, 255, 255, 0.92);
}

/* Dark variant consent text + link colours for legibility on accent-12 */
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .legal-consent-container {
    color: rgba(255, 255, 255, 0.85);
}
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .legal-consent-container a {
    color: #fff;
}

/* Dark variant — "This field is required" + per-field validation errors.
   The shared CSS uses a dark red (#d6453d) for errors which disappears
   against accent-12. Override to the same white-on-dark tone as the
   consent text so error messages remain legible without a red flag that
   wouldn't read against the band anyway. */
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .hs-error-msg,
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .hs-main-font-element,
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .lp26-form-error-msg,
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .lp26-form-api-error-msg {
    color: rgba(255, 255, 255, 0.85);
}
.lp26-page--tep-newsletter .lp26-tep-hs-form--dark .hs-input.invalid.error {
    border-color: rgba(255, 255, 255, 0.55);
}

/* =====================================================================
   Featured Posts — full-card clickable
   ---------------------------------------------------------------------
   The entire card content (cover image + excerpt + byline) lives inside
   one <a class="lp26-tep-featured__link">. We use `display: contents`
   so the link takes no box of its own — the card's existing flex layout
   keeps treating the cover-wrap + excerpt as its direct flex children.
   The link itself still exists for click/hover/screen-reader semantics,
   so Chrome shows the URL preview when hovering ANY part of the card,
   not just the image.

   `color: inherit; text-decoration: none` (applied broadly inside the
   link) keeps the post title, lede, date and byline rendered in the
   card's regular text colors — no blue/underline from default <a> CSS.
   ===================================================================== */
.lp26-page--tep-newsletter .lp26-tep-featured__link {
    display: contents;
}
.lp26-page--tep-newsletter .lp26-tep-featured__link,
.lp26-page--tep-newsletter .lp26-tep-featured__link * {
    color: inherit;
    text-decoration: none;
}
.lp26-page--tep-newsletter .lp26-tep-featured__card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lp26-page--tep-newsletter .lp26-tep-featured__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}