/* =========================================================================
   iDeal Legal AI — Ghost theme
   1.  Design tokens
   2.  Reset & base
   3.  Utilities
   4.  Buttons & pills
   5.  Header & navigation
   6.  Reading progress
   7.  Hero & page heads
   8.  Sections
   9.  Post cards & feeds
   10. Featured card
   11. Categories
   12. Newsletter
   13. Pagination
   14. Post page & table of contents
   15. Post content typography
   16. Ghost editor cards
   17. Share, tags, author box, related
   18. Author profile & error page
   19. Footer
   20. Responsive
   21. Motion, focus & print
   ========================================================================= */

/* ---------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------- */

:root {
    /* Surfaces — sampled from ideallegal.ai */
    --color-background: #091021;
    --color-background-deep: #040810;
    --color-surface: #11151c;
    --color-surface-secondary: #161c2c;
    --color-surface-raised: #1a2030;

    /* Text */
    --color-text-primary: #f3f4f6;
    --color-text-secondary: #b5b8bd;
    --color-text-muted: #7d838f;

    /* Lines */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    /* Brand */
    --color-accent: #f59f0a;
    --color-accent-hover: #d98f14;
    --color-accent-soft: rgba(245, 159, 10, 0.12);
    --color-accent-border: rgba(245, 159, 10, 0.32);

    /* Primary action — the navy button used across the product site */
    --color-primary: #112349;
    --color-primary-hover: #17306a;
    --color-primary-text: #f8fafc;

    /* Layout */
    --container-width: 1200px;
    --content-width: 720px;
    --header-height: 72px;
    --gutter: 24px;

    /* Radii */
    --radius-small: 8px;
    --radius-medium: 14px;
    --radius-large: 22px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.28);
    --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 20px 48px rgba(0, 0, 0, 0.42);
    --shadow-header: 0 1px 0 var(--color-border);

    /* Type */
    --font-display: var(--gh-font-heading, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif);
    --font-body: var(--gh-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.88rem);
    --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.075rem);
    --step-1: clamp(1.14rem, 1.08rem + 0.3vw, 1.3rem);
    --step-2: clamp(1.35rem, 1.24rem + 0.55vw, 1.65rem);
    --step-3: clamp(1.6rem, 1.4rem + 1vw, 2.15rem);
    --step-4: clamp(2rem, 1.62rem + 1.9vw, 3.05rem);
    --step-5: clamp(2.35rem, 1.8rem + 2.7vw, 3.9rem);

    /* Rhythm */
    --space-section: clamp(56px, 7vw, 104px);
}

/* ---------------------------------------------------------------
   2. Reset & base
   --------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body::before {
    /* Ambient depth behind the hero, matching the product site's gradient */
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 620px;
    background:
        radial-gradient(60% 90% at 50% -10%, rgba(245, 159, 10, 0.07), transparent 65%),
        radial-gradient(90% 100% at 10% 0%, rgba(17, 35, 73, 0.55), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.site-main,
.site-header,
.site-footer {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.015em;
}

p {
    margin: 0 0 1.15em;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 0.18s ease;
}

a:hover {
    color: var(--color-accent);
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

img {
    height: auto;
    display: block;
}

ul, ol {
    margin: 0;
    padding: 0;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

hr {
    border: 0;
    height: 1px;
    background: var(--color-border);
    margin: 40px 0;
}

::selection {
    background: var(--color-accent);
    color: #0b0b0b;
}

/* ---------------------------------------------------------------
   3. Utilities
   --------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.container-narrow {
    max-width: calc(var(--content-width) + var(--gutter) * 2);
}

/*
   .is-theme-ideallegal and .feed-grid are namespace hooks on <body>.
   They carry no styles on purpose: .feed-grid is the default state (see
   .post-grid) and .is-theme-ideallegal exists so site owners can scope
   their own Code Injection CSS without fighting theme specificity.
*/

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 999;
    padding: 12px 18px;
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border: 1px solid var(--color-accent-border);
    border-radius: var(--radius-small);
}

.skip-link:focus {
    top: 16px;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Signature: the hairline-with-a-spark from the iDeal Legal AI lockup */
.rule-spark {
    display: block;
    position: relative;
    width: 100%;
    max-width: 560px;
    height: 1px;
    margin-top: 44px;
    background: linear-gradient(90deg, transparent, var(--color-border-strong) 18%, var(--color-accent) 50%, var(--color-border-strong) 82%, transparent);
}

.rule-spark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90px;
    height: 7px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(245, 159, 10, 0.5), transparent 70%);
}

.empty-note {
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
   4. Buttons & pills
   --------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    background: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.btn-sm {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 0.85rem;
}

.btn-primary {
    background: var(--color-primary);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-primary-text);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-primary-text);
}

.btn-outline {
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

.btn-outline:hover {
    border-color: var(--color-accent-border);
    color: var(--color-accent);
    background: var(--color-accent-soft);
}

.btn-ghost {
    padding-inline: 12px;
    color: var(--color-text-secondary);
}

.btn-ghost:hover {
    color: var(--color-text-primary);
}

.btn.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pill-accent {
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    color: var(--color-accent);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--color-text-secondary);
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.icon-btn:hover {
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
    background: rgba(255, 255, 255, 0.04);
}

/* ---------------------------------------------------------------
   5. Header & navigation
   --------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

.site-header.is-stuck,
.site-header.is-open {
    background: rgba(9, 16, 33, 0.86);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: var(--shadow-header);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--header-height);
    padding-block: 10px;
}

.header-brand {
    flex: 0 0 auto;
    margin-right: auto;
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-block: 6px;
    color: var(--color-text-primary);
}

.brand-logo {
    max-height: 34px;
    width: auto;
    object-fit: contain;
}

.brand-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-small);
}

.brand-title {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
}

.nav-item a {
    display: inline-block;
    padding: 8px 12px;
    border-radius: var(--radius-small);
    color: var(--color-text-secondary);
    font-size: 0.92rem;
    font-weight: 500;
}

.nav-item a:hover {
    color: var(--color-text-primary);
}

.nav-item.nav-current > a {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.nav-external .nav-back a {
    color: var(--color-text-muted);
}

.nav-external .nav-back a:hover {
    color: var(--color-accent);
}

.header-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.burger {
    display: none;
}

.burger .burger-close {
    display: none;
}

.site-header.is-open .burger .burger-open {
    display: none;
}

.site-header.is-open .burger .burger-close {
    display: inline-flex;
}

/* ---------------------------------------------------------------
   6. Reading progress
   --------------------------------------------------------------- */

.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 200;
    pointer-events: none;
}

.reading-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color-accent-hover), var(--color-accent));
    transition: width 0.1s linear;
}

body:not(.post-template) .reading-progress {
    display: none;
}

/* ---------------------------------------------------------------
   7. Hero & page heads
   --------------------------------------------------------------- */

.hero {
    padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 64px);
}

.hero-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 860px;
}

.hero-title {
    margin-top: 18px;
    font-size: var(--step-5);
    max-width: 16ch;
}

.hero-description {
    margin-top: 20px;
    max-width: 60ch;
    font-size: var(--step-1);
    color: var(--color-text-secondary);
}

.hero-actions {
    margin-top: 28px;
}

.hero-search {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 320px;
    max-width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    color: var(--color-text-muted);
    text-align: left;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.hero-search:hover {
    border-color: var(--color-accent-border);
    background: var(--color-surface-raised);
}

.hero-search-label {
    flex: 1 1 auto;
    font-size: 0.95rem;
}

.hero-search-kbd {
    padding: 3px 7px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.page-head {
    padding-block: clamp(48px, 6vw, 84px) clamp(28px, 3vw, 44px);
}

.page-title {
    margin-top: 14px;
    font-size: var(--step-4);
}

.page-description {
    margin-top: 16px;
    max-width: 62ch;
    font-size: var(--step-1);
}

.page-count {
    margin-top: 14px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
   8. Sections
   --------------------------------------------------------------- */

.featured,
.feed,
.categories,
.related {
    padding-block: clamp(28px, 4vw, 48px);
}

.related {
    margin-top: var(--space-section);
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-section);
    background: var(--color-background-deep);
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.section-title {
    font-size: var(--step-2);
}

.section-meta {
    font-size: 0.86rem;
    color: var(--color-text-muted);
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-accent);
}

.section-link:hover {
    color: var(--color-accent-hover);
}

/* ---------------------------------------------------------------
   9. Post cards & feeds
   --------------------------------------------------------------- */

.post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.post-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent-border);
    box-shadow: var(--shadow-card-hover);
}

.post-card-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-surface-secondary);
}

.post-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.post-card:hover .post-card-image {
    transform: scale(1.03);
}

.post-card-image-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background:
        linear-gradient(135deg, rgba(245, 159, 10, 0.08), transparent 60%),
        var(--color-surface-secondary);
}

.post-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    padding: 22px 22px 20px;
}

.post-card-tag,
.post-tag-label {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.post-card-title {
    font-size: var(--step-1);
    line-height: 1.3;
}

.post-card-excerpt {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.94rem;
}

.post-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
}

.author-avatar-lg {
    width: 32px;
    height: 32px;
}

.meta-dot {
    opacity: 0.5;
}

.meta-author,
.meta-reading {
    white-space: nowrap;
}

/* List layout variant (custom setting) */
.feed-list .post-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    max-width: 900px;
}

.feed-list .post-card {
    flex-direction: row;
}

.feed-list .post-card-media {
    flex: 0 0 260px;
    aspect-ratio: 4 / 3;
}

.feed-list .post-card-body {
    padding: 22px 26px;
}

/* ---------------------------------------------------------------
   10. Featured card
   --------------------------------------------------------------- */

.featured-card {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: linear-gradient(180deg, var(--color-surface-secondary), var(--color-surface));
    box-shadow: var(--shadow-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.featured-card:hover {
    border-color: var(--color-accent-border);
    box-shadow: var(--shadow-card-hover);
}

.featured-card-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-surface-secondary);
}

.featured-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-card-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(24px, 3vw, 40px);
}

.featured-card-tags {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.featured-card-title {
    font-size: var(--step-3);
}

.featured-card-excerpt {
    margin: 0;
    color: var(--color-text-secondary);
}

.featured-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-weight: 600;
    color: var(--color-accent);
}

/* ---------------------------------------------------------------
   11. Categories
   --------------------------------------------------------------- */

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
}

.category-item {
    display: flex;
}

.category-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 20px 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.category-card:hover {
    border-color: var(--color-accent-border);
    background: var(--color-surface-raised);
    transform: translateY(-2px);
}

.category-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.category-description {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
}

.category-count {
    margin-top: auto;
    padding-top: 8px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
   12. Newsletter
   --------------------------------------------------------------- */

.newsletter {
    margin-block: var(--space-section);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background:
        radial-gradient(90% 140% at 8% 0%, rgba(245, 159, 10, 0.09), transparent 62%),
        var(--color-surface);
    box-shadow: var(--shadow-card);
}

/* Single column on narrow screens; copy and form sit side by side once there is
   room for both, which halves the block's height and fills the card instead of
   leaving its right half empty. */
.newsletter-inner {
    display: grid;
    gap: clamp(20px, 3vw, 44px);
    padding: clamp(24px, 3.2vw, 40px);
}

@media (min-width: 860px) {
    .newsletter-inner {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
        align-items: center;
    }
}

.newsletter-copy {
    max-width: 46ch;
}

.newsletter-title {
    margin-top: 10px;
    font-size: var(--step-3);
}

.newsletter-description {
    margin-top: 10px;
    color: var(--color-text-secondary);
}

.newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Below this the field and button no longer fit on one line together, and a
   half-width button next to a stubby input looks accidental. */
@media (max-width: 420px) {
    .newsletter-button {
        flex: 1 0 100%;
    }
}

.newsletter-input {
    flex: 1 1 260px;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-background);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.newsletter-input::placeholder {
    color: var(--color-text-muted);
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.newsletter-button {
    min-height: 48px;
    flex: 0 0 auto;
}

.newsletter-label-loading {
    display: none;
}

.newsletter-form.loading .newsletter-label-idle {
    display: none;
}

.newsletter-form.loading .newsletter-label-loading {
    display: inline;
}

.newsletter-message {
    flex: 1 0 100%;
    display: none;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.9rem;
}

.newsletter-form.success .newsletter-message-success {
    display: flex;
    color: var(--color-accent);
}

.newsletter-form.error .newsletter-message-error {
    display: flex;
    color: #ff8f8f;
}

/* Consent block for the Mailchimp form. `flex: 1 0 100%` drops it onto its own
   row below the email field and button, which share the row above. */
.newsletter-consent {
    flex: 1 0 100%;
    margin-top: 2px;
}

.newsletter-consent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 52ch;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* The native checkbox renders as a light system control and reads as a rendering
   bug against the dark surface. appearance:none rebuilds it from the same border,
   radius and accent tokens as the email field it sits under. */
.newsletter-consent-check input[type="checkbox"] {
    appearance: none;
    display: grid;
    place-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 1px solid var(--color-border-strong);
    border-radius: 5px;
    background: var(--color-background);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.newsletter-consent-check input[type="checkbox"]:hover {
    border-color: var(--color-accent-border);
}

.newsletter-consent-check input[type="checkbox"]:checked {
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.newsletter-consent-check input[type="checkbox"]:checked::after {
    content: "";
    width: 4px;
    height: 8px;
    border: solid var(--color-background);
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}

.newsletter-consent-check input[type="checkbox"]:focus-visible {
    outline: none;
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.newsletter-consent-legal {
    margin-top: 8px;
    max-width: 52ch;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.newsletter-consent-legal a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--color-accent-soft);
}

.newsletter-consent-legal a:hover {
    border-bottom-color: var(--color-accent);
}

.newsletter-note {
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.newsletter-signed-in {
    margin-top: 18px;
}

.newsletter-signed-in a {
    color: var(--color-accent);
}

/* ---------------------------------------------------------------
   13. Pagination
   --------------------------------------------------------------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border);
}

.pagination-prev,
.pagination-next {
    min-width: 156px;
}

.pagination-status {
    font-size: 0.86rem;
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
   14. Post page & table of contents
   --------------------------------------------------------------- */

.post-header {
    padding-top: clamp(36px, 5vw, 64px);
}

.breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: 8px;
    opacity: 0.5;
}

.breadcrumbs a {
    color: var(--color-text-muted);
}

.breadcrumbs a:hover {
    color: var(--color-accent);
}

.post-tag-label {
    display: inline-block;
    margin-top: 18px;
}

.post-title {
    margin-top: 12px;
    font-size: var(--step-4);
}

.post-lede {
    margin-top: 18px;
    font-size: var(--step-1);
    color: var(--color-text-secondary);
}

.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.post-meta-author {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.meta-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.post-feature {
    margin: clamp(28px, 4vw, 44px) 0 0;
}

.post-feature-image {
    width: 100%;
    border-radius: var(--radius-large);
    border: 1px solid var(--color-border);
}

.post-feature figcaption {
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
}

.post-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, var(--content-width));
    justify-content: center;
    gap: 64px;
    padding-block: clamp(36px, 5vw, 60px);
}

.post-layout-single {
    grid-template-columns: minmax(0, var(--content-width));
}

.post-body {
    min-width: 0;
}

.toc {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--header-height) - 48px);
    overflow-y: auto;
    padding-right: 8px;
}

.toc-title {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 14px;
}

.toc-list {
    list-style: none;
    border-left: 1px solid var(--color-border);
}

.toc-list a {
    display: block;
    padding: 7px 0 7px 16px;
    margin-left: -1px;
    border-left: 1px solid transparent;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.4;
}

.toc-list a:hover {
    color: var(--color-text-primary);
}

.toc-list .toc-level-3 a {
    padding-left: 30px;
    font-size: 0.84rem;
}

.toc-list a.is-active {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
}

.toc-mobile {
    margin-bottom: 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

.toc-mobile-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-primary);
    list-style: none;
}

.toc-mobile-summary::-webkit-details-marker {
    display: none;
}

.toc-mobile nav {
    padding: 0 18px 14px;
}

.toc-mobile .toc-list {
    border-left: none;
}

/* ---------------------------------------------------------------
   15. Post content typography
   --------------------------------------------------------------- */

.post-content {
    font-size: 1.075rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
}

.post-content > * {
    margin-block: 0 1.5em;
}

.post-content > *:last-child {
    margin-bottom: 0;
}

.post-content h2 {
    margin-top: 2.2em;
    margin-bottom: 0.6em;
    font-size: var(--step-2);
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.post-content h3 {
    margin-top: 1.9em;
    margin-bottom: 0.5em;
    font-size: var(--step-1);
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.post-content h4 {
    margin-top: 1.7em;
    margin-bottom: 0.45em;
    font-size: 1.05rem;
    font-family: var(--font-body);
    letter-spacing: 0;
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.post-content a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--color-accent-border);
}

.post-content a:hover {
    color: var(--color-accent-hover);
    text-decoration-color: currentColor;
}

.post-content strong {
    color: var(--color-text-primary);
    font-weight: 700;
}

.post-content ul,
.post-content ol {
    padding-left: 1.4em;
}

.post-content li {
    margin-bottom: 0.6em;
}

.post-content li::marker {
    color: var(--color-accent);
}

.post-content blockquote {
    margin-inline: 0;
    padding: 4px 0 4px 26px;
    border-left: 3px solid var(--color-accent);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--color-text-primary);
}

.post-content blockquote.kg-blockquote-alt {
    border-left: none;
    text-align: center;
    padding-inline: 0;
}

.post-content figure {
    margin: 0 0 1.6em;
}

.post-content figcaption {
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
}

.post-content img {
    width: 100%;
    border-radius: var(--radius-medium);
}

.post-content hr {
    margin-block: 2.4em;
}

.post-content code {
    padding: 2px 6px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface-secondary);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.88em;
}

.post-content pre {
    overflow-x: auto;
    padding: 20px 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-background-deep);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 0.88rem;
    line-height: 1.6;
}

.post-content pre code {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

/* Tables — legal content leans on them heavily */
.post-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.post-content table th,
.post-content table td {
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.post-content table th {
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.post-content table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

/* Any wide table gets its own scroll container from main.js */
.table-scroll {
    overflow-x: auto;
    margin-bottom: 1.6em;
    border-radius: var(--radius-medium);
    -webkit-overflow-scrolling: touch;
}

.table-scroll table {
    margin-bottom: 0;
    min-width: 560px;
}

/* Footnotes */
.post-content .footnotes {
    margin-top: 3em;
    padding-top: 1.6em;
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.post-content .footnote-ref,
.post-content .footnote-backref {
    color: var(--color-accent);
    text-decoration: none;
}

/* ---------------------------------------------------------------
   16. Ghost editor cards
   --------------------------------------------------------------- */

.post-content .kg-card {
    margin-bottom: 1.6em;
}

.post-content .kg-width-wide {
    position: relative;
    width: calc(100% + 160px);
    max-width: 100vw;
    margin-inline: -80px;
}

.post-content .kg-width-full {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.post-content .kg-width-full img {
    border-radius: 0;
}

.post-content .kg-image {
    margin-inline: auto;
}

/* Bookmark */
.post-content .kg-bookmark-card {
    width: 100%;
}

.post-content .kg-bookmark-container {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: border-color 0.18s ease;
}

.post-content .kg-bookmark-container:hover {
    border-color: var(--color-accent-border);
}

.post-content .kg-bookmark-content {
    flex: 1 1 auto;
    padding: 20px 22px;
}

.post-content .kg-bookmark-title {
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: 700;
}

.post-content .kg-bookmark-description {
    margin-top: 6px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.post-content .kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.post-content .kg-bookmark-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.post-content .kg-bookmark-thumbnail {
    flex: 0 0 34%;
}

.post-content .kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* Callout */
.post-content .kg-callout-card {
    display: flex;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
}

.post-content .kg-callout-card-accent {
    border-color: var(--color-accent-border);
    background: var(--color-accent-soft);
}

.post-content .kg-callout-emoji {
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1.5;
}

.post-content .kg-callout-text {
    font-size: 0.98rem;
}

/* Toggle */
.post-content .kg-toggle-card {
    padding: 18px 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

.post-content .kg-toggle-heading-text {
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
}

.post-content .kg-toggle-card-icon {
    color: var(--color-accent);
}

.post-content .kg-toggle-content {
    color: var(--color-text-secondary);
}

/* Buttons */
.post-content .kg-button-card .kg-btn {
    min-height: 46px;
    padding: 12px 26px;
    border-radius: var(--radius-small);
    font-family: var(--font-body);
    font-weight: 600;
    background: var(--color-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-primary-text);
    text-decoration: none;
}

.post-content .kg-button-card .kg-btn:hover {
    background: var(--color-primary-hover);
    color: var(--color-primary-text);
}

.post-content .kg-button-card .kg-btn-accent {
    background: var(--color-accent);
    border-color: transparent;
    color: #0b0b0b;
}

.post-content .kg-button-card .kg-btn-accent:hover {
    background: var(--color-accent-hover);
    color: #0b0b0b;
}

/* Gallery */
.post-content .kg-gallery-image img {
    border-radius: var(--radius-small);
}

/* Audio, video, file, product, header */
.post-content .kg-audio-card,
.post-content .kg-file-card-container,
.post-content .kg-product-card-container {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.post-content .kg-file-card-title,
.post-content .kg-audio-title,
.post-content .kg-product-card-title {
    color: var(--color-text-primary);
}

.post-content .kg-file-card-caption,
.post-content .kg-file-card-metadata {
    color: var(--color-text-muted);
}

.post-content .kg-video-card,
.post-content .kg-embed-card {
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.post-content .kg-embed-card iframe {
    max-width: 100%;
    border: 0;
}

.post-content .kg-header-card {
    border-radius: var(--radius-large);
}

/* Members CTA rendered by the content helper */
.post-content .gh-post-upgrade-cta {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

/* ---------------------------------------------------------------
   17. Share, tags, author box, related
   --------------------------------------------------------------- */

.post-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid var(--color-border);
}

.post-share-label {
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.post-share-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.post-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.post-tags-label {
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.post-tags a {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.post-tags a:hover {
    border-color: var(--color-accent-border);
    color: var(--color-accent);
}

.author-box {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.author-box-avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
}

.author-box-name {
    margin-top: 6px;
    font-size: 1.15rem;
}

.author-box-bio {
    margin-top: 8px;
    font-size: 0.94rem;
}

.author-box-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 0.86rem;
}

.author-box-links a {
    color: var(--color-accent);
}

.post-back {
    margin-top: 36px;
}

/* ---------------------------------------------------------------
   18. Author profile & error page
   --------------------------------------------------------------- */

.author-profile {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 18px;
}

.author-profile-image {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
}

.author-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 16px;
    list-style: none;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.author-profile-meta a {
    color: var(--color-accent);
}

.error-page {
    padding-block: clamp(72px, 10vw, 140px) clamp(32px, 4vw, 56px);
    text-align: left;
}

.error-code {
    margin-top: 14px;
    font-size: clamp(3.4rem, 10vw, 6rem);
    line-height: 1;
}

.error-message {
    margin-top: 14px;
    font-size: var(--step-2);
    color: var(--color-text-primary);
    font-family: var(--font-display);
}

.error-help {
    margin-top: 10px;
    max-width: 52ch;
}

.error-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}

/* ---------------------------------------------------------------
   19. Footer
   --------------------------------------------------------------- */

.site-footer {
    margin-top: var(--space-section);
    padding-block: clamp(48px, 6vw, 80px) 32px;
    border-top: 1px solid var(--color-border);
    background: var(--color-background-deep);
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
    gap: 48px;
}

.footer-brand {
    min-width: 0;
}

.footer-product-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-weight: 600;
    color: var(--color-accent);
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.footer-heading {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 14px;
}

.footer-column .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.footer-column .nav-item a {
    padding: 5px 0;
    font-size: 0.92rem;
    color: var(--color-text-secondary);
}

.footer-column .nav-item.nav-current > a {
    background: none;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.92rem;
    color: var(--color-text-secondary);
}

.footer-social:hover {
    color: var(--color-accent);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    font-size: 0.84rem;
    color: var(--color-text-muted);
}

.footer-bottom p {
    margin: 0;
}

.footer-colophon a {
    color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------
   20. Responsive
   --------------------------------------------------------------- */

@media (max-width: 1280px) {
    .post-layout {
        gap: 44px;
        grid-template-columns: 220px minmax(0, var(--content-width));
    }

    .post-content .kg-width-wide {
        width: calc(100% + 80px);
        margin-inline: -40px;
    }
}

@media (max-width: 1100px) {
    .post-layout,
    .post-layout-single {
        grid-template-columns: minmax(0, var(--content-width));
        gap: 0;
    }

    .toc {
        display: none;
    }

    .post-content .kg-width-wide {
        width: 100%;
        margin-inline: 0;
    }
}

@media (max-width: 1024px) {
    :root {
        --header-height: 64px;
    }

    .post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .featured-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .featured-card-media {
        aspect-ratio: 16 / 8;
    }

    .footer-top {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    /* Mobile navigation */
    .burger {
        display: inline-flex;
    }

    .header-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        max-height: calc(100dvh - var(--header-height));
        overflow-y: auto;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 20px var(--gutter) 32px;
        background: rgba(9, 16, 33, 0.98);
        backdrop-filter: saturate(160%) blur(14px);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    }

    .site-header.is-open .header-nav {
        display: flex;
    }

    .header-nav .nav {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .header-nav .nav-item a {
        padding: 12px 12px;
        font-size: 1rem;
    }

    .nav-external {
        border-top: 1px solid var(--color-border);
        padding-top: 8px;
    }

    .header-nav-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding-top: 12px;
        border-top: 1px solid var(--color-border);
    }

    .header-nav-actions .btn {
        width: 100%;
    }

    body.nav-open {
        overflow: hidden;
    }

    .feed-list .post-card {
        flex-direction: column;
    }

    .feed-list .post-card-media {
        flex: 0 0 auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 768px) {
    :root {
        --gutter: 20px;
    }

    .post-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-search {
        min-width: 0;
        width: 100%;
    }

    .author-profile {
        flex-direction: column;
    }

    .post-content .kg-width-full img {
        border-radius: 0;
    }
}

@media (max-width: 560px) {
    :root {
        --gutter: 16px;
    }

    .category-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .brand-logo {
        max-height: 28px;
    }

    .brand-title {
        font-size: 1rem;
    }

    .author-box {
        flex-direction: column;
        gap: 14px;
    }

    .pagination {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .post-share {
        flex-direction: column;
        align-items: flex-start;
    }

    .newsletter-button {
        width: 100%;
    }
}

/* ---------------------------------------------------------------
   21. Motion, focus & print
   --------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .post-card:hover {
        transform: none;
    }

    .post-card:hover .post-card-image {
        transform: none;
    }
}

@media print {
    .site-header,
    .site-footer,
    .toc,
    .toc-mobile,
    .post-share,
    .newsletter,
    .related,
    .reading-progress {
        display: none !important;
    }

    body {
        background: #fff;
        color: #111;
    }

    .post-content,
    h1, h2, h3, h4 {
        color: #111;
    }
}


/* ---------------------------------------------------------------
   Hero illustration — iDeal Legal AI robot
   --------------------------------------------------------------- */
.home-template .hero-with-visual {
    padding-block: clamp(28px, 4vw, 54px) clamp(40px, 5vw, 68px);
    overflow: hidden;
}

.home-template .hero-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 76px);
    min-height: clamp(520px, 62vw, 720px);
}

.home-template .hero-visual {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
}

.home-template .hero-visual::before {
    content: "";
    position: absolute;
    width: min(560px, 115%);
    aspect-ratio: 1;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 159, 10, 0.13), rgba(16, 34, 73, 0.18) 42%, transparent 70%);
    filter: blur(8px);
    pointer-events: none;
}

.home-template .hero-robot {
    position: relative;
    z-index: 1;
    display: block;
    width: min(100%, 560px);
    max-height: 690px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.35));
}

.home-template .hero-inner {
    max-width: 720px;
}

@media (max-width: 900px) {
    .home-template .hero-layout {
        grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1fr);
        gap: 24px;
        min-height: 520px;
    }

    .home-template .hero-robot {
        max-height: 520px;
    }
}

@media (max-width: 720px) {
    .home-template .hero-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .home-template .hero-visual {
        order: 1;
        max-height: 410px;
        overflow: hidden;
    }

    .home-template .hero-inner {
        order: 2;
    }

    .home-template .hero-robot {
        width: min(82vw, 430px);
        max-height: 460px;
    }
}

@media (max-width: 480px) {
    .home-template .hero-with-visual {
        padding-top: 20px;
    }

    .home-template .hero-visual {
        max-height: 330px;
    }

    .home-template .hero-robot {
        width: min(94vw, 380px);
        max-height: 390px;
    }
}

/* ---------------------------------------------------------------
   22. Main-site header and footer parity
   One authoritative block. Geometry and colours measured from the
   ideallegal.ai header: 64px bar, #cbcbce background, #e5e7eb hairline,
   navy #112349 for the sign-in link and the primary button.
   Change the tokens below to retune the whole bar in one place.
   --------------------------------------------------------------- */

:root {
    --ms-bar-bg: #cbcbce;
    --ms-bar-border: #e5e7eb;
    --ms-bar-height: 64px;
    --ms-container: 1088px;
    --ms-navy: #112349;
    --ms-navy-hover: #17306a;
    --ms-ink: #0f1729;
    --ms-ink-muted: #4b5262;
    --ms-font-ui: var(--font-body);
}

/* ---- bar ---- */

.site-header.main-site-header,
.site-header.main-site-header.is-stuck,
.site-header.main-site-header.is-open {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--ms-bar-bg);
    border-bottom: 1px solid var(--ms-bar-border);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.main-header-shell {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: var(--ms-container);
    min-height: var(--ms-bar-height);
    margin-inline: auto;
    padding-inline: 20px;
}

/* ---- brand ---- */

.main-header-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
    color: var(--ms-ink);
    text-decoration: none;
}

.main-header-brand:hover {
    color: var(--ms-navy);
}

.main-header-mark {
    display: block;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-width: 32px;
    aspect-ratio: 1 / 1;
    /* Radius is set in section 26.10; the artwork is a disc. */
    border-radius: 8px;
    object-fit: cover;
}

.main-header-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ---- navigation ---- */

.main-header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex: 1 1 auto;
}

.main-header-nav a {
    display: inline-flex;
    align-items: center;
    padding: 6px 0;
    color: var(--ms-ink-muted);
    font-family: var(--ms-font-ui);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.main-header-nav a:hover,
.main-header-nav a[aria-current="page"] {
    color: var(--ms-navy);
}

.main-header-nav .main-header-founding {
    color: var(--ms-navy);
}

.main-header-nav .main-header-founding::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--ms-navy);
}

/* Blog links sit after a divider so main-site and blog nav stay distinct */
.main-header-nav .main-header-divider {
    width: 1px;
    height: 18px;
    background: rgba(17, 35, 73, 0.18);
    flex: 0 0 auto;
}

/* ---- actions ---- */

.main-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.main-header-signin {
    color: var(--ms-navy);
    font-family: var(--ms-font-ui);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.main-header-signin:hover {
    color: var(--ms-navy-hover);
}

.main-header-signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--ms-navy);
    color: #f8fafc;
    font-family: var(--ms-font-ui);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease;
}

.main-header-signup:hover {
    background: var(--ms-navy-hover);
    color: #f8fafc;
}

/* ---- icon buttons: search + burger ---- */

.main-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 1px solid rgba(17, 35, 73, 0.18);
    border-radius: 8px;
    background: transparent;
    color: var(--ms-navy);
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.main-header-icon:hover {
    background: rgba(17, 35, 73, 0.08);
    border-color: rgba(17, 35, 73, 0.32);
}

.main-header-menu {
    display: none;
}

.main-header-menu .burger-close {
    display: none;
}

.site-header.is-open .main-header-menu .burger-open {
    display: none;
}

.site-header.is-open .main-header-menu .burger-close {
    display: inline-flex;
}

.main-site-header :focus-visible {
    outline: 2px solid var(--ms-navy);
    outline-offset: 3px;
}

/* ---- mobile ---- */

@media (max-width: 1024px) {
    .main-header-menu {
        display: inline-flex;
    }

    .main-header-nav,
    .main-header-actions {
        position: fixed;
        left: 0;
        right: 0;
        display: none;
        background: var(--ms-bar-bg);
    }

    .site-header.is-open .main-header-nav,
    .site-header.is-open .main-header-actions {
        display: flex;
    }

    .main-header-nav {
        top: var(--ms-bar-height);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 20px 0;
        border-top: 1px solid var(--ms-bar-border);
        max-height: calc(100dvh - var(--ms-bar-height));
        overflow-y: auto;
    }

    .main-header-nav a {
        padding: 13px 0;
        font-size: 16px;
        border-bottom: 1px solid rgba(17, 35, 73, 0.08);
    }

    .main-header-nav .main-header-divider {
        width: 100%;
        height: 1px;
        margin: 6px 0;
        background: rgba(17, 35, 73, 0.18);
    }

    .main-header-actions {
        top: auto;
        bottom: 0;
        gap: 12px;
        padding: 14px 20px;
        border-top: 1px solid var(--ms-bar-border);
        box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.14);
    }

    .main-header-actions .main-header-signin,
    .main-header-actions .main-header-signup {
        flex: 1 1 0;
        justify-content: center;
        text-align: center;
    }

    .main-header-signin {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(17, 35, 73, 0.24);
        border-radius: 8px;
    }

    .main-header-signup {
        min-height: 44px;
    }

    body.nav-open {
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    .main-header-title {
        font-size: 16px;
    }

    .main-header-shell {
        gap: 12px;
        padding-inline: 16px;
    }
}

/* =========================================================
   Footer — dark, matching the main site
   ========================================================= */

.site-footer.main-site-footer {
    /* measured from the ideallegal.ai footer */
    background: #060c18;
    margin-top: var(--space-section);
    padding-block: clamp(40px, 5vw, 64px) 28px;
    border-top: 1px solid var(--color-border);
    background: var(--color-background-deep);
}

.footer-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    text-align: center;
}

.footer-appsource {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
}

.footer-appsource:hover {
    border-color: var(--color-accent-border);
    color: var(--color-text-primary);
}

.footer-appsource-label {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.footer-appsource-name {
    display: block;
    font-weight: 600;
}

.footer-link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 26px;
    max-width: 900px;
}

.footer-link-row a {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    text-decoration: none;
}

.footer-link-row a:hover {
    color: var(--color-accent);
}

.footer-link-row .footer-social {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.footer-link-row .footer-social svg {
    width: 16px;
    height: 16px;
}

.main-footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 22px;
    border-top: 1px solid var(--color-border);
    width: 100%;
}

.main-footer-bottom p {
    margin: 0;
    font-size: 0.84rem;
    color: var(--color-text-muted);
}

.main-footer-bottom a {
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.main-footer-bottom a:hover {
    color: var(--color-accent);
}

.footer-legal-note {
    max-width: 860px;
    margin-inline: auto !important;
    font-size: 0.76rem !important;
    line-height: 1.6;
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .footer-link-row {
        gap: 10px 18px;
    }

    .footer-link-row a {
        font-size: 0.86rem;
    }
}

/* ---------------------------------------------------------------
   23. Light reading pages — parity with ideallegal.ai inner pages
   Applies to posts and static pages only. The blog index keeps the
   dark hero, mirroring the way the product site pairs a dark landing
   page with light content pages such as /about.
   Colours sampled from https://ideallegal.ai/about
   --------------------------------------------------------------- */

body.post-template,
body.page-template {
    --lp-bg: #fbfaf8;
    --lp-heading: #101729;
    --lp-text: #6b7380;
    --lp-navy: #112349;
    --lp-navy-hover: #17306a;
    --lp-line: #e8e7e4;
    --lp-line-soft: #f0f0f1;
    --lp-surface: #ffffff;
    --lp-surface-alt: #f5f4f1;

    background: var(--lp-bg);
    color: var(--lp-text);
}

/* Kill the dark ambient gradient that sits behind the hero */
body.post-template::before,
body.page-template::before {
    display: none;
}

body.post-template h1,
body.post-template h2,
body.post-template h3,
body.post-template h4,
body.post-template h5,
body.post-template h6,
body.page-template h1,
body.page-template h2,
body.page-template h3,
body.page-template h4,
body.page-template h5,
body.page-template h6 {
    color: var(--lp-heading);
}

/* ---- header ----
   Deliberately NOT re-coloured for light pages. The grey #cbcbce bar from
   section 22 stays on every template: on a light page a near-white header
   would dissolve into the background and the navigation would lose its
   edge. Grey keeps the bar readable on both the dark index and the light
   article pages, and matches the bar on the product site's landing page. */

/* ---- article head ---- */

body.post-template .breadcrumbs a,
body.page-template .breadcrumbs a,
body.post-template .breadcrumbs ol,
body.page-template .breadcrumbs ol {
    color: var(--lp-text);
}

body.post-template .breadcrumbs a:hover {
    color: var(--lp-navy);
}

body.post-template .post-tag-label,
body.post-template .eyebrow,
body.page-template .eyebrow {
    color: var(--lp-navy);
}

body.post-template .post-lede,
body.page-template .page-description {
    color: var(--lp-text);
}

body.post-template .post-meta,
body.post-template .post-meta-author {
    color: var(--lp-text);
}

body.post-template .post-meta-author {
    color: var(--lp-heading);
}

body.post-template .author-avatar,
body.page-template .author-avatar {
    border-color: var(--lp-line);
}

body.post-template .post-feature-image,
body.page-template .post-feature-image {
    border-color: var(--lp-line);
}

body.post-template .post-feature figcaption,
body.page-template .post-feature figcaption {
    color: var(--lp-text);
}

body.post-template .rule-spark,
body.page-template .rule-spark {
    background: linear-gradient(90deg, transparent, var(--lp-line) 18%, var(--lp-navy) 50%, var(--lp-line) 82%, transparent);
}

body.post-template .rule-spark::after,
body.page-template .rule-spark::after {
    background: radial-gradient(ellipse at center, rgba(17, 35, 73, 0.28), transparent 70%);
}

/* ---- body copy ---- */

body.post-template .post-content,
body.page-template .post-content {
    color: var(--lp-text);
}

body.post-template .post-content strong,
body.page-template .post-content strong {
    color: var(--lp-heading);
}

body.post-template .post-content a,
body.page-template .post-content a {
    color: var(--lp-navy);
    text-decoration-color: rgba(17, 35, 73, 0.35);
}

body.post-template .post-content a:hover,
body.page-template .post-content a:hover {
    color: var(--lp-navy-hover);
}

body.post-template .post-content li::marker,
body.page-template .post-content li::marker {
    color: var(--lp-navy);
}

body.post-template .post-content blockquote,
body.page-template .post-content blockquote {
    border-left-color: var(--lp-navy);
    color: var(--lp-heading);
}

body.post-template .post-content hr,
body.page-template .post-content hr {
    background: var(--lp-line);
}

body.post-template .post-content figcaption,
body.page-template .post-content figcaption {
    color: var(--lp-text);
}

/* ---- code and tables ---- */

body.post-template .post-content code,
body.page-template .post-content code {
    background: var(--lp-surface-alt);
    border-color: var(--lp-line);
    color: var(--lp-navy);
}

body.post-template .post-content pre,
body.page-template .post-content pre {
    background: #0f1729;
    border-color: #0f1729;
    color: #e6e8ee;
}

body.post-template .post-content pre code,
body.page-template .post-content pre code {
    color: inherit;
}

body.post-template .post-content table th,
body.post-template .post-content table td,
body.page-template .post-content table th,
body.page-template .post-content table td {
    border-color: var(--lp-line);
}

body.post-template .post-content table th,
body.page-template .post-content table th {
    background: var(--lp-surface-alt);
    color: var(--lp-heading);
}

body.post-template .post-content table tr:nth-child(even) td,
body.page-template .post-content table tr:nth-child(even) td {
    background: rgba(17, 35, 73, 0.03);
}

/* ---- editor cards ---- */

body.post-template .post-content .kg-bookmark-container,
body.page-template .post-content .kg-bookmark-container,
body.post-template .post-content .kg-toggle-card,
body.post-template .post-content .kg-audio-card,
body.post-template .post-content .kg-file-card-container,
body.post-template .post-content .kg-product-card-container {
    background: var(--lp-surface);
    border-color: var(--lp-line);
    color: var(--lp-text);
}

body.post-template .post-content .kg-bookmark-title,
body.post-template .post-content .kg-toggle-heading-text,
body.post-template .post-content .kg-file-card-title,
body.post-template .post-content .kg-audio-title,
body.post-template .post-content .kg-product-card-title {
    color: var(--lp-heading);
}

body.post-template .post-content .kg-bookmark-description,
body.post-template .post-content .kg-toggle-content {
    color: var(--lp-text);
}

body.post-template .post-content .kg-bookmark-metadata,
body.post-template .post-content .kg-file-card-caption,
body.post-template .post-content .kg-file-card-metadata {
    color: #8b909b;
}

body.post-template .post-content .kg-callout-card,
body.page-template .post-content .kg-callout-card {
    background: var(--lp-surface-alt);
    border-color: var(--lp-line);
    color: var(--lp-text);
}

body.post-template .post-content .kg-callout-card-accent {
    background: rgba(17, 35, 73, 0.06);
    border-color: rgba(17, 35, 73, 0.18);
}

body.post-template .post-content .kg-toggle-card-icon {
    color: var(--lp-navy);
}

/* ---- table of contents ---- */

body.post-template .toc-title {
    color: #8b909b;
}

body.post-template .toc-list {
    border-left-color: var(--lp-line);
}

body.post-template .toc-list a {
    color: #8b909b;
}

body.post-template .toc-list a:hover {
    color: var(--lp-heading);
}

body.post-template .toc-list a.is-active {
    color: var(--lp-navy);
    border-left-color: var(--lp-navy);
}

body.post-template .toc-mobile {
    background: var(--lp-surface);
    border-color: var(--lp-line);
}

body.post-template .toc-mobile-summary {
    color: var(--lp-heading);
}

body.post-template .reading-progress-bar {
    background: linear-gradient(90deg, var(--lp-navy), var(--lp-navy-hover));
}

/* ---- share, tags, author, back link ---- */

body.post-template .post-share {
    border-top-color: var(--lp-line);
}

body.post-template .post-share-label,
body.post-template .post-tags-label {
    color: #8b909b;
}

body.post-template .btn-outline {
    border-color: rgba(17, 35, 73, 0.22);
    color: var(--lp-heading);
}

body.post-template .btn-outline:hover {
    background: rgba(17, 35, 73, 0.06);
    border-color: rgba(17, 35, 73, 0.4);
    color: var(--lp-navy);
}

body.post-template .post-tags a {
    background: var(--lp-surface);
    border-color: var(--lp-line);
    color: var(--lp-text);
}

body.post-template .post-tags a:hover {
    border-color: rgba(17, 35, 73, 0.35);
    color: var(--lp-navy);
}

body.post-template .author-box {
    background: var(--lp-surface);
    border-color: var(--lp-line);
}

body.post-template .author-box-avatar {
    border-color: var(--lp-line);
}

body.post-template .author-box-bio {
    color: var(--lp-text);
}

body.post-template .author-box-links a,
body.post-template .section-link {
    color: var(--lp-navy);
}

body.post-template .author-box-links a:hover,
body.post-template .section-link:hover {
    color: var(--lp-navy-hover);
}

/* ---- newsletter and related posts on light pages ---- */

body.post-template .newsletter,
body.page-template .newsletter {
    background: var(--lp-surface);
    border-color: var(--lp-line);
    box-shadow: 0 1px 2px rgba(16, 23, 41, 0.05), 0 12px 32px rgba(16, 23, 41, 0.06);
}

body.post-template .newsletter-description,
body.page-template .newsletter-description {
    color: var(--lp-text);
}

body.post-template .newsletter-input,
body.page-template .newsletter-input {
    background: var(--lp-bg);
    border-color: rgba(17, 35, 73, 0.22);
    color: var(--lp-heading);
}

body.post-template .newsletter-input::placeholder,
body.page-template .newsletter-input::placeholder {
    color: #9aa0aa;
}

body.post-template .newsletter-input:focus,
body.page-template .newsletter-input:focus {
    border-color: var(--lp-navy);
    box-shadow: 0 0 0 3px rgba(17, 35, 73, 0.12);
}

/* The consent block is built from the dark palette, which leaves an invisible
   border and a near-black checkbox on these light pages. Restated in the light
   tokens, mirroring what the email field above it already does. */
body.post-template .newsletter-consent-check,
body.page-template .newsletter-consent-check {
    color: var(--lp-heading);
}

body.post-template .newsletter-consent-check input[type="checkbox"],
body.page-template .newsletter-consent-check input[type="checkbox"] {
    background: var(--lp-bg);
    border-color: rgba(17, 35, 73, 0.22);
}

body.post-template .newsletter-consent-check input[type="checkbox"]:hover,
body.page-template .newsletter-consent-check input[type="checkbox"]:hover {
    border-color: var(--lp-navy);
}

body.post-template .newsletter-consent-check input[type="checkbox"]:checked,
body.page-template .newsletter-consent-check input[type="checkbox"]:checked {
    background: var(--lp-navy);
    border-color: var(--lp-navy);
}

body.post-template .newsletter-consent-check input[type="checkbox"]:checked::after,
body.page-template .newsletter-consent-check input[type="checkbox"]:checked::after {
    border-color: var(--lp-surface);
}

body.post-template .newsletter-consent-check input[type="checkbox"]:focus-visible,
body.page-template .newsletter-consent-check input[type="checkbox"]:focus-visible {
    border-color: var(--lp-navy);
    box-shadow: 0 0 0 3px rgba(17, 35, 73, 0.12);
}

body.post-template .newsletter-consent-legal,
body.page-template .newsletter-consent-legal {
    color: #8b909b;
}

body.post-template .newsletter-consent-legal a,
body.page-template .newsletter-consent-legal a {
    color: var(--lp-navy);
    border-bottom-color: rgba(17, 35, 73, 0.25);
}

body.post-template .newsletter-form.success .newsletter-message-success {
    color: var(--lp-navy);
}

body.post-template .related {
    background: var(--lp-surface-alt);
    border-top-color: var(--lp-line);
}

body.post-template .related .post-card {
    background: var(--lp-surface);
    border-color: var(--lp-line);
    box-shadow: 0 1px 2px rgba(16, 23, 41, 0.05), 0 10px 26px rgba(16, 23, 41, 0.06);
}

body.post-template .related .post-card:hover {
    border-color: rgba(17, 35, 73, 0.3);
}

body.post-template .related .post-card-tag {
    color: var(--lp-navy);
}

body.post-template .related .post-card-excerpt,
body.post-template .related .post-card-meta {
    color: var(--lp-text);
}

body.post-template .related .post-card-media,
body.post-template .related .post-card-image-fallback {
    background: var(--lp-surface-alt);
}

/* ---- focus ring on light background ---- */

body.post-template :focus-visible,
body.page-template :focus-visible {
    outline-color: var(--lp-navy);
}

/* ---------------------------------------------------------------
   24. Article column alignment
   The two-column grid used to reserve 250px + 64px on the left, which
   pushed the body text 157px to the right of the title and lede on every
   desktop width. The reading column is now centred in the page exactly
   like .container-narrow, and the contents panel is lifted out into the
   left gutter, so the title and the body share one left edge.
   --------------------------------------------------------------- */

.post-layout,
.post-layout-single {
    display: grid;
    grid-template-columns: minmax(0, var(--content-width));
    justify-content: center;
    gap: 0;
}

.post-body {
    grid-column: 1;
    grid-row: 1;
}

.toc {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    width: 232px;
    /* pull the panel entirely into the gutter left of the text column */
    margin-left: calc(-1 * (232px + 56px));
}

/* Below this width the gutter can no longer hold the panel without
   colliding with the text, so the inline contents block takes over. */
@media (max-width: 1360px) {
    .toc {
        display: none;
    }
}

/* ===============================================================
   26. Alignment with the product site — August revision
   Every rule here is an override appended on purpose: nothing above
   is deleted, so the Mailchimp form markup, the members-off wiring
   and the article layout fixes all keep working untouched.
   Colours sampled from the live site screenshots.
   =============================================================== */

/* ---------------------------------------------------------------
   26.1 Outer margins — blog content lines up with the header shell,
   which already matches the product site's container.
   --------------------------------------------------------------- */

:root {
    --container-width: 1088px;
    --gutter: 20px;
}

/* ---------------------------------------------------------------
   26.2 Header on article and static pages
   Matches the inner pages of the product site: #fbfaf9 bar with an
   #e5e7eb hairline, rather than the grey bar used over the dark index.
   --------------------------------------------------------------- */

body.post-template .site-header.main-site-header,
body.page-template .site-header.main-site-header,
body.post-template .site-header.main-site-header.is-stuck,
body.page-template .site-header.main-site-header.is-stuck,
body.post-template .site-header.main-site-header.is-open,
body.page-template .site-header.main-site-header.is-open {
    background: #fbfaf9;
    border-bottom: 1px solid #e5e7eb;
}

body.post-template .main-header-brand,
body.page-template .main-header-brand,
body.post-template .main-header-signin,
body.page-template .main-header-signin {
    color: #0f1729;
}

body.post-template .main-header-nav a,
body.page-template .main-header-nav a {
    color: #6b7280;
}

body.post-template .main-header-nav a:hover,
body.page-template .main-header-nav a:hover,
body.post-template .main-header-nav a[aria-current="page"],
body.page-template .main-header-nav a[aria-current="page"] {
    color: #112349;
}

body.post-template .main-header-nav .main-header-founding,
body.page-template .main-header-nav .main-header-founding {
    color: #112349;
}

body.post-template .main-header-divider,
body.page-template .main-header-divider {
    background: rgba(17, 35, 73, 0.16);
}

@media (max-width: 1024px) {
    body.post-template .main-header-nav,
    body.page-template .main-header-nav,
    body.post-template .main-header-actions,
    body.page-template .main-header-actions {
        background: #fbfaf9;
    }
}

/* ---------------------------------------------------------------
   26.3 Breadcrumbs — chevron separator and a home icon, per the
   product site. Applies to the standalone bar on the blog index and
   to the existing crumbs on article, tag and author pages.
   --------------------------------------------------------------- */

.breadcrumbs li + li::before {
    content: "";
    width: 13px;
    height: 13px;
    margin-right: 2px;
    background-color: currentColor;
    opacity: 0.55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 5 16 12 9 19'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 5 16 12 9 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

.breadcrumbs ol {
    font-size: 0.9rem;
}

.breadcrumbs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.breadcrumbs [aria-current="page"] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.breadcrumbs-standalone {
    padding-top: 26px;
}

/* On the light templates the crumbs take the product site's greys. */
body.post-template .breadcrumbs [aria-current="page"],
body.page-template .breadcrumbs [aria-current="page"] {
    color: #0f1729;
}

body.post-template .breadcrumbs a,
body.page-template .breadcrumbs a,
body.post-template .breadcrumbs ol,
body.page-template .breadcrumbs ol {
    color: #6b7280;
}

/* ---------------------------------------------------------------
   26.4 "Written by" — the author eyebrow was too faint against the
   article background.
   --------------------------------------------------------------- */

.author-box .eyebrow {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    opacity: 1;
}

body.post-template .author-box .eyebrow {
    color: #0f1729;
}

body.post-template .author-box-name a {
    color: #0f1729;
}

body.post-template .author-box-name a:hover {
    color: #112349;
}

/* ---------------------------------------------------------------
   26.5 Newsletter — the original card, narrowed and re-stacked
   The full-bleed navy panel from the first pass is gone. The card
   keeps its border, radius and gold wash from section 12; the only
   changes are a narrower measure and a centred single column instead
   of copy-left / form-right. Markup untouched: the Mailchimp action
   URL, EMAIL field, gdpr[7] box, tags value and bot trap are as they
   were.
   --------------------------------------------------------------- */

.newsletter {
    max-width: 760px;
    margin-inline: auto;
}

/* One column at every width — the card is now too narrow for the
   side-by-side arrangement to look deliberate. This has to repeat the
   860px query, because the original two-column rule lives inside one
   and a plain rule cannot outrank it by order alone. */
@media (min-width: 860px) {
    .newsletter-inner {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }
}

.newsletter-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 26px);
    padding: clamp(26px, 3.4vw, 40px);
    text-align: center;
}

.newsletter-copy {
    max-width: 48ch;
    margin-inline: auto;
}

.newsletter-description {
    margin-inline: auto;
}

.newsletter-form {
    justify-content: center;
}

.newsletter-input {
    flex: 0 1 300px;
}

.newsletter-consent {
    max-width: 46ch;
    margin-inline: auto;
    text-align: left;
}

/* ---------------------------------------------------------------
   26.6 Footer — badge on top, links left, company notice right,
   trademark line underneath, per the product site.
   --------------------------------------------------------------- */

.site-footer.main-site-footer {
    background: #060c18;
    padding-block: clamp(40px, 5vw, 60px) 28px;
}

.footer-shell {
    display: block;
    text-align: left;
}

.footer-appsource {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-inline: auto;
    margin-bottom: 34px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: #11151c;
}

/* the badge is the only centred element in the footer */
.footer-shell > .footer-appsource {
    display: flex;
    width: max-content;
}

.footer-appsource .ms-logo {
    flex: 0 0 auto;
}

.footer-appsource-text {
    display: block;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px 48px;
}

.footer-link-row {
    justify-content: flex-start;
    gap: 12px 26px;
    max-width: none;
}

.footer-legal-col p {
    margin: 0 0 6px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.footer-legal-col p:last-child {
    margin-bottom: 0;
}

.footer-legal-col a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.footer-legal-col a:hover {
    color: var(--color-accent);
}

.footer-legal-note {
    margin: 30px 0 0;
    max-width: 980px;
    margin-inline: auto;
    font-size: 0.74rem;
    line-height: 1.6;
    color: #6f7684;
    text-align: center;
}

@media (max-width: 860px) {
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .footer-link-row {
        justify-content: center;
        text-align: center;
    }

    .footer-legal-col {
        text-align: center;
    }
}

/* ---------------------------------------------------------------
   26.7 Blog hero — tighter vertical padding
   Roughly a third off the top and bottom. Only the padding changes;
   the layout's min-height, which sets the robot's scale, is untouched.
   --------------------------------------------------------------- */

.home-template .hero-with-visual {
    padding-block: clamp(16px, 2.4vw, 34px) clamp(24px, 3.2vw, 44px);
}

@media (max-width: 480px) {
    .home-template .hero-with-visual {
        padding-top: 14px;
    }
}

/* ---------------------------------------------------------------
   26.8 August revision, second pass
   --------------------------------------------------------------- */

/* --- Header shell width -------------------------------------------------
   Single source of truth for how wide the bar runs. If the blog bar still
   does not line up with the product site, change this one number and the
   content container below follows it. */
:root {
    --ms-container: 1280px;
    --container-width: 1280px;
}

/* --- Minimal logo mark --------------------------------------------------
   The mark is now a plain disc with no gold frame, so it stays legible at
   32px instead of turning into a bright square. */
.main-header-mark {
    border-radius: 50%;
    background: transparent;
}

/* --- Hero: half the height ---------------------------------------------
   The search field is gone from the markup, so the column needs less room.
   min-height is what actually drives the block's size; the padding tweak
   from 26.7 alone could not halve it. */
.home-template .hero-layout {
    min-height: clamp(260px, 31vw, 360px);
    gap: clamp(20px, 3.5vw, 52px);
}

.home-template .hero-with-visual {
    padding-block: clamp(12px, 1.8vw, 26px) clamp(18px, 2.4vw, 34px);
}

.home-template .hero-inner .rule-spark {
    margin-top: 26px;
}

@media (max-width: 860px) {
    .home-template .hero-layout {
        min-height: 0;
    }
}

/* ---------------------------------------------------------------
   26.9 Feature image matches the reading column
   The image sat in a full .container, which is now 1280px wide, while
   the text column is 720px — so the picture overhung the article by
   roughly 280px on each side. Constraining the wrapper rather than the
   image itself keeps the caption centred under the picture.
   --------------------------------------------------------------- */

.post-feature > .container {
    max-width: calc(var(--content-width) + var(--gutter) * 2);
}

/* ---------------------------------------------------------------
   26.10 Blog hero — title and illustration scaled down by 1.5x
   The hero block was halved in 1.5.0 but the type and the robot kept
   their old scale, so both crowded the shorter block. Every value here
   is the previous one divided by 1.5.
   --------------------------------------------------------------- */

.home-template .hero-title {
    /* was clamp(2.35rem, 1.8rem + 2.7vw, 3.9rem) */
    font-size: clamp(1.57rem, 1.2rem + 1.8vw, 2.6rem);
    max-width: 20ch;
}

.home-template .hero-robot {
    /* was min(100%, 560px) / max-height 690px */
    width: min(100%, 373px);
    max-height: 460px;
}

.home-template .hero-visual::before {
    /* the glow behind the figure follows it down */
    width: min(373px, 115%);
}

@media (max-width: 1024px) {
    .home-template .hero-robot {
        max-height: 347px;
    }
}

@media (max-width: 720px) {
    .home-template .hero-visual {
        max-height: 273px;
    }
}