/* Financial Fellowship theme system, rebuilt on the Source base.
   Locked palette: blue #26b2fd, green #1ccf6a, ink #040404, paper #fafafa,
   yellow #ffd400, coral #ff7a59, violet #7b6cff, record red #e5243b.
   Green is a fill color only: never green text on a light background. */

:root {
    --blue: #26b2fd;
    --green: #1ccf6a;
    --ink: #040404;
    --paper: #fafafa;
    --yellow: #ffd400;
    --coral: #ff7a59;
    --violet: #7b6cff;
    --red: #e5243b;
    --gray-900: #2a2a2a;
    --gray-700: #3a3a3a;
    --gray-500: #5c5c5c;
    --gray-400: #8a8a8a;
    --gray-200: #cfcfcf;
    --gray-150: #d9d9d9;
    --gray-100: #e6e6e6;
    --tint-blue: #e8f7ff;
    --tint-yellow: #fff6d6;
    --font-display: "Archivo Black", "Arial Black", sans-serif;
    --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

.ff-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.ff-main { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.ff-header { background: var(--ink); color: var(--paper); }
.ff-header-in { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.ff-wordmark {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.1;
    color: var(--paper);
    text-decoration: none;
    white-space: nowrap;
}
.ff-nav { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.ff-nav .ff-nav-item { color: var(--paper); font-size: 15px; font-weight: 600; text-decoration: none; }
.ff-nav .ff-nav-item:hover { text-decoration: underline; }
.ff-nav .ff-nav-item.is-current { text-decoration: underline; }
.ff-header-ask {
    background: var(--green);
    color: var(--ink);
    font-weight: 800;
    font-size: 15px;
    padding: 9px 20px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

/* ---------- mobile nav: burger + drawer (frozen top band sheet pattern) ---------- */
.ff-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 3px solid var(--ink);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    flex: 0 0 auto;
}
.ff-nav-toggle__bars,
.ff-nav-toggle__bars::before,
.ff-nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 3px;
    margin: 0 auto;
    background: var(--ink);
    border-radius: 1px;
    content: "";
}
.ff-nav-toggle__bars { position: relative; }
.ff-nav-toggle__bars::before { position: absolute; top: -6px; left: 0; }
.ff-nav-toggle__bars::after { position: absolute; top: 6px; left: 0; }
.ff-nav-toggle[aria-expanded="true"] .ff-nav-toggle__bars { background: transparent; }
.ff-nav-toggle[aria-expanded="true"] .ff-nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.ff-nav-toggle[aria-expanded="true"] .ff-nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }
.ff-drawer { display: none; }
.ff-backdrop { display: none; }
body.ff-nav-open { overflow: hidden; }
body.ff-nav-open .ff-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgb(4 4 4 / 0.46);
}
body.ff-nav-open .ff-drawer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: min(100vw, 22rem);
    padding: 20px;
    background: var(--ink);
    border-left: 3px solid var(--ink);
    overflow: auto;
}
.ff-drawer a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 4px;
    color: var(--paper);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
}
.ff-drawer a:hover { text-decoration: underline; }
.ff-drawer .ff-btn { justify-content: center; margin-top: 12px; }
@media (min-width: 861px) {
    .ff-nav-toggle { display: none; }
    .ff-drawer, body.ff-nav-open .ff-drawer, body.ff-nav-open .ff-backdrop { display: none; }
}

/* ---------- pitch band (locked chrome) ---------- */
.ff-pitch { background: var(--blue); color: var(--ink); padding: 30px 0 34px; }
.ff-pitch-hook {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1.18;
    margin: 0 0 10px;
    max-width: 720px;
}
.ff-pitch-lede { font-size: 17px; line-height: 1.5; margin: 0 0 20px; max-width: 640px; }

/* ---------- buttons ---------- */
.ff-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 40px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.ff-btn-ink { background: var(--ink); color: var(--paper); }
.ff-btn-green { background: var(--green); color: var(--ink); }

/* ---------- article ---------- */
.ff-article-head, .ff-body, .ff-toc-slot { max-width: 800px; margin-left: auto; margin-right: auto; }
.ff-article-head { padding: 36px 0 4px; }
.ff-title {
    font-family: var(--font-display);
    font-size: 46px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    text-align: left;
}
.ff-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 16px;
    color: var(--gray-500);
    margin: 0 0 10px;
}
.ff-byline-author { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-weight: 700; }
.ff-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; }
.ff-avatar--lg { width: 72px; height: 72px; }
.ff-feature { margin: 18px 0 6px; }
.ff-feature img { border-radius: 14px; border: 2px solid var(--ink); }
.ff-feature figcaption { font-size: 16px; color: var(--gray-500); margin-top: 8px; }

.ff-body { font-size: 18px; line-height: 1.6; padding-bottom: 8px; }
.ff-body p { margin: 0 0 32px; }
.ff-body h2 { font-family: var(--font-display); font-size: 36px; line-height: 1.25; letter-spacing: -0.01em; margin: 48px 0 12px; }
.ff-body h3 { font-size: 28px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; margin: 32px 0 8px; }
.ff-body h4 { font-size: 26px; font-weight: 800; line-height: 1.25; margin: 28px 0 8px; }
.ff-body ul, .ff-body ol { margin: 0 0 32px; padding-left: 24px; }
.ff-body li { margin-bottom: 4px; }
.ff-body a { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ff-body strong { font-weight: 800; }
.ff-body blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 6px solid var(--yellow); font-size: 19px; }
.ff-body img { border-radius: 12px; }
.ff-body figure { margin: 24px 0; }
.ff-player { margin: 24px 0; }
.ff-player iframe { display: block; width: 100%; height: 200px; border: 0; border-radius: 12px; }
.ff-body figcaption { font-size: 16px; color: var(--gray-500); margin-top: 8px; }
.ff-body hr { border: none; border-top: 2px solid var(--gray-100); margin: 32px 0; }

/* long source URLs can never stretch the page */
.ff-body li a, .ff-body td a { overflow-wrap: anywhere; word-break: break-word; }

/* ---------- tables: fit the column, whole words ---------- */
.ff-body table { width: 100%; border-collapse: collapse; font-size: 18px; margin: 22px 0; }
@media (max-width: 700px) {
    /* Wide data tables scroll inside the prose column instead of pushing
       the page sideways (census finding: own occupation table, 566px). */
    .ff-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* A table already inside a scroll wrapper keeps real table layout;
       the wrapper is the scroller (v16.3). */
    .ff-body .ff-table-scroll table, .ff-body .ff-table-wrap table { display: table; }
}
/* Long unbroken strings must wrap inside the prose column: prompt code
   blocks (the /ai/ page) and bare URLs in source lists (own occupation). */
.ff-body pre { overflow-x: auto; }
.ff-body code { white-space: pre-wrap; overflow-wrap: anywhere; }
.tv-pop a, .ff-body li a { overflow-wrap: anywhere; }
.ff-body th {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    background: var(--ink);
    color: var(--paper);
    padding: 10px 12px;
}
.ff-body td { padding: 10px 12px; border-bottom: 1px solid var(--gray-100); vertical-align: top; overflow-wrap: break-word; }
.ff-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0; }
.ff-table-scroll table { margin: 0; min-width: 560px; }

/* ---------- table of contents (guides only, built by ff.js) ---------- */
.ff-toc { border: 2px solid var(--ink); border-radius: 14px; background: #fff; padding: 18px 22px; margin: 22px 0 6px; box-shadow: 4px 4px 0 var(--ink); }
.ff-toc-head { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; }
.ff-toc ol { margin: 0; padding-left: 22px; }
.ff-toc li { margin-bottom: 6px; font-size: 16px; }
.ff-toc a { text-decoration: none; font-weight: 600; }
.ff-toc a:hover { text-decoration: underline; }

/* ---------- universal tail (template side) ---------- */
.ff-tail { margin-top: 36px; }
.ff-stamp {
    background: var(--green);
    color: var(--ink);
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}
.ff-stamp-in { padding: 64px 20px; text-align: center; }
.ff-stamp-head { font-family: var(--font-display); font-size: 30px; line-height: 1.05; margin: 0 auto 12px; max-width: 680px; }
.ff-stamp-lede { font-size: 17px; line-height: 1.55; margin: 0 auto 24px; max-width: 600px; }

/* Mid page CTA, body carried (frozen composite ff-mid-cta, verbatim values):
   green band, Archivo Black headline at line-height 1.05, lede, ONE ink
   button, 64px sheet padding, centered. Same composition as the tail stamp,
   placed mid body by the pour. */
.ff-body .ff-mid-cta {
    background: var(--green);
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-top: 34px;
    margin-bottom: 34px;
}
.ff-body .ff-mid-cta > .wrap { max-width: 800px; margin: 0 auto; padding: 64px 20px; text-align: center; }
.ff-body .ff-mid-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(32px, 4.5vw, 52px);
    line-height: 1.05;
    margin: 0 auto 16px;
    color: var(--ink);
}
.ff-body .ff-mid-cta .lede { font-size: 18px; max-width: 600px; margin: 0 auto 28px; color: var(--ink); }
.ff-body .ff-mid-cta .cta-actions { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }

.ff-more {
    background: var(--paper);
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 44px 0 10px;
}
.ff-more-head { font-family: var(--font-display); font-size: 24px; margin: 0 0 20px; }

.ff-tail-sources:empty { display: none; }

.ff-closing { padding: 46px 0 54px; }
/* Closing ask card (frozen composite, verbatim): white card, 3px black edge,
   14px violet bar across the top, centered Archivo line, green pill button. */
.ff-closing-card {
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.ff-closing-bar { height: 14px; background: var(--violet); border-bottom: 3px solid var(--ink); }
.ff-closing-in { padding: 38px 28px 42px; }
.ff-closing-text { font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px); line-height: 1.14; max-width: 26ch; margin: 0 auto 26px; }
.ff-closing .ff-btn { border-width: 3px; }

/* ---------- cards, doors, grids ---------- */
.ff-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; margin: 6px 0 30px; }
/* Reading cards (frozen composite mm-card): 3px black edge, 10px radius,
   art panel with a 3px bottom edge, Archivo title, one line excerpt. */
.ff-card { background: #fff; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.ff-card-img { display: block; aspect-ratio: 16 / 8.2; overflow: hidden; background: var(--tint-blue); border-bottom: 3px solid var(--ink); line-height: 0; }
.ff-card-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ff-card-img--blank { background: var(--tint-blue); }
.ff-card-body { padding: 18px 20px 20px; }
.ff-card-title { font-family: var(--font-display); font-size: 18.5px; line-height: 1.2; margin: 0 0 8px; }
.ff-card-title a { text-decoration: none; }
.ff-card-excerpt {
    font-size: 15px;
    line-height: 1.5;
    color: var(--gray-900);
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ff-card-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--gray-500); margin: 0; }

.ff-door-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin: 6px 0 30px; }
.ff-door {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 16px 20px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--ink);
    font-weight: 800;
    font-size: 17px;
    text-decoration: none;
}

/* Framework cards (locked block, carried from the lego-v7 system: white card,
   3px black edge, 10px radius, palette bar on top, Archivo title, one line
   description). The frameworks index, the Unlocked feature grid, and the
   homepage framework section all render this block. */
.fw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 6px 0 30px; }
@media (max-width: 800px) { .fw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fw-grid { grid-template-columns: 1fr; } }
.fw-card { background: #fff; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--ink); display: block; }
.ff-body a.fw-card { text-decoration: none; }
.fw-card .bar { height: 10px; }
.fw-card .bar.b1 { background: var(--blue); }
.fw-card .bar.b2 { background: var(--violet); }
.fw-card .bar.b3 { background: var(--yellow); }
.fw-card .fw-body { padding: 22px 24px; }
.fw-card .t { font-family: var(--font-display); font-size: 20px; margin-bottom: 8px; line-height: 1.25; }
.fw-card .d { font-size: 15px; line-height: 1.5; color: var(--gray-700); }

.ff-kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); margin: 0 0 10px; }
.ff-index-head { padding: 36px 0 10px; }
.ff-index-lede { font-size: 18px; color: var(--gray-700); max-width: 640px; margin: 0 0 8px; }
.ff-section-head { font-family: var(--font-display); font-size: 36px; line-height: 1.25; margin: 44px 0 12px; }
.ff-author-head .ff-avatar { margin-bottom: 12px; }

.pagination { display: flex; gap: 18px; justify-content: center; align-items: center; padding: 26px 0 10px; font-weight: 700; }
.pagination a { text-decoration: none; }
.pagination .page-number { font-family: var(--font-mono); font-size: 14px; color: var(--gray-500); }

/* ---------- homepage ---------- */
.ff-hero { padding: 66px 0 42px; }
.ff-kicker--hero { color: var(--gray-700); }
.ff-hero-title { font-family: var(--font-display); font-size: 52px; line-height: 1.08; margin: 0 0 18px; max-width: 840px; }
.ff-hero-lede { font-size: 19px; line-height: 1.55; color: var(--gray-900); max-width: 640px; margin: 0 0 28px; }
.ff-hero-doors { display: flex; gap: 14px; flex-wrap: wrap; }
.ff-home-section { padding: 26px 0 6px; }

/* ---------- footer chrome ---------- */
.ff-disclaimer { background: var(--coral); color: var(--ink); padding: 18px 0; }
.ff-disclaimer p { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.55; text-align: center; }
.ff-footer { background: var(--ink); color: var(--paper); padding: 48px 0 26px; }
.ff-footer-in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; }
.ff-footer-word { font-family: var(--font-display); font-size: 21px; margin: 0 0 10px; }
.ff-footer-tag { color: var(--gray-200); font-size: 15px; margin: 0; max-width: 340px; }
.ff-footer-head { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); margin: 0 0 12px; }
.ff-footer-col a { display: block; color: var(--paper); text-decoration: none; font-size: 15px; font-weight: 600; margin-bottom: 9px; }
.ff-footer-col a:hover { text-decoration: underline; }
.ff-footer-base { border-top: 1px solid var(--gray-900); margin-top: 34px; padding-top: 18px; }
.ff-footer-base p { color: var(--gray-400); font-size: 13.5px; margin: 0; }

/* =====================================================================
   Body carried band system. Content sections arrive inside {{content}};
   these treatments dress them. New markup uses the ff- names; the legacy
   names from the previous theme are aliased to the same treatments so the
   imported bodies render in system today.
   ===================================================================== */
.ff-body .band,
.ff-body .ff-band {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 42px 0;
    margin-top: 34px;
    margin-bottom: 34px;
}
.ff-body .band > .wrap,
.ff-body .ff-band > .wrap { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.ff-body .wrap { max-width: 800px; margin-left: auto; margin-right: auto; }
.ff-body .narrow { max-width: 680px; margin-left: auto; margin-right: auto; }
.ff-body .band.yellow, .ff-body .ff-band--yellow { background: var(--yellow); }
.ff-body .band.paper, .ff-body .ff-band--paper { background: var(--paper); }
.ff-body .band.blue, .ff-body .ff-band--blue { background: var(--blue); }
.ff-body .band.green, .ff-body .ff-band--green { background: var(--green); }

.ff-body .section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.ff-body .section-head h2 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; margin: 0; }
.ff-body .section-head .sub { color: var(--gray-500); font-size: 16px; }
.ff-body .ff-kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); }

/* FAQ: yellow band, white pop out boxes with black edges (frozen composite:
   3px edge, 10px radius, no shadow, + / - summary markers) */
.ff-body .faq-band,
.ff-body .ff-faq-band {
    background: var(--yellow);
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 64px 0;
    margin-top: 34px;
    margin-bottom: 34px;
}
.ff-body .faq-band > .wrap, .ff-body .ff-faq-band > .wrap { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.ff-body .faq-band details,
.ff-body .ff-faq-band details,
.ff-body .faq-item {
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 10px;
    padding: 18px 22px;
    margin: 0 0 14px;
}
.ff-body .faq-band summary, .ff-body .ff-faq-band summary {
    font-weight: 700;
    cursor: pointer;
    font-size: 17px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.ff-body .faq-band summary::-webkit-details-marker, .ff-body .ff-faq-band summary::-webkit-details-marker { display: none; }
.ff-body .faq-band summary::after, .ff-body .ff-faq-band summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
}
.ff-body .faq-band details[open] summary::after, .ff-body .ff-faq-band details[open] summary::after { content: "\2212"; }
.ff-body .faq-band details .prose, .ff-body .ff-faq-band details .prose { padding-top: 12px; }
.ff-body .faq-band details p, .ff-body .ff-faq-band details p { margin: 10px 0 4px; }

/* Key Takeaways: blue band, white pop out box */
.ff-body .ff-takeaways-band {
    background: var(--blue);
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 64px 0;
    margin-top: 34px;
    margin-bottom: 34px;
}
.ff-body .ff-takeaways-band > .wrap { max-width: 800px; margin: 0 auto; padding: 0 20px; }

/* Pop out box (frozen composite, verbatim): white, 3px black edge, 10px radius.
   Defined for the body AND the tail sources slot: ff.js moves the Sources band
   into .ff-tail-sources, out of .ff-body scope, and the treatment must survive
   the move. */
.ff-body .tv-pop,
.ff-body .ff-pop,
.ff-tail-sources .tv-pop,
.ff-tail-sources .ff-pop {
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 10px;
    padding: 22px 26px;
}
.ff-body .tv-pop ul, .ff-tail-sources .tv-pop ul { margin: 0; padding-left: 20px; }
.ff-body .tv-pop li, .ff-tail-sources .tv-pop li { font-size: 16px; line-height: 1.55; color: var(--ink); }
.ff-body .tv-pop a, .ff-tail-sources .tv-pop a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Sources (frozen composite, Ending 3 verbatim): pale yellow tint band with
   3px black edges, white pop box, Published / Last reviewed lines UNDER the
   box on the tint. Applies in the body and after relocation into the tail
   slot — same treatment in both contexts. */
.ff-body .tv-src-tint,
.ff-body .ff-sources-band,
.ff-tail-sources .tv-src-tint,
.ff-tail-sources .ff-sources-band {
    background: var(--tint-yellow);
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 64px 0;
    margin-top: 34px;
    margin-bottom: 34px;
}
.ff-body .tv-src-tint > .wrap, .ff-body .ff-sources-band > .wrap,
.ff-tail-sources .tv-src-tint > .wrap, .ff-tail-sources .ff-sources-band > .wrap { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.ff-body .tv-pub, .ff-tail-sources .tv-pub { margin-top: 18px; font-size: 15px; color: var(--ink); }
.ff-tail-sources .tv-src-tint, .ff-tail-sources .ff-sources-band { margin-top: 0; margin-bottom: 0; }

/* Ryan note box */
.ff-body .not-box {
    background: #fff;
    border: 2px solid var(--ink);
    border-left: 8px solid var(--blue);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 24px 0;
}

/* Steps */
.ff-body .step { display: flex; gap: 14px; margin: 0 0 18px; }
.ff-body .step .num, .ff-body .num {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Top 5 rows */
.ff-body .top5-row { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--gray-100); }
.ff-body .top5-num { font-family: var(--font-display); font-size: 24px; color: var(--ink); }

/* Question link rows */
.ff-body .question-row { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--gray-100); text-decoration: none; }
.ff-body .question-number { font-family: var(--font-mono); font-size: 13px; color: var(--gray-500); }
.ff-body .question-title { font-weight: 700; }
.ff-body .question-arrow { margin-left: auto; font-weight: 800; }
.ff-body .question-group-head { font-family: var(--font-display); font-size: 20px; margin: 28px 0 8px; }

/* Comparison + bars */
.ff-body .compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.ff-body .compare-cell { border: 2px solid var(--ink); border-radius: 12px; padding: 16px 18px; background: #fff; }
.ff-body .fornot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.ff-body .comp-row { display: grid; grid-template-columns: 130px 1fr 70px; gap: 12px; align-items: center; margin-bottom: 10px; font-size: 15px; }
.ff-body .comp-track { background: var(--gray-100); border-radius: 999px; height: 14px; overflow: hidden; }
.ff-body .comp-bar { background: var(--green); height: 100%; }
.ff-body .comp-value { font-family: var(--font-mono); font-size: 13.5px; text-align: right; }

/* Red flags + timeline */
.ff-body .red-flag { border-left: 8px solid var(--red); background: #fff; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); border-radius: 10px; padding: 14px 18px; margin: 0 0 14px; }
.ff-body .flag-number { font-family: var(--font-mono); color: var(--red); font-weight: 600; }
.ff-body .timeline-node { display: flex; gap: 14px; margin: 0 0 16px; }
.ff-body .timeline-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); border: 2px solid var(--ink); margin-top: 6px; }
.ff-body .timeline-when { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); }

/* AI icebreaker cards + misc legacy */
.ff-body .ff-ai-card { border: 2px solid var(--ink); border-radius: 14px; padding: 18px 20px; margin: 0 0 16px; background: #fff; box-shadow: 4px 4px 0 var(--ink); }
.ff-body .ff-ai-prompt { font-family: var(--font-mono); font-size: 14.5px; }
.ff-body .ff-table-wrap { overflow-x: auto; margin: 22px 0; }
.ff-body .ff-table-wrap table { margin: 0; min-width: 560px; }
.ff-body .slot-label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gray-500); }
/* visual-slot: this was a dashed placeholder box, but a full-site scan
   shows its ONLY consumer is the anesthesiology hub body, where
   .visual-slot is the section wrapper for the timeline, the W2/1099
   compare, and the red-flags band — the dashed box wrapped all three
   flagship components (v16 hub repairs). The hub's own treatment is
   margin-only; the theme rule now matches it. */
.ff-body .visual-slot { margin: 22px 0 26px; }
.ff-body .card { border: 2px solid var(--ink); border-radius: 14px; padding: 18px 20px; background: #fff; }
.ff-body .ff-btn { margin: 6px 0; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
    .ff-nav { display: none; }
    .ff-header-in { gap: 12px; }
    .ff-header-ask { margin-left: auto; }
    .ff-nav-toggle { display: block; margin-left: 12px; }
    .ff-footer-in { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    /* Wordmark + Ask + burger must fit 360-390px without overflow. */
    .ff-header-in { padding: 0 16px; }
    .ff-wordmark { font-size: 17.5px; }
    .ff-header-ask { padding: 8px 15px; font-size: 14px; }
    .ff-nav-toggle { margin-left: 10px; }
}
@media (max-width: 760px) {
    .ff-title { font-size: 40px; }
    .ff-pitch { padding: 24px 0 28px; }
    .ff-pitch-hook { font-size: 25px; }
    .ff-pitch-lede { font-size: 16px; }
    .ff-hero { padding: 44px 0 30px; }
    .ff-hero-title { font-size: 36px; }
    .ff-stamp-in { padding: 48px 20px; }
    .ff-stamp-head { font-size: 25px; }
    .ff-body h2 { font-size: 32px; margin-top: 40px; }
    .ff-body h3 { font-size: 24px; }
    .ff-body h4 { font-size: 20px; }
    .ff-section-head { font-size: 32px; }
    .ff-body td { font-size: 18px; padding: 8px 6px; }
    .ff-body th { font-size: 12px; padding: 8px 6px; }
    .ff-body .compare-row, .ff-body .fornot { grid-template-columns: 1fr; }
    .ff-body .comp-row { grid-template-columns: 100px 1fr 60px; }
}

/* ---------- Ghost editor width cards ---------- */
.ff-body .kg-width-wide {
    width: min(1040px, 94vw);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.ff-body .kg-width-full {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}
.ff-body .kg-width-full img { width: 100%; border-radius: 0; }

/* ---------- v15 (2026-10-14) ---------- */

/* How-to hub cards: the locked lego-v7 .cards/.card treatment the rebuild
   never ported (old theme lego-v7.css: .cards grid, .card block with 3px
   edge, 10px radius, .t/.d type). The hub renders <a class="card">; with
   only the bare border rule at "misc legacy" the anchor stayed inline, so
   the border collapsed to fragments and all card text took the body link
   underline. Same missing-port class as the frameworks defect, not a
   regression: the audit baseline render shows the identical breakage. */
.ff-body .cards { display: grid; gap: 16px; margin-bottom: 36px; }
.ff-body a.card { display: block; background: #fff; border: 3px solid var(--ink); border-radius: 10px; padding: 22px 26px; text-decoration: none; color: var(--ink); }
.ff-body a.card:hover { background: var(--yellow); }
.ff-body .card .t { font-family: var(--font-display); font-size: 20px; line-height: 1.25; margin: 0 0 8px; }
.ff-body .card .d { font-size: 15px; line-height: 1.5; color: var(--gray-700); margin: 0; }

/* Questions hub topic filter: the .ff-chip pill from the design sheets
   (2px ink edge, 999px radius, mono label face), touch-sized for tapping.
   Active chip takes the ink fill. Chips with no matching cards are hidden
   by the theme script. */
.ff-qfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 24px; }
.ff-qfilter .ff-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.ff-qfilter .ff-chip:hover { background: var(--tint-blue); }
.ff-qfilter .ff-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ff-card-grid .ff-card[hidden] { display: none; }
.ff-qfilter .ff-chip[hidden] { display: none; }
/* 0.7.1 (DEF-391): a single chip wider than the phone viewport clipped,
   because the pill is white-space:nowrap and a flex item cannot shrink
   below its content. At phone width the label may wrap inside the pill
   and the type sizes down, so no chip can ever exceed the viewport. */
@media (max-width: 700px) {
    .ff-qfilter .ff-chip { white-space: normal; max-width: 100%; font-size: 11.5px; padding: 7px 12px; line-height: 1.35; text-align: left; }
}

/* Back to top: one ink pill, bottom right, identical on every page,
   revealed by the theme script after scrolling. */
.ff-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 65; width: 48px; height: 48px; padding: 0; border: 3px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; }
.ff-to-top.ff-to-top--show { opacity: 1; visibility: visible; transform: none; }
.ff-to-top:hover { background: var(--green); color: var(--ink); }
@media (max-width: 560px) { .ff-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; } }

/* Submit page: the record button is the locked .record-btn treatment from
   the design sheets (record red fill, white text, 3px ink edge, 10px
   radius, ink on hover); the --record/--stamp modifiers previously had no
   rules at all, so the buttons fell back to an empty pill and the body
   link underline. Theme buttons inside body copy are never underlined. */
.ff-body a.ff-btn { text-decoration: none; }
.ff-btn--record { background: var(--red); color: #fff; border: 3px solid var(--ink); border-radius: 10px; min-height: 0; padding: 14px 26px; font-size: 18px; }
.ff-btn--record:hover { background: var(--ink); color: #fff; }
.ff-submit .ff-article-head { padding-top: 48px; }
.ff-submit .step-go { margin-top: 12px; }

/* Framework pages: one mechanical rhythm whatever body shape a page was
   authored in — uniform content-band padding, and bare-flow headings take
   the same display treatment and spacing as sectioned pages' heads. */
.ff-fw-page .ff-body .band.s02 { padding: 30px 0; }
.ff-fw-page .ff-body > h2 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; margin: 38px 0 16px; }
.ff-fw-page .ff-body > h2:first-child { margin-top: 6px; }

/* ---------- v16 (2026-10-15) ---------- */

/* Legacy lego button classes: the .btn treatment from lego-v7.css that the
   rebuild never ported. Templates still carrying class="btn ink" /
   class="btn green" (podcast listen buttons, Unlocked waitlist, Students
   ask, Specialties explore) rendered as plain underlined text links
   because no rule existed. Values ported from lego-v7.css .btn verbatim. */
a.btn, button.btn { display: inline-block; font-weight: 700; font-size: 17px; padding: 16px 36px; border-radius: 10px; text-decoration: none; border: 3px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
a.btn.ink, button.btn.ink { background: var(--ink); color: #fff; }
a.btn.ink:hover, button.btn.ink:hover { background: var(--blue); color: var(--ink); }
a.btn.green, button.btn.green { background: var(--green); color: #fff; }
a.btn.green:hover, button.btn.green:hover { background: var(--yellow); color: var(--ink); }

/* Submit contribute form: .ff-form previously had no field rules at all,
   so its inputs rendered as raw browser defaults inside the card. Locked
   treatment: block labels, full-width fields with the theme's 2px ink edge
   and 10px radius, blue focus ring. */
.ff-form label { display: block; font-weight: 700; font-size: 15px; line-height: 1.4; margin: 18px 0 6px; }
.ff-form label:first-child { margin-top: 0; }
.ff-form input[type="text"], .ff-form input[type="email"], .ff-form input[type="file"],
.ff-form textarea, .ff-form select {
    width: 100%; box-sizing: border-box; padding: 12px 14px;
    border: 2px solid var(--ink); border-radius: 10px; background: #fff;
    font: inherit; font-size: 16px; line-height: 1.45; color: var(--ink);
}
.ff-form input[type="file"] { padding: 10px 14px; }
.ff-form input:focus, .ff-form textarea:focus, .ff-form select:focus {
    outline: 3px solid var(--blue); outline-offset: 1px;
}
.ff-form .ff-req { font-weight: 400; font-size: 13px; color: var(--red); margin-left: 6px; }

/* Recommended partner boxes: the rec-* / tagpill classes are lego-v7
   treatments the rebuild never ported (same missing-port family as .btn
   and the how-to cards), so the whole partner grid rendered as raw
   unstyled text — no boxes, no pills, CTA a plain underlined link.
   Values ported from lego-v7.css (.tagpill lines 399-404, .rec-* lines
   431-443) verbatim; markup, copy, and Dub hrefs untouched. */
.tagpill { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 5px 14px; border-radius: 20px; border: 2px solid var(--ink); white-space: nowrap; }
.tagpill.b { background: var(--blue); color: var(--ink); }
.tagpill.y { background: var(--yellow); color: var(--ink); }
.tagpill.v { background: var(--violet); color: var(--ink); }
.tagpill.w { background: #fff; color: var(--ink); }
.tagpill.g { background: var(--green); color: var(--ink); }
.rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .rec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rec-grid { grid-template-columns: 1fr; } }
.rec-card { background: #fff; border: 3px solid var(--ink); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; }
.rec-logo { border: 3px solid var(--ink); border-radius: 8px; background: #fff; min-height: 120px; display: flex; align-items: center; justify-content: center; padding: 20px; margin-bottom: 16px; text-align: center; }
.rec-logo .lg { font-family: var(--font-display); font-size: 20px; line-height: 1.3; }
.rec-logo .lg small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 2px; margin-top: 6px; }
.rec-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rec-tags .tagpill { font-size: 10px; }
.rec-card h3 { font-family: var(--font-display); font-size: 22px; margin-bottom: 10px; line-height: 1.25; }
.rec-card p { font-size: 15px; color: var(--ink); margin-bottom: 20px; flex: 1; }
a.rec-cta { display: block; text-align: center; background: var(--ink); color: #fff; font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 1px; padding: 14px 20px; border-radius: 8px; text-decoration: none; border: 3px solid var(--ink); }
a.rec-cta:hover { background: var(--blue); color: var(--ink); }

/* Specialty finder (/specialties/): the finder's CSS lived only in
   lego-v7.css and was never ported — the search input rendered as a
   185x21px browser-default sliver and the specialty list as plain
   bulleted text. Values ported from lego-v7.css (.filters/.filter-group
   lines 132-135, .az-list lines 141-146 + 552-556, .spec-* lines
   543-550, .spec-hit/.form-panel lines 210 + 559-560) verbatim; the
   matching state machine is ported into ff.js (initSpecialtyFinder).
   [hidden] must beat these display rules, as in lego (line 519). */
[hidden] { display: none !important; }
.filters { padding: 8px 0 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.spec-search-group { width: 100%; max-width: 520px; position: relative; }
.spec-search { width: 100%; padding: 14px 16px; font-size: 16px; font-weight: 600; font-family: var(--font-body); color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 8px; }
.spec-search:focus { outline: 3px solid var(--blue); outline-offset: 2px; }
.spec-suggest { display: none; background: #fff; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; }
.spec-suggest.is-open { display: grid; }
.spec-suggest button { padding: 12px 16px; border: 0; border-bottom: 2px solid var(--gray-100); background: transparent; text-align: left; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.spec-suggest button:last-child { border-bottom: 0; }
.spec-suggest button:hover { background: var(--yellow); }
ul.az-list { list-style: none; margin: 16px 0 0; padding: 0 0 16px; columns: 3; column-gap: 32px; }
@media (max-width: 800px) { ul.az-list { columns: 2; } }
@media (max-width: 520px) { ul.az-list { columns: 1; } }
.az-list li { display: block; padding: 10px 4px; color: var(--ink); font-weight: 700; font-size: 16px; break-inside: avoid; border-bottom: 2px solid var(--gray-100); cursor: pointer; }
.az-list li:hover, .az-list li:focus { color: var(--blue); outline: none; }
.az-list li.is-selected { color: var(--blue); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.spec-hit { max-width: 720px; margin-bottom: 16px; }
.spec-hit .btn { margin-top: 4px; }
.form-panel { background: #fff; border: 3px solid var(--ink); border-radius: 10px; padding: 32px; max-width: 720px; }
.miss-actions { display: grid; gap: 20px; }

/* ff-jumpnav — the global jump nav Lego (v16): ONE pill treatment for
   every on-page jump row, formalized from the anesthesiology hub's
   baked .topic-jump look (pale blue field #edf8ff, blue edge, deep-blue
   text, 999px radius). Rendered by partials/ff/jump-nav.hbs + ff.js
   from sections declaring id + data-ff-jumpnav-label; legacy hub pill
   rows (.topic-jump / #topic-navigation) are adopted into the same
   classes at runtime. Spec: TRIAGE.md B14. */
.ff-jumpnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.ff-jumpnav:empty { display: none; }
a.ff-jumpnav-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 13px; border: 1px solid var(--blue); border-radius: 999px; background: #edf8ff; color: #075b8b; text-decoration: none; font-size: 13px; font-weight: 600; }
a.ff-jumpnav-pill:hover { background: #dff3ff; }
a.ff-jumpnav-pill:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Hub component rescues: the specialty hub bodies carry component
   classes that collide with theme Lego rules written for different
   components. Each rescue is scoped under the hub component's own root
   so the theme Legos keep working where they belong. */
/* Buttons never carry the body link underline (its blue 2px rule was
   printing a blue line through hub .action-button labels and any other
   button-classed anchor in body copy). */
.ff-body a[class*="btn"], .ff-body a[class*="button"], .ff-body a[class*="cta"] { text-decoration: none; }
/* W2 vs 1099 compare: the theme's .compare-row/.compare-cell card grid
   (2-col, white boxed cells) was crushing the hub's 3-column compare
   table and painting white boxes over its green head band. Restore the
   hub's own design, including its mobile restructure. */
.ff-body .compare-card .compare-row { display: grid; grid-template-columns: 170px repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--gray-100); }
.ff-body .compare-card .compare-row:first-child { border-top: 0; }
.ff-body .compare-card .compare-cell { border: 0; border-left: 1px solid var(--gray-100); border-radius: 0; background: transparent; padding: 13px 15px; }
.ff-body .compare-card .compare-cell:first-child { border-left: 0; }
@media (max-width: 700px) {
    .ff-body .compare-card .compare-head { grid-template-columns: 1fr 1fr; }
    .ff-body .compare-card .compare-head .compare-cell:first-child { display: none; }
    .ff-body .compare-card .compare-head .compare-cell:nth-child(2) { border-left: 0; }
    .ff-body .compare-card .compare-row:not(.compare-head) { grid-template-columns: 1fr 1fr; }
    .ff-body .compare-card .compare-row:not(.compare-head) .compare-cell:first-child { grid-column: 1 / -1; padding: 11px 13px 6px; border-left: 0; }
    .ff-body .compare-card .compare-row:not(.compare-head) .compare-cell:nth-child(2) { border-left: 0; }
    .ff-body .compare-card .compare-cell { padding: 10px 13px 13px; font-size: 13px; }
    .ff-body .compare-card .compare-row:not(.compare-head) .compare-cell:nth-child(2)::before,
    .ff-body .compare-card .compare-row:not(.compare-head) .compare-cell:nth-child(3)::before { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-500); margin-bottom: 4px; }
    .ff-body .compare-card .compare-row:not(.compare-head) .compare-cell:nth-child(2)::before { content: 'W2'; }
    .ff-body .compare-card .compare-row:not(.compare-head) .compare-cell:nth-child(3)::before { content: '1099'; }
}
/* Hub data tables: the theme's ink/paper th and the body's #f0f0f0 th
   split the cascade (paper text on near-white = invisible header).
   The hub's own header treatment, declared whole. (v16.3: the phone
   fit-the-column override that used to sit here, fixed layout, fixed
   percentage widths, overflow-wrap: anywhere on cells, crushed data
   tables until words broke mid-word and rows ran unreadably tall.
   Data tables now follow the locked v16.3 pattern like every other
   table (see the pattern block directly below): narrow ones stack on
   phones, wide ones scroll inside the framed wrapper, cell text wraps
   only at word boundaries, and the scroll floor applies to table.data
   too (the min-width: 0 exception that used to sit here is gone). */
.ff-body table.data th { background: #f0f0f0; color: var(--ink); font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }

/* ---------- v16.3 locked table pattern (phones) ----------
   Classes are stamped by ff.js. Narrow tables (2 to 3 columns,
   .ff-table-stack): each row becomes a labeled block, first column as
   the label line, a short second cell as the prominent figure line,
   remaining columns as smaller supporting text; the header row is
   hidden because every block carries its own label; no sideways
   scroll. Wide tables (4+ columns, .ff-table-wide): horizontal scroll
   inside a bordered frame with an edge fade and minimum column
   widths. Neither layout ever breaks a word mid-word. Desktop keeps
   the standard table rendering; everything here is phone-only. */
@media (max-width: 700px) {
    .ff-body table.ff-table-stack { display: block; width: 100%; }
    .ff-body table.ff-table-stack thead, .ff-body table.ff-table-stack tbody { display: block; }
    .ff-body table.ff-table-stack tr { display: block; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 13px 15px; margin: 0 0 12px; }
    .ff-body table.ff-table-stack tr:last-child { margin-bottom: 0; }
    .ff-body table.ff-table-stack tr.ff-table-headrow { display: none; }
    .ff-body table.ff-table-stack th, .ff-body table.ff-table-stack td { display: block; border: 0; padding: 0; background: transparent; color: var(--ink); text-align: left; overflow-wrap: break-word; }
    .ff-body table.ff-table-stack th p, .ff-body table.ff-table-stack td p { margin: 0; }
    .ff-body table.ff-table-stack tr > :first-child { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 5px; }
    .ff-body table.ff-table-stack tr > :nth-child(2) { font-size: 17px; font-weight: 600; line-height: 1.3; margin: 0 0 5px; }
    .ff-body table.ff-table-stack tr.ff-stack-fig > :nth-child(2) { font-family: var(--font-display); font-size: 25px; font-weight: 400; line-height: 1.15; }
    .ff-body table.ff-table-stack tr > :nth-child(n+3) { font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--gray-700); margin: 0 0 3px; }
    .ff-body table.ff-table-stack tr > :last-child { margin-bottom: 0; }
    .ff-body .ff-table-scroll table.ff-table-stack, .ff-body .ff-table-wrap table.ff-table-stack { min-width: 0; }
    .ff-body .ff-table-frame { position: relative; margin: 22px 0; }
    .ff-body .ff-table-frame .ff-table-scroll, .ff-body .ff-table-frame .ff-table-wrap { margin: 0; border: 2px solid var(--ink); border-radius: 14px; }
    .ff-body .ff-table-frame::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 30px; border-radius: 0 14px 14px 0; background: linear-gradient(to right, rgba(250, 250, 250, 0), var(--paper)); pointer-events: none; }
    .ff-body table.ff-table-wide th, .ff-body table.ff-table-wide td { min-width: 118px; overflow-wrap: break-word; }
}
/* Hub FAQ (the #questions section): apply the locked FAQ treatment —
   yellow band (same full-bleed mechanics as .ff-faq-band, content kept
   in the hub's own narrow column), group boxes as white pop-outs with
   black edges, and the hub's Archivo/blue question numbers (the theme's
   mono/gray .question-number label rule was overriding them). */
.ff-body section#questions { background: var(--yellow); width: 100vw; position: relative; left: 50%; margin-left: -50vw; padding: 64px 0; margin-top: 34px; margin-bottom: 34px; }
.ff-body section#questions > * { max-width: 820px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
.ff-body .question-group { background: #fff; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; }
.ff-body .question-number { font-family: var(--font-display); font-size: 18px; color: var(--blue); }

/* Index-head titles: at phone widths a long single-word title
   ("Anesthesiology", Archivo Black at the fixed 40px) is wider than the
   content box and its glyphs crop. Shrink fluidly with the viewport;
   desktop sizes are untouched. */
@media (max-width: 760px) {
    .ff-index-head .ff-title { font-size: clamp(28px, 9vw, 40px); }
}

/* ---------- v16.1 residual fixes (post-live verification, 2026-10-15) ---------- */

/* F1 — Koenig tables whose header row is plain <td> cells (no <th> in the
   markup: the sign-on clawback / clawback clock / first-year number posts,
   root + /questions/ twins) rendered that row as ordinary body text. Give
   the first row the theme's exact th treatment; the cells wrap their text
   in <p>, whose prose margin is zeroed inside the header row only. */
.ff-body table:not(:has(th)) > :is(thead, tbody) > tr:first-child > td {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    background: var(--ink);
    color: var(--paper);
}
.ff-body table:not(:has(th)) > :is(thead, tbody) > tr:first-child > td > p { margin: 0; }

/* F2 — the Curbside room card (/curbside/ only: .ff-doors--one) pours a
   stacked content card into the one-line .ff-door flex row; at mobile
   widths the row crushes its children into slivers (the explainer text
   rendered 58px wide, the button a 420px-tall oval). Stack the card on
   small screens; the desktop row is untouched. */
@media (max-width: 700px) {
    .ff-doors--one .ff-door { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ff-doors--one .ff-door__num {
        font-family: var(--font-mono); font-size: 13px; font-weight: 400;
        letter-spacing: 0.08em; text-transform: uppercase; margin: 0;
    }
    .ff-doors--one .ff-door h2, .ff-doors--one .ff-door p { margin: 0; }
}

/* F3 — fragment targets clear the sticky header site-wide. The ff.js jump
   handler scrolls with the target's own scroll-margin; only the hub
   bodies carried one (a baked 90px rule), so guide TOC jumps and in-page
   anchor jumps everywhere else landed at 0 with the heading hidden under
   the header (measured on staging: refinance TOC targets at top 0).
   90px matches the hub's established value; elements with their own
   inline scroll-margin keep it. */
[id] { scroll-margin-top: 90px; }

/* ---------- Restored 2026-10-16 (site incident corrections v2):
   lego-v7 rules the ff-rebuild CSS port skipped, which is why the
   Unlocked page lost its formatting and the Submit page boxes lost
   their fills. Declarations are verbatim from the pre-rebuild live
   stylesheet lego-v7.css (repair snapshot 2026-10-14, MD5
   fba8f02829bb62cf09014d329c9ab106). The scope prefix is the rebuild
   wrapper .ff-body where v7 used its own .lego-v7 wrapper; the
   rebuild templates emit no lego-v7 class. The --gray definition
   mirrors v7 line 19, which scoped it on the wrapper; ff.css defined
   no --gray and nothing else in ff.css references it. The v7
   .step .num numeral rule is deliberately NOT restored: the ff.css
   ink-circle numeral rule above stays untouched, pending Ryan's
   design call. ---------- */
.ff-body { --gray:#5c5c5c; }

/* Steps: start-here grid and step card box (v7 S07 cluster) */
.ff-body .start-here { display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
.ff-body .step { min-width:0; max-width:100%; }
.ff-body .step > div { min-width:0; }
.ff-body .step { background:#fff; border:3px solid var(--ink); border-radius:10px; padding:26px 28px; text-decoration:none; color:var(--ink); display:flex; gap:20px; align-items:flex-start; }
.ff-body .step .t { font-weight:700; font-size:19px; margin-bottom:6px; }
.ff-body .step .d { font-size:15px; color:var(--gray); }
.ff-body .step .step-go { margin-top:14px; }
.ff-body .step .step-go { max-width:100%; }

/* Capture row (v7 S20 family, non-home form; the rebuild homepage
   carries neither .ff-body nor .capture-row, so the plain .ff-body
   scope reproduces the reach of the v7 :where(:not(.lego-home))
   guard) */
.ff-body .capture-row { display:flex; gap:12px; flex-wrap:wrap; max-width:560px; }
.ff-body .capture-row input { flex:1; min-width:240px; padding:16px 20px; font-size:17px; border:3px solid #fff; border-radius:10px; font-family:'Inter',sans-serif; }
.ff-body .capture-row button { background:var(--yellow); color:var(--ink); font-weight:700; font-size:17px; padding:16px 32px; border-radius:10px; border:3px solid #fff; cursor:pointer; font-family:'Inter',sans-serif; }
.ff-body .capture-row button:hover { background:#fff; }
.ff-body .band.s20.blue .capture-row button { background:var(--ink); color:#fff; border-color:var(--ink); }
.ff-body .band.s20.blue .capture-row button:hover { background:#fff; color:var(--ink); }

/* For box (v7 42 for / not-for family, for-box branches only; the
   .not-box branches are not appended because ff.css already defines
   .ff-body .not-box at the Ryan note box rule above, and duplicating
   or overriding that locked rule is out of scope) */
.ff-body .for-box { border:3px solid var(--ink); border-radius:10px; padding:28px; }
.ff-body .for-box { background:var(--green); }
.ff-body .for-box h3 { font-family:'Archivo Black',sans-serif; font-size:22px; margin-bottom:14px; }
.ff-body .for-box h3 { color:var(--ink); }
.ff-body .for-box ul { list-style:none; }
.ff-body .for-box li { margin-bottom:10px; font-weight:500; color:var(--ink); }
.ff-body .for-box { background:#fff; border:3px solid var(--ink); border-radius:10px; padding:28px 28px 28px 32px; }
.ff-body .for-box { border-left:14px solid var(--green); }
.ff-body .for-box h3 { color:var(--ink); }
.ff-body .for-box li { color:var(--ink); }
.ff-body .for-box p { font-weight:500; color:var(--ink); }

/* ---------- v3 corrections (2026-10-16): closing stamp containment ----------
   The green ask stamp (.ff-stamp) previously broke out to 100vw while body
   content caps at the 1120px wrap, so the band looked broken on wide screens
   (151 pages). Contained to the wrap width and centered, matching the
   contained section form Ryan approved (the "Spend your 10" section form).
   Colors, padding, type, and inner wrap are unchanged. Append-only. */
.ff-stamp {
    width: 100%;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    left: auto;
}