/* Simplify AI Tools - Newsletter */

:root {
    --sait-nl-ink: #12152b;
    --sait-nl-text: #242631;
    --sait-nl-muted: #666b78;
    --sait-nl-purple: #7a3587;
    --sait-nl-purple-dark: #642b70;
    --sait-nl-orange: #ff6b1a;
    --sait-nl-cream: #fffaf3;
    --sait-nl-soft: #f7f7f8;
    --sait-nl-line: #e9e1d9;
    --sait-nl-card-line: #e7e7ea;
    --sait-nl-radius: 14px;
}

.sait-nl-main,
.sait-nl-single {
    color: var(--sait-nl-text);
    font: inherit;
    background: #fff;
}

.sait-nl-main *,
.sait-nl-single * {
    box-sizing: border-box;
}

.sait-nl-wrap {
    width: min(1400px, calc(100% - 64px));
    margin-inline: auto;
}

/* Main newsletter landing page. This is intentionally separate from the single-newsletter styles below. */
.sait-nl-main .sait-nl-hero {
    background: var(--sait-nl-cream);
    border-bottom: 1px solid var(--sait-nl-line);
}

.sait-nl-main .sait-nl-hero::before,
.sait-nl-main .sait-nl-hero::after {
    content: none;
    display: none;
}

.sait-nl-main .sait-nl-hero__inner {
    text-align: center;
    padding: 48px 0 52px;
}

.sait-nl-main .sait-nl-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    min-height: 38px;
    margin: 0 auto 20px;
    padding: 8px 15px;
    border: 1px solid #e6d9cf;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: #4c4e57;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.sait-nl-main .sait-nl-eyebrow__dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--sait-nl-orange);
}

.sait-nl-main .sait-nl-eyebrow__sep {
    width: 1px;
    height: 15px;
    background: #d7cdc5;
}

.sait-nl-main .sait-nl-hero h1 {
    max-width: 900px;
    margin: 0 auto;
    color: #151515;
    font-size: clamp(40px, 4vw, 58px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.sait-nl-main .sait-nl-hero__lead {
    max-width: 780px;
    margin: 20px auto 0;
    color: #34353b;
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.58;
}

.sait-nl-main .sait-nl-hero__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.sait-nl-main .sait-nl-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}

.sait-nl-main .sait-nl-button:hover {
    transform: translateY(-1px);
}

.sait-nl-main .sait-nl-button--primary {
    background: var(--sait-nl-purple);
    color: #fff !important;
}

.sait-nl-main .sait-nl-button--primary:hover {
    background: var(--sait-nl-purple-dark);
}

.sait-nl-main .sait-nl-button--secondary {
    border-color: var(--sait-nl-purple);
    background: #fff;
    color: var(--sait-nl-purple) !important;
}

.sait-nl-main .sait-nl-button--secondary:hover {
    background: #fbf6fc;
}

.sait-nl-main .sait-nl-hero__utility {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    color: #777985;
    font-size: 13px;
}

.sait-nl-main .sait-nl-hero__utility a {
    color: #656874 !important;
    font-weight: 500;
    text-decoration: none !important;
}

.sait-nl-main .sait-nl-hero__utility a:hover {
    color: var(--sait-nl-purple) !important;
}

.sait-nl-main .sait-nl-library {
    padding: 46px 0 72px;
}

.sait-nl-main .sait-nl-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.sait-nl-main .sait-nl-section-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--sait-nl-orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.sait-nl-main .sait-nl-section-heading h2 {
    margin: 0;
    color: var(--sait-nl-ink);
    font-size: clamp(30px, 2.35vw, 38px);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.sait-nl-main .sait-nl-section-heading p {
    margin: 0 0 4px;
    color: #858995;
    font-size: 14px;
}

.sait-nl-main .sait-nl-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.sait-nl-main .sait-nl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--sait-nl-card-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(23,26,37,.045);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.sait-nl-main .sait-nl-card:hover {
    transform: translateY(-2px);
    border-color: #ded6df;
    box-shadow: 0 10px 26px rgba(23,26,37,.075);
}

.sait-nl-main .sait-nl-card__media {
    position: relative;
    display: block;
    margin: 11px 11px 0;
    overflow: hidden;
    border-radius: 8px;
    background: #f1f1f3;
    aspect-ratio: 16 / 9;
}

.sait-nl-main .sait-nl-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.sait-nl-main .sait-nl-card:hover .sait-nl-card__image {
    transform: scale(1.012);
}

.sait-nl-main .sait-nl-card__placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    background: #171a33;
    color: #fff;
    text-align: center;
}

.sait-nl-main .sait-nl-card__placeholder strong {
    font-size: 20px;
}

.sait-nl-main .sait-nl-card__placeholder small {
    opacity: .72;
}

.sait-nl-main .sait-nl-card__body {
    padding: 15px 14px 18px;
}

.sait-nl-main .sait-nl-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    color: #4f525c;
    font-size: 13px;
}

.sait-nl-view-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 5px 11px;
    border: 1px solid #d9dce3;
    border-radius: 9px;
    background: #fff;
    color: #32343d;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.sait-nl-view-badge svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #747985;
    stroke-width: 1.8;
}

.sait-nl-main .sait-nl-card__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #14151b;
    font-size: clamp(17px, 1.05vw, 19px);
    font-weight: 550;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sait-nl-main .sait-nl-card__title a {
    color: inherit !important;
    text-decoration: none !important;
}

.sait-nl-main .sait-nl-card__title a:hover {
    color: var(--sait-nl-purple) !important;
}

.sait-nl-main .sait-nl-card__read {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    color: var(--sait-nl-purple) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
}

.sait-nl-main .sait-nl-card__read:hover {
    text-decoration: underline !important;
}

.sait-nl-main .sait-nl-pagination {
    margin-top: 38px;
}

.sait-nl-main .sait-nl-pagination > .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sait-nl-main .sait-nl-pagination > .page-numbers > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sait-nl-main .sait-nl-pagination a.page-numbers,
.sait-nl-main .sait-nl-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #dddfe5;
    border-radius: 8px;
    background: #fff;
    color: #30313a !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
}

.sait-nl-main .sait-nl-pagination span.current {
    border-color: var(--sait-nl-purple);
    background: var(--sait-nl-purple);
    color: #fff !important;
}

.sait-nl-main .sait-nl-pagination a.page-numbers:hover {
    border-color: #c8b0cc;
    background: #fbf6fc;
    color: var(--sait-nl-purple) !important;
}

.sait-nl-main .sait-nl-pagination .dots {
    min-width: 34px;
    border-color: transparent;
    background: transparent;
}

.sait-nl-main .sait-nl-empty {
    padding: 44px;
    border: 1px solid var(--sait-nl-card-line);
    border-radius: var(--sait-nl-radius);
    text-align: center;
}

@media (max-width: 1240px) {
    .sait-nl-main .sait-nl-wrap {
        width: min(1400px, calc(100% - 40px));
    }

    .sait-nl-main .sait-nl-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .sait-nl-main .sait-nl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .sait-nl-main .sait-nl-wrap {
        width: min(100% - 28px, 1400px);
    }

    .sait-nl-main .sait-nl-hero__inner {
        padding: 34px 0 38px;
    }

    .sait-nl-main .sait-nl-eyebrow {
        margin-bottom: 16px;
        padding: 7px 11px;
        gap: 7px;
        font-size: 11px;
    }

    .sait-nl-main .sait-nl-eyebrow__sep {
        height: 12px;
    }

    .sait-nl-main .sait-nl-hero h1 {
        font-size: clamp(34px, 10vw, 46px);
        line-height: 1.07;
    }

    .sait-nl-main .sait-nl-hero__lead {
        margin-top: 16px;
        font-size: 15.5px;
    }

    .sait-nl-main .sait-nl-hero__actions {
        width: 100%;
        margin-top: 22px;
    }

    .sait-nl-main .sait-nl-button {
        width: 100%;
        min-height: 48px;
    }

    .sait-nl-main .sait-nl-hero__utility {
        margin-top: 12px;
        font-size: 12px;
    }

    .sait-nl-main .sait-nl-library {
        padding: 34px 0 52px;
    }

    .sait-nl-main .sait-nl-section-heading {
        display: block;
        margin-bottom: 18px;
    }

    .sait-nl-main .sait-nl-section-heading p {
        margin-top: 7px;
    }

    .sait-nl-main .sait-nl-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sait-nl-main .sait-nl-card__title {
        min-height: 0;
        font-size: 18px;
    }
}

/* Single newsletter issue */
.sait-nl-single {
    background: #fff;
}

.sait-nl-single__wrap {
    width: min(1320px, calc(100% - 64px));
    padding-top: 28px;
    padding-bottom: 76px;
}

.sait-nl-breadcrumbs {
    margin: 0 0 28px;
    color: #737783;
    font-size: 14px;
}

.sait-nl-breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sait-nl-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.sait-nl-breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
    color: #c2c3c8;
}

.sait-nl-breadcrumbs a {
    color: #5c606b !important;
    font-weight: 500;
    text-decoration: none !important;
}

.sait-nl-breadcrumbs a:hover {
    color: var(--sait-nl-purple) !important;
}

.sait-nl-breadcrumbs [aria-current="page"] {
    max-width: 480px;
    overflow: hidden;
    color: #93959d;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sait-nl-issue-header--single {
    max-width: 1120px;
    margin: 0 0 38px;
    padding: 0 0 30px;
    border-bottom: 1px solid #e8e2dc;
}

.sait-nl-issue-header__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-bottom: 18px;
}

.sait-nl-issue-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sait-nl-orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
}

.sait-nl-issue-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sait-nl-orange);
}

.sait-nl-issue-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: #6d7079;
    font-size: 14px;
}

.sait-nl-issue-header--single h1 {
    max-width: 1080px;
    margin: 0;
    color: #151515;
    font-size: clamp(38px, 4vw, 60px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.sait-nl-issue-header--single p {
    max-width: 900px;
    margin: 20px 0 0;
    color: #555965;
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.62;
}

.sait-nl-single-grid {
    display: block;
}

.sait-nl-single-grid.has-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 36px;
}

.sait-nl-issue {
    min-width: 0;
}

.sait-nl-issue-content {
    min-width: 0;
}

/* Quiz card */
.sait-nl-mobile-quiz {
    display: none;
}

.sait-nl-quiz-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
    border: 1px solid #e4d8e6;
    border-radius: 15px;
    background: linear-gradient(145deg, #fffaf4 0%, #fbf6fc 100%);
    box-shadow: 0 8px 24px rgba(42, 32, 48, .06);
}

.sait-nl-quiz-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--sait-nl-orange);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
}

.sait-nl-quiz-card__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--sait-nl-purple);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sait-nl-quiz-card h2 {
    margin: 0 0 7px;
    color: #202129;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.sait-nl-quiz-card p {
    margin: 0 0 12px;
    color: #62656f;
    font-size: 14px;
    line-height: 1.5;
}

.sait-nl-quiz-card a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sait-nl-purple) !important;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none !important;
}

.sait-nl-quiz-card a:hover {
    text-decoration: underline !important;
}

/* Story content */
.sait-nl-story-list {
    display: grid;
    gap: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
}

.sait-nl-story {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 30px 32px 32px;
    border: 1px solid #e9e8eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(25, 27, 36, .045);
    scroll-margin-top: 118px;
}

.sait-nl-story__label {
    margin: 0 0 15px;
}

.sait-nl-story__label span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff3e8;
    color: #e85b0d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.sait-nl-story > :first-child:not(.sait-nl-story__label) {
    margin-top: 0 !important;
}

.sait-nl-story > :last-child {
    margin-bottom: 0 !important;
}

.sait-nl-story h1,
.sait-nl-story h2,
.sait-nl-story h3,
.sait-nl-story h4,
.sait-nl-story h5,
.sait-nl-story h6 {
    color: #171820;
    font-weight: 650;
    letter-spacing: -0.022em;
}

.sait-nl-story h1,
.sait-nl-story h2 {
    margin: 0 0 18px;
    font-size: clamp(29px, 2.25vw, 38px);
    line-height: 1.16;
}

.sait-nl-story h3 {
    margin: 24px 0 13px;
    font-size: clamp(23px, 1.7vw, 29px);
    line-height: 1.25;
}

.sait-nl-story h4 {
    margin: 22px 0 11px;
    font-size: 21px;
    line-height: 1.3;
}

.sait-nl-story h5 {
    margin: 20px 0 11px;
    padding: 10px 12px;
    border-left: 3px solid #0b83bd;
    background: #f5fbfe;
    color: #106f98;
    font-size: 18px;
    line-height: 1.35;
}

.sait-nl-story h6 {
    margin: 18px 0 9px;
    font-size: 16px;
    line-height: 1.4;
}

.sait-nl-story p,
.sait-nl-story li {
    color: #3d4049;
    font-size: 17px;
    line-height: 1.72;
}

.sait-nl-story p {
    margin: 0 0 16px;
}

.sait-nl-story ul,
.sait-nl-story ol {
    margin: 0 0 18px 22px;
}

.sait-nl-story a {
    color: #0877ff !important;
    font-weight: 650;
    text-decoration: none !important;
}

.sait-nl-story a:hover {
    text-decoration: underline !important;
}

.sait-nl-story img:not(.emoji) {
    display: block;
    width: min(100%, 860px);
    max-width: 100%;
    height: auto;
    margin: 22px auto 24px;
    border: 1px solid #e7e7eb;
    border-radius: 12px;
    background: #f7f7f8;
    box-shadow: 0 8px 24px rgba(23, 26, 37, .08);
}

.sait-nl-story img.emoji {
    display: inline !important;
    width: 1em !important;
    height: 1em !important;
    margin: 0 .07em !important;
    border: 0 !important;
    vertical-align: -.1em !important;
    box-shadow: none !important;
}

.sait-nl-story blockquote {
    margin: 22px 0;
    padding: 16px 20px;
    border-left: 4px solid var(--sait-nl-orange);
    background: #fff9f4;
}

.sait-nl-story table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
}

.sait-nl-story th,
.sait-nl-story td {
    padding: 12px 14px;
    border: 1px solid #e2e3e7;
    text-align: left;
    vertical-align: top;
}

.sait-nl-story th {
    background: #f7f7f8;
    color: #20222b;
}

/* Sidebar */
.sait-nl-sidebar {
    min-width: 0;
}

.sait-nl-sidebar__inner {
    position: sticky;
    top: 108px;
    display: grid;
    gap: 18px;
}

body.admin-bar .sait-nl-sidebar__inner {
    top: 140px;
}

.sait-nl-toc,
.sait-nl-mobile-toc {
    border: 1px solid #e9e8eb;
    border-radius: 14px;
    background: #fff;
}

.sait-nl-toc {
    padding: 18px 18px 15px;
}

.sait-nl-toc__eyebrow,
.sait-nl-mobile-toc > span {
    display: block;
    margin-bottom: 10px;
    color: #858994;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sait-nl-toc ol,
.sait-nl-mobile-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sait-nl-toc li + li {
    border-top: 1px solid #f0eff2;
}

.sait-nl-toc a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 0;
    color: #30323a !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;
}

.sait-nl-toc a > span {
    color: var(--sait-nl-orange);
    font-size: 11px;
    font-weight: 800;
}

.sait-nl-toc a:hover {
    color: var(--sait-nl-purple) !important;
}

.sait-nl-mobile-toc {
    display: none;
}

/* Compact recent-news card used on newsletter single pages */
.sait-nl-recent-card {
    overflow: hidden;
    border: 1px solid #e9e8eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(24, 26, 35, .055);
}

.sait-nl-recent-card__title {
    margin: 0;
    padding: 22px 22px 12px;
    color: #24242a;
    font-size: 24px;
    font-weight: 650;
    line-height: 1.2;
}

.sait-nl-recent-card__eyebrow {
    padding: 17px 18px 0;
    color: var(--sait-nl-orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sait-nl-recent-section {
    padding: 14px 20px 22px;
}

.sait-nl-recent-section--bordered {
    border-top: 1px solid #ececef;
    padding-top: 20px;
}

.sait-nl-recent-section h3 {
    margin: 0 0 12px;
    color: #1f2027;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.32;
}

.sait-nl-recent-section--compact {
    padding: 14px 18px 18px;
}

.sait-nl-recent-section--compact h3 {
    font-size: 17px;
}

.sait-nl-recent-media {
    overflow: hidden;
    margin: 0 0 14px;
    border: 1px solid #efeff1;
    border-radius: 10px;
    background: #f8f8f9;
}

.sait-nl-recent-media img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.sait-nl-recent-media--compact {
    aspect-ratio: 1.85 / 1;
}

.sait-nl-recent-media--compact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sait-nl-recent-copy,
.sait-nl-quick-bytes,
.sait-nl-recent-summary {
    color: #5a5d67;
    font-size: 14px;
    line-height: 1.55;
}

.sait-nl-recent-summary {
    margin: 0;
}

.sait-nl-recent-copy p,
.sait-nl-quick-bytes p {
    margin: 0 0 12px;
}

.sait-nl-recent-copy strong,
.sait-nl-quick-bytes strong {
    color: #e52c65;
}

.sait-nl-recent-link {
    display: inline-flex;
    gap: 6px;
    margin-top: 11px;
    color: var(--sait-nl-purple) !important;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none !important;
}

.sait-nl-recent-link:hover {
    text-decoration: underline !important;
}

.sait-nl-quick-headlines {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sait-nl-quick-headlines li {
    position: relative;
    padding-left: 14px;
    color: #4f525c;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.42;
}

.sait-nl-quick-headlines li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sait-nl-orange);
}

/* Prev/next */
.sait-nl-issue-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px;
}

.sait-nl-issue-nav--single {
    grid-template-columns: minmax(0, 1fr);
}

.sait-nl-issue-nav__item {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid #e3e4e8;
    border-radius: 12px;
    background: #fff;
}

.sait-nl-issue-nav__item span {
    display: block;
    margin-bottom: 6px;
    color: #9598a2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sait-nl-issue-nav__item a {
    color: #20222a !important;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.42;
    text-decoration: none !important;
}

.sait-nl-issue-nav__item a:hover {
    color: var(--sait-nl-purple) !important;
}

.sait-nl-issue-nav__item--next {
    text-align: right;
}

.sait-nl-back-bottom {
    margin-top: 20px;
    text-align: center;
}

.sait-nl-back-bottom a {
    color: #6f727c !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}

.sait-nl-back-bottom a:hover {
    color: var(--sait-nl-purple) !important;
}

@media (max-width: 1180px) {
    .sait-nl-single__wrap {
        width: min(1320px, calc(100% - 40px));
    }

    .sait-nl-single-grid.has-sidebar {
        grid-template-columns: minmax(0, 1fr) 310px;
        gap: 28px;
    }

    .sait-nl-story {
        padding: 26px 26px 28px;
    }
}

@media (max-width: 980px) {
    .sait-nl-single-grid.has-sidebar {
        display: block;
    }

    .sait-nl-desktop-quiz,
    .sait-nl-toc {
        display: none;
    }

    .sait-nl-mobile-quiz {
        display: block;
        margin: 0 0 22px;
    }

    .sait-nl-mobile-toc {
        display: block;
        margin: 0 0 22px;
        padding: 16px 18px;
    }

    .sait-nl-mobile-toc ol {
        display: grid;
        gap: 8px;
    }

    .sait-nl-mobile-toc a {
        color: #30323a !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        text-decoration: none !important;
    }

    .sait-nl-sidebar {
        margin-top: 30px;
    }

    .sait-nl-sidebar__inner,
    body.admin-bar .sait-nl-sidebar__inner {
        position: static;
    }

    .sait-nl-recent-card {
        max-width: none;
    }

    .sait-nl-recent-card--compact {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sait-nl-recent-card--compact .sait-nl-recent-card__eyebrow {
        grid-column: 1 / -1;
    }

    .sait-nl-recent-card--compact .sait-nl-recent-section--bordered {
        border-top: 0;
        border-left: 1px solid #ececef;
    }

    .sait-nl-recent-card--compact .sait-nl-recent-section:last-child {
        grid-column: 1 / -1;
        border-top: 1px solid #ececef;
        border-left: 0;
    }
}

@media (max-width: 720px) {
    .sait-nl-single__wrap {
        width: min(100% - 28px, 1320px);
        padding-top: 18px;
        padding-bottom: 54px;
    }

    .sait-nl-breadcrumbs {
        margin-bottom: 20px;
        font-size: 12px;
    }

    .sait-nl-breadcrumbs [aria-current="page"] {
        max-width: 170px;
    }

    .sait-nl-issue-header--single {
        margin-bottom: 22px;
        padding-bottom: 22px;
    }

    .sait-nl-issue-header__topline {
        align-items: flex-start;
        margin-bottom: 14px;
    }

    .sait-nl-issue-meta {
        gap: 7px;
        font-size: 12px;
    }

    .sait-nl-issue-header--single h1 {
        font-size: clamp(31px, 9vw, 42px);
        line-height: 1.08;
        letter-spacing: -0.03em;
    }

    .sait-nl-issue-header--single p {
        margin-top: 15px;
        font-size: 16px;
        line-height: 1.56;
    }

    .sait-nl-quiz-card {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;
        padding: 16px;
        border-radius: 13px;
    }

    .sait-nl-quiz-card__icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 18px;
    }

    .sait-nl-quiz-card h2 {
        font-size: 18px;
    }

    .sait-nl-quiz-card p,
    .sait-nl-quiz-card a {
        font-size: 13px;
    }

    .sait-nl-story-list {
        gap: 18px;
    }

    .sait-nl-story {
        padding: 20px 18px 22px;
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(25, 27, 36, .04);
        scroll-margin-top: 86px;
    }

    .sait-nl-story__label {
        margin-bottom: 11px;
    }

    .sait-nl-story h1,
    .sait-nl-story h2 {
        margin-bottom: 14px;
        font-size: clamp(25px, 7vw, 31px);
        line-height: 1.2;
    }

    .sait-nl-story h3 {
        font-size: 22px;
    }

    .sait-nl-story p,
    .sait-nl-story li {
        font-size: 16px;
        line-height: 1.66;
    }

    .sait-nl-story img:not(.emoji) {
        width: 100%;
        margin: 17px auto 19px;
        border-radius: 10px;
        box-shadow: 0 5px 18px rgba(23, 26, 37, .07);
    }

    .sait-nl-issue-nav {
        grid-template-columns: 1fr;
        margin-top: 24px;
    }

    .sait-nl-issue-nav__item--next {
        text-align: left;
    }

    .sait-nl-recent-card--compact {
        display: block;
    }

    .sait-nl-recent-card--compact .sait-nl-recent-section--bordered {
        border-top: 1px solid #ececef;
        border-left: 0;
    }

    .sait-nl-recent-card__eyebrow {
        padding-top: 15px;
    }

    .sait-nl-recent-section--compact {
        padding: 13px 16px 17px;
    }
}


@media (max-width: 720px) {
    .sait-nl-story table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sait-nl-button,
    .sait-nl-card,
    .sait-nl-card__image {
        transition: none;
    }
}

@media print {
    .sait-nl-sidebar,
    .sait-nl-mobile-quiz,
    .sait-nl-mobile-toc,
    .sait-nl-hero__actions,
    .sait-nl-pagination,
    .sait-nl-breadcrumbs,
    .sait-nl-back-bottom {
        display: none !important;
    }

    .sait-nl-single-grid.has-sidebar {
        display: block;
    }

    .sait-nl-story,
    .sait-nl-quiz-card {
        box-shadow: none;
        break-inside: avoid;
    }
}

/* ===== Single newsletter v4 refinements ===== */
.sait-nl-single__wrap {
    width: min(1400px, calc(100% - 64px));
}

/* A tighter editorial masthead instead of a large loose title block. */
.sait-nl-issue-header--single {
    max-width: none;
    margin: 0 0 28px;
    padding: 30px 34px 32px;
    border: 1px solid #eee2d8;
    border-top: 4px solid var(--sait-nl-orange);
    border-radius: 18px;
    background: linear-gradient(135deg, #fffaf3 0%, #ffffff 70%);
}

.sait-nl-issue-header__topline {
    margin-bottom: 14px;
}

.sait-nl-issue-header--single h1 {
    max-width: 1120px;
    font-size: clamp(34px, 3.2vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.sait-nl-issue-header--single p {
    max-width: 1040px;
    margin-top: 16px;
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.6;
}

/* Give the newsletter extras enough room to breathe. */
.sait-nl-single-grid.has-sidebar {
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 32px;
}

/* The entire quiz card is now a clear, clickable CTA. */
.sait-nl-quiz-card--link {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sait-nl-quiz-card--link:hover {
    transform: translateY(-1px);
    border-color: #d9bddf;
    box-shadow: 0 12px 30px rgba(42, 32, 48, .1);
}

.sait-nl-quiz-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sait-nl-purple);
    font-size: 14px;
    font-weight: 750;
}

/* Editorial story layout: headline across the card, then image beside the copy. */
.sait-nl-story {
    padding: 26px 28px 28px;
}

.sait-nl-story__heading h1,
.sait-nl-story__heading h2,
.sait-nl-story__heading h3,
.sait-nl-story__heading h4,
.sait-nl-story__heading h5,
.sait-nl-story__heading h6 {
    margin-top: 0;
}

.sait-nl-story__layout {
    display: grid;
    grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.sait-nl-story__media {
    position: sticky;
    top: 118px;
    min-width: 0;
}

body.admin-bar .sait-nl-story__media {
    top: 150px;
}

.sait-nl-story__media > p,
.sait-nl-story__media > figure,
.sait-nl-story__media > a {
    margin: 0 !important;
}

.sait-nl-story__media img:not(.emoji) {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 12px;
}

.sait-nl-story__copy > :first-child {
    margin-top: 0 !important;
}

.sait-nl-story__copy > :last-child {
    margin-bottom: 0 !important;
}

.sait-nl-story__copy p,
.sait-nl-story__copy li {
    font-size: 16.5px;
    line-height: 1.7;
}

/* Keep the right rail visible while the article scrolls, then naturally stop at
   the bottom of the grid. The rail itself scrolls only when its content is taller
   than the viewport, so it never leaves a large empty column. */
.sait-nl-sidebar__inner {
    top: 106px;
    max-height: calc(100vh - 126px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: #d4c9d6 transparent;
}

body.admin-bar .sait-nl-sidebar__inner {
    top: 138px;
    max-height: calc(100vh - 158px);
}

.sait-nl-sidebar__inner::-webkit-scrollbar {
    width: 6px;
}

.sait-nl-sidebar__inner::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d4c9d6;
}

/* Full sidebar content rather than teaser-only excerpts. */
.sait-nl-recent-card--compact {
    overflow: visible;
}

.sait-nl-recent-section--compact {
    padding: 16px 18px 20px;
}

.sait-nl-recent-section__label {
    margin-bottom: 8px;
    color: var(--sait-nl-orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sait-nl-recent-section--compact h3 {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.3;
}

.sait-nl-recent-copy--sidebar,
.sait-nl-quick-bytes--sidebar {
    color: #595d68;
    font-size: 13.5px;
    line-height: 1.55;
}

.sait-nl-recent-copy--sidebar h2,
.sait-nl-recent-copy--sidebar h3,
.sait-nl-recent-copy--sidebar h4,
.sait-nl-quick-bytes--sidebar h2,
.sait-nl-quick-bytes--sidebar h3,
.sait-nl-quick-bytes--sidebar h4 {
    margin: 15px 0 7px;
    color: #22242c;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.35;
}

.sait-nl-recent-copy--sidebar p,
.sait-nl-quick-bytes--sidebar p {
    margin: 0 0 11px;
}

.sait-nl-recent-copy--sidebar ul,
.sait-nl-recent-copy--sidebar ol,
.sait-nl-quick-bytes--sidebar ul,
.sait-nl-quick-bytes--sidebar ol {
    display: grid;
    gap: 9px;
    margin: 8px 0 0;
    padding-left: 18px;
}

.sait-nl-recent-copy--sidebar li,
.sait-nl-quick-bytes--sidebar li {
    color: #565a64;
    line-height: 1.5;
}

.sait-nl-recent-copy--sidebar a,
.sait-nl-quick-bytes--sidebar a {
    color: var(--sait-nl-purple) !important;
    font-weight: 700;
    text-decoration: none !important;
}

.sait-nl-recent-copy--sidebar a:hover,
.sait-nl-quick-bytes--sidebar a:hover {
    text-decoration: underline !important;
}

/* If a Quick Byte already contains a destination, make the whole link easy to tap. */
.sait-nl-quick-bytes--sidebar li > a:first-child:last-child {
    display: block;
    padding: 9px 10px;
    margin-left: -8px;
    border: 1px solid #eee9ef;
    border-radius: 9px;
    background: #fbfafc;
}

.sait-nl-recent-media--compact {
    aspect-ratio: 2 / 1;
    margin-bottom: 12px;
}

.sait-nl-recent-link {
    margin-top: 8px;
    padding: 7px 0;
    font-size: 13px;
}

@media (max-width: 1240px) {
    .sait-nl-single-grid.has-sidebar {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 26px;
    }

    .sait-nl-story__layout {
        grid-template-columns: minmax(220px, 40%) minmax(0, 1fr);
        gap: 22px;
    }
}

@media (max-width: 980px) {
    .sait-nl-single__wrap {
        width: min(100% - 36px, 1400px);
    }

    .sait-nl-issue-header--single {
        padding: 26px 26px 28px;
    }

    .sait-nl-sidebar__inner,
    body.admin-bar .sait-nl-sidebar__inner {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .sait-nl-recent-card--compact {
        display: block;
    }

    .sait-nl-recent-card--compact .sait-nl-recent-section--bordered {
        border-top: 1px solid #ececef;
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .sait-nl-single__wrap {
        width: min(100% - 24px, 1400px);
        padding-top: 14px;
    }

    .sait-nl-breadcrumbs {
        margin-bottom: 14px;
    }

    .sait-nl-breadcrumbs [aria-current="page"] {
        max-width: 135px;
    }

    .sait-nl-issue-header--single {
        margin-bottom: 18px;
        padding: 20px 18px 22px;
        border-radius: 14px;
    }

    .sait-nl-issue-header__topline {
        display: block;
        margin-bottom: 12px;
    }

    .sait-nl-issue-meta {
        margin-top: 9px;
    }

    .sait-nl-issue-header--single h1 {
        font-size: clamp(28px, 8.5vw, 36px);
        line-height: 1.1;
    }

    .sait-nl-issue-header--single p {
        margin-top: 13px;
        font-size: 15.5px;
        line-height: 1.55;
    }

    .sait-nl-story {
        padding: 18px 16px 20px;
    }

    .sait-nl-story__layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .sait-nl-story__media,
    body.admin-bar .sait-nl-story__media {
        position: static;
        width: 100%;
    }

    .sait-nl-story__media img:not(.emoji) {
        aspect-ratio: 2 / 1;
        border-radius: 10px;
    }

    .sait-nl-story__copy p,
    .sait-nl-story__copy li {
        font-size: 15.8px;
        line-height: 1.64;
    }

    .sait-nl-recent-section--compact {
        padding: 15px 15px 18px;
    }

    .sait-nl-recent-copy--sidebar,
    .sait-nl-quick-bytes--sidebar {
        font-size: 14px;
    }
}


/* ===== Single newsletter v5: natural sticky rail + centered story media ===== */
@media (min-width: 1241px) {
    .sait-nl-single-grid.has-sidebar {
        grid-template-columns: minmax(0, 1fr) 470px;
        gap: 34px;
    }
}

@media (min-width: 981px) and (max-width: 1240px) {
    .sait-nl-single-grid.has-sidebar {
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: 26px;
    }
}

/* No fixed-height / internal-scroll rail. The page is the only scrollbar. */
.sait-nl-sidebar__inner,
body.admin-bar .sait-nl-sidebar__inner {
    position: sticky;
    top: var(--sait-nl-sidebar-stick-top, 108px);
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    padding-right: 0;
    scrollbar-width: auto;
}

body.admin-bar .sait-nl-sidebar__inner {
    top: var(--sait-nl-sidebar-stick-top, 140px);
}

.sait-nl-sidebar__inner::-webkit-scrollbar {
    width: initial;
}

.sait-nl-sidebar__inner::-webkit-scrollbar-thumb {
    background: initial;
}

/* Stories return to a newsletter/editorial reading flow. */
.sait-nl-story__layout {
    display: block;
}

.sait-nl-story__lead,
.sait-nl-story__copy {
    max-width: 860px;
}

.sait-nl-story__lead p,
.sait-nl-story__lead li,
.sait-nl-story__copy p,
.sait-nl-story__copy li {
    font-size: 16.5px;
    line-height: 1.72;
}

.sait-nl-story__lead > :first-child,
.sait-nl-story__copy > :first-child {
    margin-top: 0 !important;
}

.sait-nl-story__media,
body.admin-bar .sait-nl-story__media {
    position: static;
    width: min(100%, 760px);
    margin: 22px auto 24px;
}

.sait-nl-story__media > p,
.sait-nl-story__media > figure,
.sait-nl-story__media > a {
    width: 100%;
    margin: 0 !important;
}

.sait-nl-story__media img:not(.emoji) {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    margin: 0 auto !important;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 12px;
}

/* A little more breathing room in the wider rail. */
.sait-nl-recent-section--compact {
    padding: 18px 20px 21px;
}

.sait-nl-recent-copy--sidebar,
.sait-nl-quick-bytes--sidebar {
    font-size: 14px;
    line-height: 1.58;
}

.sait-nl-toc {
    padding: 19px 20px 16px;
}

@media (max-width: 980px) {
    .sait-nl-sidebar__inner,
    body.admin-bar .sait-nl-sidebar__inner {
        position: static;
        top: auto;
    }

    .sait-nl-story__lead,
    .sait-nl-story__copy,
    .sait-nl-story__media {
        max-width: none;
        width: 100%;
    }

    .sait-nl-story__media {
        margin: 16px auto 18px;
    }

    .sait-nl-story__media img:not(.emoji) {
        max-width: none;
    }
}

/* =========================================================================
   Added: focus states, subscribe form, card link + badges
   ====================================================================== */

/* -------------------------------------------------------------------------
   Keyboard focus

   The stylesheet previously had no :focus rule anywhere, so keyboard and
   screen-reader users had no visible indicator on any card, button, link or
   pagination control. :focus-visible keeps mouse clicks clean.
   ---------------------------------------------------------------------- */

.sait-nl-main a:focus-visible,
.sait-nl-main button:focus-visible,
.sait-nl-main input:focus-visible,
.sait-nl-single a:focus-visible,
.sait-nl-single button:focus-visible,
.sait-nl-single input:focus-visible {
    outline: 3px solid var(--sait-nl-purple);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Focus on the stretched link highlights the whole card, not a text sliver. */
.sait-nl-main .sait-nl-card:focus-within {
    border-color: var(--sait-nl-purple);
    box-shadow: 0 0 0 3px rgba(122, 53, 135, .28), 0 10px 26px rgba(23, 26, 37, .075);
}

.sait-nl-main .sait-nl-card__link:focus-visible {
    outline: none;
}

/* Older browsers without :focus-visible still get something. */
@supports not selector(:focus-visible) {
    .sait-nl-main a:focus,
    .sait-nl-main button:focus,
    .sait-nl-main input:focus {
        outline: 3px solid var(--sait-nl-purple);
        outline-offset: 2px;
    }
}

/* -------------------------------------------------------------------------
   One link per card

   The card used to contain three anchors to the same URL (media, title and
   the read row). The title anchor is now stretched over the card and the
   other two are non-interactive markup.
   ---------------------------------------------------------------------- */

.sait-nl-main .sait-nl-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.sait-nl-main .sait-nl-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.sait-nl-main .sait-nl-card__dek {
    margin: 8px 0 0;
    color: var(--sait-nl-muted);
    font-size: 14px;
    line-height: 1.55;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sait-nl-main .sait-nl-card__read {
    margin-top: auto;
    padding-top: 12px;
}

.sait-nl-main .sait-nl-card__dot {
    color: #b9bcc6;
}

.sait-nl-main .sait-nl-card__meta {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.sait-nl-main .sait-nl-card__meta .sait-nl-view-badge {
    margin-left: auto;
}

/* Week + latest badges rendered in markup instead of baked into the cover. */
.sait-nl-main .sait-nl-card__week,
.sait-nl-main .sait-nl-card__flag {
    position: absolute;
    z-index: 2;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
}

.sait-nl-main .sait-nl-card__week {
    right: 8px;
    bottom: 8px;
    background: rgba(255, 255, 255, .94);
    color: #14151b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.sait-nl-main .sait-nl-card__flag {
    left: 8px;
    top: 8px;
    background: var(--sait-nl-orange);
    color: #fff;
    text-transform: uppercase;
}

/* Fallback in case the active theme does not define this core class. */
.sait-nl-main .screen-reader-text,
.sait-nl-single .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   Hero — rebuilt to match the blog library hero
   ====================================================================== */

.sait-nl-main .sait-nl-hero {
    background:
        radial-gradient(900px 320px at 50% -60px, rgba(255, 107, 26, .10), transparent 70%),
        radial-gradient(700px 300px at 85% 10%, rgba(122, 53, 135, .07), transparent 70%),
        var(--sait-nl-cream);
}

.sait-nl-main .sait-nl-hero__inner {
    padding: 34px 0 30px;
}

.sait-nl-main .sait-nl-eyebrow {
    margin-bottom: 16px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(23, 26, 37, .05);
}

/* Orange accent inside the pill, same idea as "200+ Articles" on the blog. */
.sait-nl-main .sait-nl-eyebrow__accent {
    color: var(--sait-nl-orange);
    font-weight: 700;
}

.sait-nl-main .sait-nl-hero h1 {
    max-width: none;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.1;
    text-wrap: balance;
}

.sait-nl-main .sait-nl-hero__accent {
    color: var(--sait-nl-orange);
}

.sait-nl-main .sait-nl-hero__lead {
    max-width: 600px;
    margin-top: 14px;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.55;
}

/* -------------------------------------------------------------------------
   Hero CTA row
   ---------------------------------------------------------------------- */

.sait-nl-main .sait-nl-hero__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.sait-nl-main .sait-nl-hero__trust {
    margin: 11px 0 0;
    color: #8a8e98;
    font-size: 13px;
}

.sait-nl-main .sait-nl-button--outline {
    border-color: #ddd5cc;
    background: #fff;
    color: #2c2e36 !important;
}

.sait-nl-main .sait-nl-button--outline:hover {
    border-color: var(--sait-nl-orange);
    color: var(--sait-nl-orange) !important;
}

/* =========================================================================
   Subscribe form
   ====================================================================== */

.sait-nl-subscribe {
    width: 100%;
}

.sait-nl-subscribe__row {
    display: flex;
    align-items: stretch;
}

.sait-nl-subscribe__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid #ddd5cc;
    background: #fff;
    color: var(--sait-nl-text);
    font-size: 16px; /* 16px stops iOS Safari zooming on focus. */
    line-height: 1.4;
}

.sait-nl-subscribe__input::placeholder {
    color: #a2a6b0;
}

.sait-nl-subscribe__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    background: var(--sait-nl-orange);
    color: #fff !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color .18s ease;
}

.sait-nl-subscribe__button:hover {
    background: #e85c0c;
}

.sait-nl-subscribe__button[disabled] {
    opacity: .7;
    cursor: progress;
    transform: none;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.sait-nl-subscribe__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sait-nl-subscribe__note {
    margin: 10px 0 0;
    color: var(--sait-nl-muted);
    font-size: 13px;
}

.sait-nl-subscribe__message {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease, margin .2s ease;
}

/* Only takes up space once there is something to say. */
.sait-nl-subscribe__message[data-state="success"],
.sait-nl-subscribe__message[data-state="error"] {
    max-height: 4em;
    margin-top: 9px;
}

.sait-nl-subscribe__message[data-state="success"] {
    color: #157a33;
}

.sait-nl-subscribe__message[data-state="error"] {
    color: #c0392b;
}

/* --- Hero variant: one joined pill, input and button share a single shell. */

.sait-nl-subscribe--hero {
    max-width: 470px;
}

.sait-nl-subscribe--hero .sait-nl-subscribe__row {
    padding: 5px;
    border: 1px solid #e3dbd2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(23, 26, 37, .07);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.sait-nl-subscribe--hero:focus-within .sait-nl-subscribe__row {
    border-color: var(--sait-nl-orange);
    box-shadow: 0 6px 24px rgba(255, 107, 26, .18);
}

.sait-nl-subscribe--hero .sait-nl-subscribe__input {
    min-height: 44px;
    border: 0;
    background: transparent;
    border-radius: 8px;
}

.sait-nl-subscribe--hero .sait-nl-subscribe__input:focus-visible {
    outline: none;
}

.sait-nl-subscribe--hero .sait-nl-subscribe__button {
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14.5px;
}

/* --- Inline variant: standalone block below the grid and inside issues. */

.sait-nl-subscribe--inline {
    position: relative;
    overflow: hidden;
    max-width: 720px;
    margin: 56px auto 0;
    padding: 38px 32px 34px;
    border: 1px solid #f0dfd0;
    border-radius: 18px;
    background:
        radial-gradient(620px 260px at 50% -30px, rgba(255, 107, 26, .16), transparent 72%),
        radial-gradient(420px 220px at 12% 108%, rgba(122, 53, 135, .10), transparent 70%),
        linear-gradient(180deg, #fffaf5 0%, var(--sait-nl-cream) 100%);
    box-shadow: 0 18px 44px rgba(23, 26, 37, .07);
    text-align: center;
}

/* Thin accent rule along the top edge of the card. */
.sait-nl-subscribe--inline::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--sait-nl-orange), var(--sait-nl-purple));
}

.sait-nl-subscribe__heading {
    margin: 0 0 6px;
    color: var(--sait-nl-ink);
    font-size: clamp(20px, 1.7vw, 26px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.sait-nl-subscribe--inline .sait-nl-subscribe__row {
    max-width: 440px;
    margin: 18px auto 0;
    gap: 9px;
}

.sait-nl-subscribe--inline .sait-nl-subscribe__input {
    min-height: 50px;
    border-radius: 10px;
}

.sait-nl-subscribe--inline .sait-nl-subscribe__button {
    min-height: 50px;
    padding: 12px 22px;
    border-radius: 10px;
}

.sait-nl-single .sait-nl-subscribe--inline {
    margin: 36px 0 0;
    max-width: none;
}

@media (max-width: 620px) {
    .sait-nl-main .sait-nl-hero__cta {
        flex-direction: column;
        align-items: stretch;
    }

    .sait-nl-subscribe--hero {
        max-width: none;
    }

    .sait-nl-subscribe--inline .sait-nl-subscribe__row {
        flex-direction: column;
    }

    .sait-nl-subscribe--inline .sait-nl-subscribe__button {
        width: 100%;
    }

    .sait-nl-subscribe--inline {
        padding: 26px 18px;
    }
}

/* =========================================================================
   Latest issue card

   Earlier versions gave this card a two column span. That never worked: the
   cover art is 2:1, the slot it had to fill was close to square, so either the
   wordmark got cropped off the sides or the card carried a block of empty
   space. The card is now the same size as every other one and is marked with
   the badge and an accent border instead, so the cover shows at its real
   ratio and the grid stays even.
   ====================================================================== */

.sait-nl-main .sait-nl-card--featured {
    border-color: var(--sait-nl-orange);
    box-shadow: 0 10px 26px rgba(255, 107, 26, .12);
}

/* =========================================================================
   Contribute block, below the closing subscribe CTA
   ====================================================================== */

.sait-nl-main .sait-nl-contribute {
    margin: 26px auto 0;
    text-align: center;
}

.sait-nl-main .sait-nl-contribute__title {
    margin: 0 0 12px;
    color: var(--sait-nl-muted);
    font-size: 14px;
    font-weight: 600;
}

.sait-nl-main .sait-nl-contribute__links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sait-nl-main .sait-nl-contribute .sait-nl-button {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 14px;
}

/* =========================================================================
   Mobile
   ====================================================================== */

@media (max-width: 720px) {
    .sait-nl-main .sait-nl-hero__inner {
        padding: 24px 0 26px;
    }

    .sait-nl-main .sait-nl-eyebrow {
        gap: 7px;
        margin-bottom: 14px;
        padding: 7px 12px;
        font-size: 11.5px;
    }

    .sait-nl-main .sait-nl-hero h1 {
        font-size: clamp(27px, 7.4vw, 34px);
        letter-spacing: -.03em;
    }

    .sait-nl-main .sait-nl-hero__lead {
        margin-top: 12px;
        font-size: 15px;
    }

    .sait-nl-main .sait-nl-hero__cta {
        margin-top: 18px;
        gap: 10px;
    }

    .sait-nl-main .sait-nl-hero__trust {
        font-size: 12px;
        line-height: 1.5;
    }

    /* The outline button is secondary, so it should not shout as loudly as the
       subscribe pill directly above it. */
    .sait-nl-main .sait-nl-hero__cta .sait-nl-button--outline {
        min-height: 46px;
        border-color: transparent;
        background: transparent;
        font-size: 14.5px;
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }

    .sait-nl-main .sait-nl-section-heading {
        gap: 6px;
    }

    .sait-nl-main .sait-nl-card__title {
        font-size: 17px;
    }

    .sait-nl-main .sait-nl-contribute__links {
        flex-direction: column;
        align-items: stretch;
    }

    .sait-nl-main .sait-nl-contribute .sait-nl-button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .sait-nl-main .sait-nl-eyebrow__sep,
    .sait-nl-main .sait-nl-eyebrow__accent + .sait-nl-eyebrow__sep {
        display: none;
    }
}

/* =========================================================================
   Contributor links in the hero, above the subscribe field
   ====================================================================== */

.sait-nl-main .sait-nl-hero__contribute {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

/* Deliberately lighter than the subscribe button. These sit directly above the
   primary CTA, so they have to read as secondary or they compete with it. */
.sait-nl-main .sait-nl-hero__contribute a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 15px;
    border: 1px solid #e3dcd4;
    border-radius: 999px;
    background: #fff;
    color: #45474f !important;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    transition: border-color .18s ease, color .18s ease;
}

.sait-nl-main .sait-nl-hero__contribute a:hover {
    border-color: var(--sait-nl-orange);
    color: var(--sait-nl-orange) !important;
}

@media (max-width: 720px) {
    .sait-nl-main .sait-nl-hero__contribute {
        margin-top: 14px;
        gap: 8px;
    }

    .sait-nl-main .sait-nl-hero__contribute a {
        min-height: 36px;
        padding: 7px 13px;
        font-size: 12.5px;
    }
}

/* =========================================================================
   Subscribe CTA: badge and benefit list
   ====================================================================== */

.sait-nl-subscribe__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 107, 26, .12);
    color: #c04d08;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
}

.sait-nl-subscribe__badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sait-nl-orange);
}

.sait-nl-subscribe--inline .sait-nl-subscribe__heading {
    font-size: clamp(23px, 2.1vw, 32px);
    font-weight: 700;
    letter-spacing: -.025em;
}

.sait-nl-subscribe__bullets {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.sait-nl-subscribe__bullets li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #4a4d56;
    font-size: 14px;
    line-height: 1.4;
}

/* Tick mark drawn in CSS so the list needs no icon font or SVG. */
.sait-nl-subscribe__bullets li::before {
    content: "";
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(255, 107, 26, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b1a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}

.sait-nl-subscribe--inline .sait-nl-subscribe__row {
    margin-top: 22px;
}

.sait-nl-subscribe--inline .sait-nl-subscribe__button {
    box-shadow: 0 8px 20px rgba(255, 107, 26, .28);
}

.sait-nl-subscribe--inline .sait-nl-subscribe__note {
    margin-top: 12px;
    font-size: 12.5px;
}

@media (max-width: 720px) {
    .sait-nl-subscribe--inline {
        margin-top: 40px;
        padding: 28px 20px 26px;
    }

    .sait-nl-subscribe__bullets {
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
        max-width: 320px;
        margin-inline: auto;
        text-align: left;
    }
}

/* What You'll Get + Why Subscribe (SEO audit, finding 4). */
.sait-nl-main .sait-nl-about {
    padding: 46px 0 6px;
}

.sait-nl-main .sait-nl-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sait-nl-main .sait-nl-benefit {
    margin: 0;
    padding: 20px 20px 18px;
    border: 1px solid var(--sait-nl-card-line);
    border-top: 3px solid var(--sait-nl-orange);
    border-radius: 12px;
    background: #fff;
}

.sait-nl-main .sait-nl-benefit h3 {
    margin: 0 0 6px;
    color: var(--sait-nl-ink);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.3;
}

.sait-nl-main .sait-nl-benefit p {
    margin: 0;
    color: var(--sait-nl-muted);
    font-size: 14px;
    line-height: 1.6;
}

.sait-nl-main .sait-nl-why {
    margin-top: 28px;
    padding: 24px 26px;
    border: 1px solid var(--sait-nl-line);
    border-radius: var(--sait-nl-radius);
    background: var(--sait-nl-cream);
}

.sait-nl-main .sait-nl-why h2 {
    margin: 0 0 12px;
    color: var(--sait-nl-ink);
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.sait-nl-main .sait-nl-why ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sait-nl-main .sait-nl-why li {
    position: relative;
    padding-left: 22px;
    color: #3c3f4a;
    font-size: 15px;
    line-height: 1.6;
}

.sait-nl-main .sait-nl-why li::before {
    content: "";
    position: absolute;
    top: .6em;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sait-nl-purple);
}

.sait-nl-main .sait-nl-why strong {
    color: var(--sait-nl-ink);
}

@media (max-width: 980px) {
    .sait-nl-main .sait-nl-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .sait-nl-main .sait-nl-about {
        padding-top: 32px;
    }

    .sait-nl-main .sait-nl-benefits,
    .sait-nl-main .sait-nl-why ul {
        grid-template-columns: 1fr;
    }

    .sait-nl-main .sait-nl-why {
        padding: 20px 18px;
    }
}

/* Single issue: smaller story images so the copy stays in view, and the
   issue intro that now sits above the story list. */
.sait-nl-issue-intro {
    margin: 0 0 26px;
    padding: 18px 20px;
    border-left: 3px solid var(--sait-nl-orange);
    border-radius: 0 12px 12px 0;
    background: var(--sait-nl-cream);
    color: #34353b;
    font-size: 17px;
    line-height: 1.7;
}

.sait-nl-issue-intro > :first-child { margin-top: 0; }
.sait-nl-issue-intro > :last-child { margin-bottom: 0; }

.sait-nl-issue-content .sait-nl-story__media,
body.admin-bar .sait-nl-issue-content .sait-nl-story__media {
    width: min(100%, 560px) !important;
    margin: 18px auto 20px !important;
}

.sait-nl-issue-content .sait-nl-story__media img:not(.emoji) {
    max-width: 560px;
}

.sait-nl-issue-content .sait-nl-story__copy img:not(.emoji) {
    display: block;
    width: auto;
    max-width: min(100%, 560px);
    height: auto;
    margin: 16px auto !important;
    border-radius: 12px;
}

@media (max-width: 720px) {
    .sait-nl-issue-intro {
        padding: 14px 16px;
        font-size: 15.8px;
    }

    .sait-nl-issue-content .sait-nl-story__media,
    body.admin-bar .sait-nl-issue-content .sait-nl-story__media {
        width: 100% !important;
        margin: 14px auto 16px !important;
    }

    .sait-nl-issue-content .sait-nl-story__media img:not(.emoji),
    .sait-nl-issue-content .sait-nl-story__copy img:not(.emoji) {
        max-width: 100%;
    }
}

/* Story images were forced into a 2:1 crop (object-fit: cover), which cut
   the headline text off square or 4:3 cover images. Show the whole image at
   its natural ratio instead; the 560px cap above keeps it compact. */
.sait-nl-issue-content .sait-nl-story__media img:not(.emoji),
.sait-nl-issue-content .sait-nl-story__copy img:not(.emoji) {
    aspect-ratio: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Benefits block now sits after the newsletter cards. */
.sait-nl-main .sait-nl-about {
    padding: 8px 0 72px;
    border-top: 1px solid var(--sait-nl-line);
    padding-top: 46px;
}

@media (max-width: 720px) {
    .sait-nl-main .sait-nl-about {
        padding: 32px 0 48px;
    }
}