:root {
    --content-width: 760px;
    --wide-width: 1120px;
    --border: #e5e5e5;
    --text: #222222;
    --muted: #666666;
    --bg: #ffffff;
    --bg-soft: #f7f7f5;
    --link: #174a3c;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--text);
    background: var(--bg);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
}

a {
    color: var(--link);
}

.site-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border);
    background: #ffffff;
}

.site-logo {
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1;
}

.site-nav a,
.site-account a {
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
}

.site-nav a:hover,
.site-account a:hover {
    text-decoration: underline;
}

.site-main {
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: 3rem 2rem;
}

.simple-page,
.home-hero {
    max-width: var(--content-width);
}

.eyebrow {
    margin: 0 0 0.5rem;
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.page-header h1,
.home-hero h1 {
    margin: 0 0 1rem;
    font-size: 2.5rem;
    line-height: 1.15;
}

.page-intro,
.home-hero p {
    font-size: 1.15rem;
    color: var(--muted);
}

.page-content {
    margin-top: 2rem;
}

.page-content h2 {
    margin-top: 2.5rem;
    line-height: 1.25;
}

.page-content h3 {
    margin-top: 2rem;
    line-height: 1.3;
}

.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.page-content th,
.page-content td {
    border: 1px solid var(--border);
    padding: 0.7rem;
    vertical-align: top;
}

.page-content th {
    background: var(--bg-soft);
    text-align: left;
}

.button {
    display: inline-block;
    margin-right: 0.75rem;
    margin-top: 1rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--link);
    border-radius: 6px;
    background: var(--link);
    color: #ffffff;
    text-decoration: none;
}

.button-secondary {
    background: #ffffff;
    color: var(--link);
}

.site-footer {
    border-top: 1px solid var(--border);
    padding: 2rem;
    color: var(--muted);
    font-size: 0.9rem;
}

@media (max-width: 800px) {
    .site-header {
        display: block;
    }

    .site-nav {
        margin-top: 1rem;
    }

    .site-main {
        padding: 2rem 1rem;
    }

    .page-header h1,
    .home-hero h1 {
        font-size: 2rem;
    }
}

/* Ghost content image width helpers */
.kg-width-wide {
    max-width: 960px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.kg-width-full {
    max-width: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.kg-width-full img,
.kg-width-wide img {
    width: 100%;
    height: auto;
}

/* Manual shell layout */
.manual-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 760px) 220px;
    gap: 3rem;
    max-width: 1320px;
    margin: 0 auto;
    padding: 2rem;
}

.guide-sidebar {
    font-size: 0.9rem;
}

.guide-sidebar h2 {
    margin: 1.5rem 0 0.4rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.guide-sidebar a {
    display: block;
    padding: 0.25rem 0;
    color: var(--text);
    text-decoration: none;
}

.guide-sidebar a:hover {
    text-decoration: underline;
}

.manual-content {
    min-width: 0;
}

.breadcrumbs {
    margin-bottom: 1rem;
    color: var(--muted);
    font-size: 0.85rem;
}

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

.breadcrumbs span {
    margin-left: 0.35rem;
}

.page-eyebrow {
    margin: 0 0 0.5rem;
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.manual-body {
    margin-top: 2rem;
}

.manual-body h2 {
    margin-top: 2.5rem;
    line-height: 1.25;
}

.manual-body h3 {
    margin-top: 2rem;
    line-height: 1.3;
}

.manual-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.manual-body th,
.manual-body td {
    border: 1px solid var(--border);
    padding: 0.7rem;
    vertical-align: top;
}

.manual-body th {
    background: var(--bg-soft);
    text-align: left;
}

.on-this-page {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    font-size: 0.85rem;
}

.on-this-page-title {
    margin: 0 0 0.5rem;
    color: var(--muted);
    font-weight: 700;
}

.on-this-page a {
    display: block;
    padding: 0.25rem 0;
    color: var(--muted);
    text-decoration: none;
}

.on-this-page a:hover {
    color: var(--text);
}

.on-this-page .toc-subitem {
    padding-left: 1rem;
}

/* Reusable content components */
.action-block {
    border: 1px solid var(--border);
    border-left: 4px solid #888;
    padding: 1.25rem;
    margin: 2rem 0;
    background: #ffffff;
}

.action-block h2 {
    margin-top: 0;
}

.worked-example {
    border: 1px solid var(--border);
    background: var(--bg-soft);
    padding: 1.25rem;
    margin: 2rem 0;
}

.worked-example .eyebrow {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

.figure-panel {
    border: 1px solid var(--border);
    padding: 1rem;
    margin: 2rem 0;
    background: #ffffff;
}

.figure-panel img {
    max-width: 100%;
    height: auto;
}

.figure-caption {
    margin-top: 0.75rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.member-prompt {
    border: 1px solid var(--border);
    background: var(--bg-soft);
    padding: 1.25rem;
    margin: 2rem 0;
}

/* Mobile behaviour */
@media (max-width: 1100px) {
    .manual-layout {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .on-this-page {
        display: none;
    }
}

@media (max-width: 800px) {
    .manual-layout {
        display: block;
        padding: 1rem;
    }

    .guide-sidebar {
        border-bottom: 1px solid var(--border);
        padding-bottom: 1rem;
        margin-bottom: 2rem;
    }
}

/* Current page highlight in left workflow navigation */
.guide-sidebar a.is-active {
    font-weight: 700;
    color: var(--link);
}

/* Keep the left workflow navigation visible on desktop */
@media (min-width: 801px) {
    .guide-sidebar {
        position: sticky;
        top: 1.5rem;
        align-self: start;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
        padding-right: 0.5rem;
    }
}

/* Refined component emphasis */
.action-block {
    border-left-color: var(--link);
}

.worked-example {
    background: #f3f8f4;
}

/* Theory-to-practice callout */
.theory-callout {
    border: 1px solid var(--border);
    border-left: 4px solid var(--link);
    background: #f7faf7;
    padding: 1.25rem;
    margin: 2rem 0;
}

.theory-callout .eyebrow {
    margin-bottom: 0.5rem;
}

/* Figure panel refinement */
.figure-panel {
    background: #ffffff;
}

.figure-panel-title {
    margin: 0 0 0.75rem;
    font-weight: 700;
}

.figure-placeholder {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border);
    background: var(--bg-soft);
    color: var(--muted);
    text-align: center;
    padding: 1rem;
}

/* Stronger orientation states */
.guide-sidebar a.is-active {
    font-weight: 700;
    color: var(--link);
    background: #eef5ef;
    border-radius: 4px;
    padding-left: 0.35rem;
}

/* Right-hand active heading */
.on-this-page a.is-active {
    font-weight: 700;
    color: var(--link);
}

/* Make component headings in the right nav visibly subordinate */
.on-this-page a.toc-component {
    padding-left: 0.75rem;
    border-left: 2px solid var(--border);
    margin-left: 0.15rem;
}

.on-this-page a.toc-action {
    border-left-color: #6f9f7a;
}

.on-this-page a.toc-example {
    border-left-color: #9bbf9f;
}

.on-this-page a.toc-theory {
    border-left-color: #6f9f7a;
}

/* Softer component palette for MVP testing */
.action-block {
    background: #f8fbf8;
    border-left-color: #6f9f7a;
}

.theory-callout {
    background: #f7faf7;
    border-left-color: #6f9f7a;
}

.worked-example {
    background: #f3f8f4;
}

/* Slightly softer captions and metadata */
.example-meta,
.figure-caption {
    color: var(--muted);
    font-size: 0.9rem;
}

/* Refined manual table styling */
.manual-body table th {
    background: #edf5ef;
    color: var(--text);
}

.manual-body table tbody tr:nth-child(even) {
    background: #fafdfb;
}

.manual-body table caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Prevent wide tables from breaking the manual layout */
.manual-content,
.manual-body {
    min-width: 0;
    max-width: 100%;
}

.manual-body .table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
}

.manual-body .table-wrap table {
    width: max-content;
    min-width: 100%;
    max-width: none;
    margin: 0;
}

.manual-body .worked-example .table-wrap {
    max-width: 100%;
}

.manual-body .worked-example table {
    font-size: 0.88rem;
}

/* Add a subtle cue that wide tables can scroll */
.manual-body .table-wrap::after {
    content: "Scroll table horizontally if needed";
    display: block;
    margin-top: 0.4rem;
    color: var(--muted);
    font-size: 0.78rem;
}

/* Wide table scroll cue */
.manual-body .table-wrap {
    position: relative;
    border: 1px solid var(--border);
    background: #ffffff;
    padding-bottom: 1.6rem;
}

.manual-body .table-wrap::after {
    content: "Scroll sideways to view full table →";
    position: sticky;
    left: 0;
    display: block;
    padding: 0.45rem 0.65rem 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-style: italic;
    background: linear-gradient(to top, #ffffff 80%, rgba(255,255,255,0));
}

.manual-body .table-wrap::before {
    content: "";
    position: sticky;
    right: 0;
    float: right;
    width: 2.5rem;
    height: 100%;
    min-height: 3rem;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.95));
    z-index: 2;
}

/* Previous / next manual navigation */
.next-prev {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 3rem 0 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.next-prev-link {
    display: block;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    background: #ffffff;
}

.next-prev-link:hover {
    border-color: #9bbf9f;
    background: #f7faf7;
}

.next-prev-link span {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.next-prev-link.next {
    text-align: right;
}

@media (max-width: 700px) {
    .next-prev {
        grid-template-columns: 1fr;
    }

    .next-prev-link.next {
        text-align: left;
    }
}

/* Revised wide table treatment */
.manual-body .table-scroll-note {
    margin: 0.75rem 0 0.35rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-style: italic;
}

.manual-body .table-wrap {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 1px solid var(--border);
    background: #ffffff;
    box-shadow: inset -18px 0 18px -18px rgba(0, 0, 0, 0.28);
}

.manual-body .table-wrap::before,
.manual-body .table-wrap::after {
    content: none !important;
}

.manual-body .table-wrap table {
    width: max-content;
    min-width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
}

.manual-body .table-wrap table th:first-child,
.manual-body .table-wrap table td:first-child {
    border-left: 0;
}

.manual-body .table-wrap table th:last-child,
.manual-body .table-wrap table td:last-child {
    border-right: 0;
}

/* Logic chain component */
.logic-chain {
    border: 1px solid var(--border);
    border-left: 4px solid #6f9f7a;
    background: #f8fbf8;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0 2rem;
}

.logic-chain p:last-child {
    margin-bottom: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

/* Refined table scroll note */
.manual-body .table-scroll-note {
    display: none;
    margin: 0.6rem 0 0.25rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.35;
}

.manual-body .table-wrap.is-scrollable {
    box-shadow: inset -18px 0 18px -18px rgba(0, 0, 0, 0.22);
}

/* Stronger conditional table scroll note */
.manual-body .table-scroll-note,
.gh-content .table-scroll-note,
.table-scroll-note {
    display: none !important;
    margin: 0.35rem 0 0.25rem !important;
    color: var(--muted) !important;
    font-size: 0.82rem !important;
    font-style: italic !important;
    line-height: 1.35 !important;
}

.manual-body .table-scroll-note.is-visible,
.gh-content .table-scroll-note.is-visible,
.table-scroll-note.is-visible {
    display: block !important;
}

.manual-body .table-wrap.is-scrollable,
.gh-content .table-wrap.is-scrollable,
.table-wrap.is-scrollable {
    box-shadow: inset -18px 0 18px -18px rgba(0, 0, 0, 0.22);
}

/* Manual wrapping tables for readable 2-column guide tables */
.manual-table {
    margin: 1.25rem 0 2rem;
}

.manual-table table {
    width: 100%;
    border-collapse: collapse;
}

.manual-table caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.manual-table th,
.manual-table td {
    white-space: normal;
    vertical-align: top;
}
EOFcd ~/Documents/LFA-Ghost-Step-Automation

python3 - <<'PY'
from pathlib import Path
import re

path = Path("content/steps/test-step-1-identify-record-assets/index.html")
text = path.read_text()

new_table = '''<!--kg-card-begin: html-->
<div class="manual-table">
  <table>
    <caption>Step 1 outputs</caption>
    <thead>
      <tr>
        <th>Output</th>
        <th>Purpose</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Asset Register</td>
        <td>A structured table, GIS layer or asset-management database containing the assets in scope and the fields needed to manage them.</td>
      </tr>
      <tr>
        <td>Hierarchy and Classification</td>
        <td>The classification framework used to organise the register.</td>
      </tr>
      <tr>
        <td>Data Summary Table</td>
        <td>A field-by-field summary of data coverage, currency and confidence.</td>
      </tr>
      <tr>
        <td>Improvement Action List</td>
        <td>A short, prioritised list of data improvements for the next AMP cycle.</td>
      </tr>
      <tr>
        <td>Chapter 1 of the AMP</td>
        <td>A written explanation of what council manages, how the register is structured and how confidently the data is known.</td>
      </tr>
    </tbody>
  </table>
</div>
<!--kg-card-end: html-->'''

# Remove all existing Step 1 outputs tables, whether ordinary, scroll-wrapped, or manual-table.
patterns = [
    r'<!--kg-card-begin: html-->\s*<div class="manual-table">\s*<table>\s*<caption>Step 1 outputs</caption>.*?</table>\s*</div>\s*<!--kg-card-end: html-->',
    r'<!--kg-card-begin: html-->\s*<div class="table-scroll-note">Scroll sideways to view full table.*?</div>\s*<div class="table-wrap">\s*<table>\s*<caption>Step 1 outputs</caption>.*?</table>\s*</div>\s*<!--kg-card-end: html-->',
    r'<div class="table-scroll-note">Scroll sideways to view full table.*?</div>\s*<div class="table-wrap">\s*<table>\s*<caption>Step 1 outputs</caption>.*?</table>\s*</div>',
    r'<table>\s*<caption>Step 1 outputs</caption>.*?</table>',
]

for pattern in patterns:
    text = re.sub(pattern, '', text, flags=re.DOTALL)

# Insert the clean table immediately before "What you need".
marker = '<h3 class="toc-include">What you need</h3>'
if marker not in text:
    raise SystemExit('Could not find marker: What you need')

text = text.replace(marker, new_table + '\n\n' + marker, 1)

# Clean excess blank lines.
text = re.sub(r'\n{4,}', '\n\n\n', text)

path.write_text(text)
print("Fixed Step 1 outputs table in local index.html.")
PY
cd ~/Documents/"Ghost Themes"/lfa-manual

cat >> assets/css/screen.css <<'EOF'

/* Manual wrapping tables for readable 2-column guide tables */
.manual-table {
    margin: 1.25rem 0 2rem;
}

.manual-table table {
    width: 100%;
    border-collapse: collapse;
}

.manual-table caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.manual-table th,
.manual-table td {
    white-space: normal;
    vertical-align: top;
}

/* Active page in left-hand guide sidebar */
.guide-sidebar a.is-active {
    font-weight: 700;
    color: var(--text);
}

/* Active top navigation */
.site-header a.is-active,
header a.is-active {
    font-weight: 700;
    color: var(--text);
}

/* Active sidebar section heading */
.guide-sidebar h2.is-active-section {
    color: var(--text);
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* Optional subtle visual cue for active sidebar section */
.guide-sidebar h2.is-active-section::before {
    content: "";
    display: inline-block;
    width: 0.35rem;
    height: 0.35rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: #6f9f7a;
    vertical-align: middle;
}

/* Wide framework figure */
.wide-figure {
    width: 100%;
    overflow-x: auto;
    padding: 0.5rem 0;
}

.wide-figure img {
    display: block;
    width: 100%;
    min-width: 900px;
    height: auto;
    border-radius: 0.75rem;
}

/* Responsive framework figure */
.wide-figure {
    width: 100%;
    overflow-x: visible;
    padding: 0.5rem 0;
}

.wide-figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

/* Responsive framework figure — contained version */
.figure-panel .wide-figure {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
    padding: 0.5rem 0;
}

.figure-panel .wide-figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0.75rem;
}

/* Keep figure panels inside the article column */
.guide-content .figure-panel,
.guide-article .figure-panel,
.post-content .figure-panel {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.guide-content .figure-panel .wide-figure,
.guide-article .figure-panel .wide-figure,
.post-content .figure-panel .wide-figure {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.guide-content .figure-panel .wide-figure img,
.guide-article .figure-panel .wide-figure img,
.post-content .figure-panel .wide-figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Contained figure for diagrams that must not overflow into side navigation */
.contained-figure {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.contained-figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Contained figure for diagrams that must not overflow into side navigation */
.contained-figure {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.contained-figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Mobile pathway cue for first three top navigation links */
@media (max-width: 767px) {
    .site-header nav a:nth-of-type(1)::after,
    .site-header nav a:nth-of-type(2)::after,
    .site-nav a:nth-of-type(1)::after,
    .site-nav a:nth-of-type(2)::after {
        content: " →";
        margin-left: 0.45rem;
        margin-right: 0.15rem;
        opacity: 0.65;
        font-weight: 600;
    }
}

/* Tighten mobile top navigation pathway */
@media (max-width: 767px) {
    .site-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .site-header nav,
    .site-nav {
        margin-left: 0;
        padding-left: 0;
        column-gap: 0.65rem;
        row-gap: 0.65rem;
    }

    .site-header nav a,
    .site-nav a {
        margin-left: 0;
        margin-right: 0;
        white-space: nowrap;
    }

    .site-header nav a:nth-of-type(1)::after,
    .site-header nav a:nth-of-type(2)::after,
    .site-nav a:nth-of-type(1)::after,
    .site-nav a:nth-of-type(2)::after {
        content: "→";
        margin-left: 0.35rem;
        margin-right: 0;
        opacity: 0.55;
        font-weight: 500;
    }
}

/* LFA typography: Inter-first system font stack */
:root {
    --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html,
body,
button,
input,
textarea,
select {
    font-family: var(--font-sans);
}

.site-header,
.guide-sidebar,
.on-this-page,
.page-header,
.post-content,
.guide-content,
.guide-article,
.kg-card,
table {
    font-family: var(--font-sans);
}

/* Custom access gate cards */
.access-card {
    margin: 2rem 0;
    padding: 3rem 2rem;
    border-radius: 0.9rem;
    text-align: center;
    background: #eef5ef;
    border: 1px solid rgba(45, 91, 59, 0.18);
    color: var(--text, #1f2933);
}

.access-card-paid {
    background: #f3f0e7;
    border-color: rgba(122, 84, 31, 0.2);
}

.access-eyebrow {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #50735a;
}

.access-card-paid .access-eyebrow {
    color: #7a541f;
}

.access-card h2 {
    margin: 0 0 1rem;
}

.access-card p {
    margin-left: auto;
    margin-right: auto;
    max-width: 36rem;
}

.access-button {
    display: inline-block;
    margin: 1rem 0;
    padding: 0.75rem 1.1rem;
    border-radius: 0.45rem;
    background: #2f6f3e;
    color: #fff;
    font-weight: 750;
    text-decoration: none;
}

.access-card-paid .access-button {
    background: #7a541f;
}

.access-button:hover {
    text-decoration: none;
    opacity: 0.92;
}

.access-small {
    font-size: 0.95rem;
}

.access-small a {
    font-weight: 750;
}

/* Site footer */
.site-footer {
    margin-top: 4rem;
    border-top: 1px solid rgba(31, 41, 51, 0.12);
    background: #f7faf8;
}

.site-footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
    gap: 2rem;
}

.site-footer-title {
    margin: 0 0 0.4rem;
    font-weight: 800;
    color: #173f26;
}

.site-footer-description {
    margin: 0 0 0.7rem;
    max-width: 34rem;
    color: #4b5f52;
}

.site-footer-copyright {
    margin: 0;
    font-size: 0.9rem;
    color: #66736a;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem 1.1rem;
    align-content: start;
}

.site-footer-links a {
    color: #2f6f3e;
    text-decoration: none;
    font-weight: 650;
    font-size: 0.95rem;
}

.site-footer-links a:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .site-footer-inner {
        grid-template-columns: 1fr;
        padding: 2rem 1rem;
    }

    .site-footer-links {
        justify-content: flex-start;
        gap: 0.65rem 1rem;
    }
}

/* LFA Guide design tokens */
:root {
    --lfa-deep-green: #245534;
    --lfa-green: #2f6f3e;
    --lfa-soft-green: #eef5ef;
    --lfa-leaf: #8fa348;

    --lfa-teal: #1f6270;
    --lfa-soft-teal: #e8f3f4;

    --lfa-warm: #f3f0e7;
    --lfa-warm-strong: #7a541f;

    --lfa-ink: #1f2933;
    --lfa-muted: #607064;
    --lfa-border: rgba(31, 41, 51, 0.12);
    --lfa-background: #f7faf8;
}

/* Gentle brand alignment */
body {
    color: var(--lfa-ink);
    background: #fff;
}

a {
    color: var(--lfa-green);
}

.page-eyebrow,
.eyebrow {
    color: var(--lfa-green);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
}

.manual-content h1,
.manual-content h2,
.manual-content h3 {
    color: var(--lfa-deep-green);
}

/* LFA component polish */
.theory-callout,
.logic-chain {
    border-radius: 0.9rem;
    border: 1px solid rgba(47, 111, 62, 0.18);
}

.theory-callout {
    background: var(--lfa-soft-green);
}

.logic-chain {
    background: #f8fbf8;
}

.figure-panel {
    border-radius: 0.9rem;
    border: 1px solid var(--lfa-border);
    background: #fff;
}

.figure-panel-title {
    color: var(--lfa-deep-green);
    font-weight: 800;
}

.figure-caption {
    color: var(--lfa-muted);
}

.access-card {
    border-radius: 1rem;
}

.access-card-free {
    background: var(--lfa-soft-green);
}

.access-card-paid {
    background: var(--lfa-warm);
}

/* Softer custom access cards */
.access-card {
    background: #f4f8f5;
    border: 1px solid rgba(47, 111, 62, 0.18);
    color: #1f2933;
    box-shadow: none;
}

.access-card-paid {
    background: #f7f3ea;
    border-color: rgba(122, 84, 31, 0.2);
}

.access-card h2,
.access-card p {
    color: #1f2933;
}

.access-button {
    background: #2f6f3e;
    color: #ffffff;
}

.access-card-paid .access-button {
    background: #7a541f;
    color: #ffffff;
}

/* LFA Guide design system */
:root {
    --lfa-deep-green: #245534;
    --lfa-green: #2f6f3e;
    --lfa-soft-green: #eef5ef;
    --lfa-leaf: #8fa348;

    --lfa-teal: #1f6270;
    --lfa-soft-teal: #e8f3f4;

    --lfa-warm: #f3f0e7;
    --lfa-warm-strong: #7a541f;

    --lfa-ink: #1f2933;
    --lfa-muted: #607064;
    --lfa-border: rgba(31, 41, 51, 0.12);
    --lfa-background: #f7faf8;
}

/* Base brand alignment */
body {
    color: var(--lfa-ink);
    background: #fff;
}

a {
    color: var(--lfa-green);
}

.page-eyebrow,
.eyebrow {
    color: var(--lfa-green);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
}

.manual-content h1,
.manual-content h2,
.manual-content h3 {
    color: var(--lfa-deep-green);
}

.manual-content h1 {
    letter-spacing: -0.03em;
}

.manual-content h2 {
    letter-spacing: -0.02em;
}

/* LFA component polish */
.theory-callout,
.logic-chain {
    border-radius: 0.9rem;
    border: 1px solid rgba(47, 111, 62, 0.18);
}

.theory-callout {
    background: var(--lfa-soft-green);
}

.logic-chain {
    background: #f8fbf8;
}

.logic-chain .eyebrow,
.theory-callout .eyebrow {
    color: var(--lfa-green);
}

.figure-panel {
    border-radius: 0.9rem;
    border: 1px solid var(--lfa-border);
    background: #fff;
}

.figure-panel-title {
    color: var(--lfa-deep-green);
    font-weight: 800;
}

.figure-caption {
    color: var(--lfa-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* LFA table polish */
.manual-table table,
.table-wrap table {
    border-color: var(--lfa-border);
}

.manual-table caption,
.table-wrap caption {
    color: var(--lfa-deep-green);
    font-weight: 750;
}

.manual-table th,
.table-wrap th {
    background: var(--lfa-soft-green);
    color: var(--lfa-ink);
    font-weight: 750;
}

.manual-table td,
.table-wrap td {
    border-color: rgba(31, 41, 51, 0.10);
}

.table-scroll-note {
    color: var(--lfa-muted);
    font-size: 0.9rem;
    font-style: italic;
}

/* Softer access cards */
.access-card {
    background: #f4f8f5;
    border: 1px solid rgba(47, 111, 62, 0.18);
    color: var(--lfa-ink);
    box-shadow: none;
}

.access-card-paid {
    background: var(--lfa-warm);
    border-color: rgba(122, 84, 31, 0.2);
}

.access-card h2,
.access-card p {
    color: var(--lfa-ink);
}

.access-button {
    background: var(--lfa-green);
    color: #ffffff;
}

.access-card-paid .access-button {
    background: var(--lfa-warm-strong);
    color: #ffffff;
}

/* Header and footer refinement */
.site-header {
    border-bottom-color: var(--lfa-border);
}

.site-header a {
    color: var(--lfa-ink);
}

.site-header a:hover {
    color: var(--lfa-green);
}

.site-footer {
    background: var(--lfa-background);
    border-top-color: var(--lfa-border);
}

.site-footer-title,
.site-footer-links a {
    color: var(--lfa-deep-green);
}

.site-footer-description,
.site-footer-copyright {
    color: var(--lfa-muted);
}

/* Self-hosted Inter font */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Landing page */
.landing-page {
    background: #fff;
}

.landing-hero {
    max-width: 1240px;
    margin: 0 auto;
    padding: 5rem 1.5rem 4rem;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    gap: 3rem;
    align-items: center;
}

.landing-eyebrow {
    margin: 0 0 1rem;
    color: var(--lfa-green);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.landing-hero h1 {
    max-width: 820px;
    margin: 0;
    color: var(--lfa-deep-green);
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.landing-lede {
    max-width: 720px;
    margin: 1.5rem 0 0;
    color: var(--lfa-muted);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.45;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

.landing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0.8rem 1.05rem;
    border-radius: 0.45rem;
    font-weight: 750;
    text-decoration: none;
}

.landing-button-primary {
    background: var(--lfa-deep-green);
    color: #fff;
}

.landing-button-secondary {
    border: 1px solid rgba(47, 111, 62, 0.45);
    color: var(--lfa-deep-green);
    background: #fff;
}

.landing-button-link {
    color: var(--lfa-green);
    background: transparent;
}

.landing-button:hover {
    text-decoration: none;
    opacity: 0.92;
}

.landing-hero-panel {
    padding: 1.5rem;
    border: 1px solid rgba(47, 111, 62, 0.18);
    border-radius: 1rem;
    background: var(--lfa-soft-green);
}

.landing-panel-label {
    margin: 0 0 1rem;
    color: var(--lfa-green);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.landing-hero-panel ol {
    margin: 0;
    padding-left: 1.35rem;
}

.landing-hero-panel li {
    margin: 0.55rem 0;
    font-weight: 700;
    color: var(--lfa-ink);
}

.landing-section {
    max-width: 1240px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    border-top: 1px solid var(--lfa-border);
}

.landing-section-header {
    max-width: 820px;
}

.landing-section h2 {
    margin: 0;
    color: var(--lfa-deep-green);
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.landing-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    max-width: 980px;
}

.landing-two-column p,
.landing-framework-note {
    color: var(--lfa-ink);
    font-size: 1.1rem;
    line-height: 1.65;
}

.landing-card-grid,
.landing-access-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.landing-card,
.landing-access-card {
    padding: 1.35rem;
    border: 1px solid rgba(31, 41, 51, 0.12);
    border-radius: 0.9rem;
    background: #fff;
}

.landing-card h3,
.landing-access-card h3 {
    margin: 0 0 0.75rem;
    color: var(--lfa-deep-green);
    font-size: 1.15rem;
}

.landing-card p,
.landing-access-card p {
    margin: 0;
    color: var(--lfa-muted);
    line-height: 1.55;
}

.landing-framework {
    background: var(--lfa-background);
    max-width: none;
}

.landing-framework > * {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

.landing-framework-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.landing-framework-strip div {
    padding: 1.4rem;
    border-radius: 0.9rem;
    background: #fff;
    border: 1px solid rgba(47, 111, 62, 0.18);
}

.landing-framework-strip span {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--lfa-green);
    font-size: 0.8rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-framework-strip strong {
    display: block;
    color: var(--lfa-deep-green);
    font-size: 1.3rem;
}

.landing-framework-strip p {
    margin: 0.5rem 0 0;
    color: var(--lfa-muted);
}

.landing-framework-note {
    margin-top: 1.4rem;
}

.landing-access-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.landing-access-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-access-label {
    margin-bottom: 0.7rem !important;
    color: var(--lfa-green) !important;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-access-card-paid {
    background: var(--lfa-warm);
    border-color: rgba(122, 84, 31, 0.2);
}

.landing-access-card-paid .landing-access-label {
    color: var(--lfa-warm-strong) !important;
}

.landing-access-card a {
    margin-top: auto;
    padding-top: 1.2rem;
    color: var(--lfa-green);
    font-weight: 800;
    text-decoration: none;
}

.landing-access-card a:hover {
    text-decoration: underline;
}

.landing-audience-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 2rem;
}

.landing-audience-list span {
    padding: 0.65rem 0.9rem;
    border-radius: 999px;
    background: var(--lfa-soft-green);
    color: var(--lfa-deep-green);
    font-weight: 750;
}

.landing-final-cta {
    margin-bottom: 0;
    padding-bottom: 5rem;
}

.landing-final-cta h2 {
    max-width: 900px;
}

@media (max-width: 920px) {
    .landing-hero,
    .landing-two-column,
    .landing-framework-strip,
    .landing-access-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 640px) {
    .landing-hero {
        padding-top: 3rem;
    }

    .landing-card-grid {
        grid-template-columns: 1fr;
    }

    .landing-section {
        padding: 3rem 1rem;
    }
}

/* Landing page refinement: reduce green heaviness and improve rhythm */
.landing-hero {
    padding-top: 5.5rem;
    padding-bottom: 5rem;
}

.landing-hero h1 {
    color: var(--lfa-ink);
    letter-spacing: -0.035em;
    font-weight: 820;
    max-width: 860px;
}

.landing-lede {
    color: #4f5f55;
    max-width: 760px;
}

.landing-section h2 {
    color: var(--lfa-ink);
    letter-spacing: -0.025em;
    font-weight: 800;
}

.landing-eyebrow {
    color: var(--lfa-green);
}

.landing-button-primary {
    background: var(--lfa-deep-green);
}

.landing-button-secondary {
    background: #fff;
}

/* Quieter hero guide pathway panel */
.landing-hero-panel {
    background: #f5f8f5;
    border-color: rgba(47, 111, 62, 0.14);
    box-shadow: 0 12px 32px rgba(31, 41, 51, 0.06);
}

.landing-hero-panel li {
    color: var(--lfa-ink);
}

/* Softer problem section */
.landing-problem {
    background: #fff;
}

/* Quieter cards */
.landing-card,
.landing-access-card {
    border-color: rgba(31, 41, 51, 0.10);
    box-shadow: 0 8px 24px rgba(31, 41, 51, 0.035);
}

.landing-card h3,
.landing-access-card h3 {
    color: var(--lfa-ink);
}

/* Give the 3x3 Framework section a stronger but calm identity */
.landing-framework {
    background: linear-gradient(180deg, #eef5ef 0%, #f7faf8 100%);
    border-top: 1px solid rgba(47, 111, 62, 0.14);
    border-bottom: 1px solid rgba(47, 111, 62, 0.14);
}

.landing-framework .landing-section-header h2 {
    color: var(--lfa-deep-green);
}

.landing-framework-strip div {
    border-color: rgba(47, 111, 62, 0.16);
    box-shadow: 0 10px 28px rgba(31, 41, 51, 0.05);
}

.landing-framework-strip strong {
    color: var(--lfa-ink);
}

/* Make access section clearer without making it harsh */
.landing-access {
    background: #fff;
}

.landing-access-card-paid {
    background: #f7f3ea;
}

.landing-access-card-paid h3 {
    color: var(--lfa-ink);
}

/* Audience chips lighter */
.landing-audience-list span {
    background: #f2f7f3;
    color: var(--lfa-ink);
    border: 1px solid rgba(47, 111, 62, 0.12);
}

/* Final CTA: subtle panel feel */
.landing-final-cta {
    background: #f7faf8;
    max-width: none;
    padding-left: max(1.5rem, calc((100vw - 1240px) / 2 + 1.5rem));
    padding-right: max(1.5rem, calc((100vw - 1240px) / 2 + 1.5rem));
}

.landing-final-cta > * {
    max-width: 900px;
}

/* Prevent oversized compressed feel on narrower screens */
@media (max-width: 640px) {
    .landing-hero h1 {
        letter-spacing: -0.025em;
    }

    .landing-hero {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

/* Landing typography refinement: less compressed, less heavy */
.landing-hero h1 {
    font-weight: 720;
    letter-spacing: -0.02em;
    line-height: 1.08;
    max-width: 760px;
}

.landing-section h2 {
    font-weight: 720;
    letter-spacing: -0.015em;
    line-height: 1.18;
}

.landing-card h3,
.landing-access-card h3,
.landing-framework-strip strong {
    font-weight: 700;
}

.landing-lede {
    font-weight: 430;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .landing-hero h1 {
        font-weight: 700;
        letter-spacing: -0.015em;
        line-height: 1.1;
    }
}

/* Landing institutional line */
.landing-institution {
    margin: -0.4rem 0 1.1rem;
    color: var(--lfa-muted);
    font-size: 0.98rem;
    font-weight: 600;
}

/* Contextual conversion CTAs */
.conversion-cta {
    margin: 3rem 0 0;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(47, 111, 62, 0.18);
    background: #f4f8f5;
}

.conversion-cta-paid {
    background: #f7f3ea;
    border-color: rgba(122, 84, 31, 0.2);
}

.conversion-eyebrow {
    margin: 0 0 0.75rem;
    color: var(--lfa-green);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.conversion-cta-paid .conversion-eyebrow {
    color: var(--lfa-warm-strong);
}

.conversion-cta h2 {
    margin: 0;
    max-width: 760px;
    color: var(--lfa-ink);
    font-size: clamp(1.45rem, 2.5vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.conversion-cta p {
    max-width: 760px;
    margin: 1rem 0 0;
    color: var(--lfa-muted);
    line-height: 1.6;
}

.conversion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.4rem;
}

.conversion-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.7rem 1rem;
    border-radius: 0.45rem;
    font-weight: 750;
    text-decoration: none;
}

.conversion-button-primary {
    background: var(--lfa-deep-green);
    color: #fff;
}

.conversion-cta-paid .conversion-button-primary {
    background: var(--lfa-warm-strong);
}

.conversion-button-secondary {
    background: #fff;
    border: 1px solid rgba(47, 111, 62, 0.35);
    color: var(--lfa-deep-green);
}

.conversion-button:hover {
    text-decoration: none;
    opacity: 0.92;
}

@media (max-width: 640px) {
    .conversion-cta {
        padding: 1.5rem;
    }

    .conversion-actions {
        flex-direction: column;
        align-items: stretch;
    }

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

/* Linked pathway items inside sequence callouts */
.logic-chain a {
    color: var(--lfa-deep-green);
    font-weight: 800;
    text-decoration: none;
}

.logic-chain a:hover {
    text-decoration: underline;
}

/* Linked pathway items inside sequence callouts */
.logic-chain a {
    color: var(--lfa-deep-green);
    font-weight: 800;
    text-decoration: none;
}

.logic-chain a:hover {
    text-decoration: underline;
}

/* Remove ordinary underline styling from linked sequence callouts */
.logic-chain a,
.logic-chain a:visited {
    color: var(--lfa-deep-green);
    font-weight: 800;
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.logic-chain a:hover,
.logic-chain a:focus {
    color: var(--lfa-green);
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Remove ordinary underline styling from linked sequence callouts */
.logic-chain a,
.logic-chain a:visited {
    color: var(--lfa-deep-green);
    font-weight: 800;
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.logic-chain a:hover,
.logic-chain a:focus {
    color: var(--lfa-green);
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* LFA-aligned lighter heading treatment */
.landing-hero h1 {
    font-weight: 430;
    letter-spacing: -0.025em;
    line-height: 1.06;
}

.landing-section h2 {
    font-weight: 520;
    letter-spacing: -0.018em;
    line-height: 1.16;
}

.manual-content h1 {
    font-weight: 560;
    letter-spacing: -0.02em;
}

.manual-content h2 {
    font-weight: 620;
    letter-spacing: -0.012em;
}

.manual-content h3 {
    font-weight: 680;
}

/* Manual page heading refinement: slightly stronger than landing page */
.manual-content h1 {
    font-weight: 620;
    letter-spacing: -0.018em;
}

.manual-content h2 {
    font-weight: 660;
    letter-spacing: -0.012em;
}

.manual-content h3 {
    font-weight: 700;
}

.manual-body h2 {
    font-weight: 660;
}

.manual-body h3 {
    font-weight: 700;
}

/* Expandable panels for detailed Step examples */
.accordion-panel {
    margin: 1.5rem 0;
}

.accordion-panel details {
    border: 1px solid var(--lfa-border);
    border-radius: 0.75rem;
    background: #fff;
    margin: 0 0 0.8rem;
    padding: 0.9rem 1rem;
}

.accordion-panel summary {
    cursor: pointer;
    color: var(--lfa-deep-green);
    font-weight: 750;
}

.accordion-panel details[open] summary {
    margin-bottom: 0.75rem;
}

.accordion-panel p {
    margin: 0.75rem 0 0;
}

/* Wide manual tables: keep inside content column and allow horizontal scrolling */
.manual-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
}

.manual-table table {
    width: max-content;
    min-width: 100%;
    max-width: none;
}

.manual-table th,
.manual-table td {
    vertical-align: top;
}

.manual-table::after {
    content: "Scroll table horizontally if needed";
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--lfa-muted);
}

/* Prevent wide content from escaping the manual content column */
.manual-layout,
.manual-content,
.manual-body,
.js-toc-content {
    min-width: 0;
}

/* Wide manual tables: scroll inside the content column */
.manual-body .manual-table,
.manual-content .manual-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
    border: 1px solid var(--lfa-border);
    border-radius: 0.6rem;
}

/* Let wide tables be wider than the column, but only inside the scroll wrapper */
.manual-body .manual-table table,
.manual-content .manual-table table {
    width: max-content;
    min-width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
}

/* Very wide implementation tables need a practical minimum width */
.manual-table table {
    min-width: 900px;
}

.manual-table th,
.manual-table td {
    vertical-align: top;
}

/* Avoid double border when the wrapper carries the border */
.manual-table table th:first-child,
.manual-table table td:first-child {
    border-left: 0;
}

.manual-table table th:last-child,
.manual-table table td:last-child {
    border-right: 0;
}

.manual-table::after {
    content: "Scroll table horizontally if needed";
    display: block;
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
    color: var(--lfa-muted);
    background: #fff;
    border-top: 1px solid var(--lfa-border);
}

/* =========================================================
   Manual tables — refined documentation table behaviour
   Normal tables wrap within the content column.
   Wide tables scroll inside the content column with a visual cue.
   ========================================================= */

/* Prevent wide content from forcing the centre column into the right nav */
.manual-layout,
.manual-content,
.manual-body,
.js-toc-content {
    min-width: 0;
}

/* Default manual table wrapper */
.manual-table {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 1.6rem 0 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Default table: fit the available column and wrap text */
.manual-table table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0;
}

/* Good wrapping behaviour for ordinary content tables */
.manual-table th,
.manual-table td {
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Remove the blunt generated message from earlier overrides */
.manual-table::after {
    content: none !important;
}

/* Wide table wrapper: use this only for genuinely wide examples */
.manual-table-wide {
    border: 1px solid var(--lfa-border);
    border-radius: 0.75rem;
    background:
        linear-gradient(to right, #fff 70%, rgba(255,255,255,0)),
        linear-gradient(to left, rgba(0,0,0,0.12), rgba(0,0,0,0));
    background-position: left center, right center;
    background-repeat: no-repeat;
    background-size: 2rem 100%, 1.25rem 100%;
}

/* Wide tables are allowed to exceed the content column, but only inside the scroller */
.manual-table-wide table {
    width: max-content;
    min-width: 1100px;
    max-width: none;
    table-layout: auto;
}

/* Wide table cells should still wrap, but not become absurdly narrow */
.manual-table-wide th,
.manual-table-wide td {
    min-width: 8.5rem;
    max-width: 14rem;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Smaller first columns where appropriate */
.manual-table-wide th:first-child,
.manual-table-wide td:first-child {
    min-width: 6rem;
    max-width: 7rem;
}

/* Instruction note above wide scrolling tables */
.table-scroll-note {
    margin: 0.3rem 0 0.55rem;
    color: var(--lfa-muted);
    font-size: 0.88rem;
    font-style: italic;
}

/* =========================================================
   FINAL TABLE BEHAVIOUR OVERRIDE
   Normal tables fit and wrap.
   Only .manual-table-wide scrolls horizontally.
   ========================================================= */

.manual-layout,
.manual-content,
.manual-body,
.js-toc-content {
    min-width: 0;
}

/* NORMAL TABLES — fit the content column */
.manual-body .manual-table:not(.manual-table-wide),
.manual-content .manual-table:not(.manual-table-wide) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
    margin: 1.5rem 0 2rem;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
}

.manual-body .manual-table:not(.manual-table-wide) table,
.manual-content .manual-table:not(.manual-table-wide) table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse;
    margin: 0;
}

.manual-body .manual-table:not(.manual-table-wide) th,
.manual-body .manual-table:not(.manual-table-wide) td,
.manual-content .manual-table:not(.manual-table-wide) th,
.manual-content .manual-table:not(.manual-table-wide) td {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: top;
}

/* Remove old generated scroll messages from normal tables */
.manual-table:not(.manual-table-wide)::after {
    content: none !important;
}

/* WIDE TABLES — scroll only when explicitly marked */
.manual-body .manual-table-wide,
.manual-content .manual-table-wide {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 2rem;
    border: 1px solid var(--lfa-border) !important;
    border-radius: 0.75rem;
    background:
        linear-gradient(to right, #fff 72%, rgba(255,255,255,0)),
        linear-gradient(to left, rgba(0,0,0,0.14), rgba(0,0,0,0));
    background-position: left center, right center;
    background-repeat: no-repeat;
    background-size: 2rem 100%, 1.35rem 100%;
}

.manual-body .manual-table-wide table,
.manual-content .manual-table-wide table {
    width: max-content !important;
    min-width: 1100px !important;
    max-width: none !important;
    table-layout: auto !important;
    margin: 0;
}

.manual-body .manual-table-wide th,
.manual-body .manual-table-wide td,
.manual-content .manual-table-wide th,
.manual-content .manual-table-wide td {
    white-space: normal !important;
    overflow-wrap: break-word;
    vertical-align: top;
    min-width: 8rem;
    max-width: 14rem;
}

/* No generated note below wide tables */
.manual-table-wide::after {
    content: none !important;
}

/* Manual note placed above wide scrolling tables */
.table-scroll-note {
    margin: 0.35rem 0 0.6rem;
    color: var(--lfa-muted);
    font-size: 0.88rem;
    font-style: italic;
}

/* Case-study internal labels: styled as subheadings but excluded from On-this-page heading scan */
.case-subheading {
    margin: 1.1rem 0 0.35rem;
    color: var(--lfa-deep-green);
    font-weight: 750;
    font-size: 1.02rem;
    line-height: 1.3;
}