/* =========================
   AI Visibility Guide Shell
========================= */

.knowledge-guide-page {
    --guide-bg: #f7faf8;
    --guide-surface: #ffffff;
    --guide-surface-soft: #f1f7f5;
    --guide-ink: #101715;
    --guide-muted: #53615d;
    --guide-line: rgba(16, 23, 21, 0.12);
    --guide-line-strong: rgba(16, 23, 21, 0.2);
    --guide-accent: #2a8f7a;
    --guide-accent-soft: rgba(149, 230, 208, 0.2);
    --guide-warning: rgba(239, 68, 68, 0.12);
    --guide-shadow: 0 20px 54px rgba(18, 32, 28, 0.08);
    --guide-radius: 8px;
    --guide-radius-sm: 6px;
    --guide-reading-width: 780px;
    --guide-wide-width: 1180px;
    color: var(--guide-ink);
    background: var(--guide-bg);
}

.knowledge-guide-page main {
    overflow: clip;
    background:
        linear-gradient(180deg, #f7faf8 0%, #ffffff 28%, #f8fbfa 100%);
}

.knowledge-guide-page section {
    scroll-margin-top: calc(var(--nav-height) + 32px);
}

.guide-progress {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    z-index: 999;
    width: 100%;
    height: 3px;
    background: rgba(16, 23, 21, 0.08);
}

.guide-progress__bar {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--guide-accent));
    transform-origin: left center;
    transition: width 80ms linear;
}

.guide-container {
    width: min(calc(100% - 40px), var(--guide-wide-width));
    margin-inline: auto;
}

.guide-hero-shell {
    min-height: calc(88vh - var(--nav-height));
    display: flex;
    align-items: center;
    padding: 48px 0 86px;
}

.guide-breadcrumbs {
    margin-bottom: 44px;
}

.guide-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
    align-items: center;
    gap: clamp(34px, 6vw, 72px);
}

.guide-kicker,
.guide-section-label,
.guide-panel-label,
.guide-component-kicker {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 14px;
    padding: 7px 11px;
    border: 1px solid rgba(42, 143, 122, 0.22);
    border-radius: var(--radius-pill);
    color: #226f60;
    background: var(--guide-accent-soft);
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
}

.guide-hero-copy h1,
.guide-section-shell h2,
.guide-footer-cta-shell h2 {
    margin: 0;
    color: var(--guide-ink);
    font-weight: 880;
    letter-spacing: 0;
}

.guide-hero-copy h1 {
    max-width: 720px;
    font-size: clamp(2.4rem, 5vw, 3.5rem);
    line-height: 1.05;
}

.guide-subtitle {
    display: grid;
    gap: 12px;
    max-width: 680px;
    margin: 24px 0 0;
}

.guide-placeholder-text,
.guide-reading-placeholder span,
.guide-placeholder-stack span {
    display: block;
    height: 14px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, rgba(16, 23, 21, 0.1), rgba(16, 23, 21, 0.04));
}

.guide-placeholder-text {
    width: min(100%, 28rem);
}

.guide-placeholder-text--wide {
    width: min(100%, 38rem);
}

.guide-placeholder-text--title {
    width: min(100%, 34rem);
    height: clamp(44px, 7vw, 62px);
}

.guide-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 680px;
    margin: 30px 0 0;
}

.guide-meta-grid div {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius);
    background: rgba(255, 255, 255, 0.72);
}

.guide-meta-grid dt {
    color: var(--guide-muted);
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
}

.guide-meta-grid dd {
    margin: 5px 0 0;
    color: var(--guide-ink);
    font-size: 0.95rem;
    font-weight: 850;
}

.guide-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.guide-cta-row--compact {
    margin-top: 18px;
}

.guide-hero-panel,
.guide-component-card,
.guide-section-shell,
.guide-reference-card,
.guide-footer-cta-inner {
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--guide-shadow);
}

.guide-hero-panel {
    padding: clamp(24px, 3vw, 32px);
}

.guide-hero-panel h2 {
    margin: 0 0 20px;
    color: var(--guide-ink);
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.12;
}

.guide-hero-schematic {
    display: grid;
    grid-template-columns: 0.68fr 1fr;
    gap: 12px;
    min-height: 250px;
    padding: 16px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius);
    background: var(--guide-surface-soft);
}

.guide-hero-schematic span {
    border: 1px solid rgba(42, 143, 122, 0.18);
    border-radius: var(--guide-radius-sm);
    background: rgba(255, 255, 255, 0.72);
}

.guide-hero-schematic span:first-child {
    grid-row: span 3;
}

.guide-status-list {
    display: grid;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.guide-status-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--guide-muted);
    font-size: 0.95rem;
    font-weight: 760;
}

.guide-status-list li::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--green-dark);
}

.guide-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--guide-reading-width));
    justify-content: center;
    align-items: start;
    padding: 28px 0 100px;
}

.guide-article-shell {
    width: min(100%, var(--guide-reading-width));
    margin-inline: auto;
}

.guide-section-shell {
    padding: clamp(30px, 5vw, 48px);
    min-height: 360px;
}

.guide-section-shell + .guide-section-shell {
    margin-top: 34px;
}

.guide-section-shell h2 {
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    line-height: 1.15;
}

.guide-reading-placeholder {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

.guide-reading-placeholder span:nth-child(1) {
    width: 100%;
}

.guide-reading-placeholder span:nth-child(2) {
    width: 84%;
}

.guide-reading-placeholder span:nth-child(3) {
    width: 62%;
}

.guide-reading-placeholder--short span:nth-child(1) {
    width: min(100%, 30rem);
}

.guide-reading-placeholder--short span:nth-child(2) {
    width: min(80%, 22rem);
}

.guide-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.guide-reference-card {
    min-height: 130px;
    display: grid;
    place-items: center;
    padding: 22px;
    color: var(--guide-muted);
    font-weight: 850;
    text-align: center;
    box-shadow: none;
}

.guide-component-zone {
    width: min(100vw - 40px, var(--guide-wide-width));
    margin-left: clamp(-290px, -22vw, -120px);
}

.guide-component-note {
    max-width: 760px;
    margin: 16px 0 0;
    color: var(--guide-muted);
}

.guide-component-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 30px;
}

.guide-component-card {
    min-width: 0;
    min-height: 190px;
    padding: 22px;
    box-shadow: none;
}

.guide-component-card h3,
.guide-component-card figcaption {
    margin: 0;
    color: var(--guide-ink);
    font-size: 1.08rem;
    font-weight: 880;
    line-height: 1.25;
}

.guide-placeholder-stack {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.guide-placeholder-stack span:nth-child(1) {
    width: 100%;
}

.guide-placeholder-stack span:nth-child(2) {
    width: 76%;
}

.guide-placeholder-stack span:nth-child(3) {
    width: 54%;
}

.guide-diagram-placeholder {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 10px;
    min-height: 126px;
    margin-top: 22px;
    padding: 14px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius-sm);
    background: var(--guide-surface-soft);
}

.guide-diagram-placeholder span {
    border-radius: var(--guide-radius-sm);
    background: rgba(42, 143, 122, 0.24);
}

.guide-diagram-placeholder span:nth-child(1) {
    height: 42%;
}

.guide-diagram-placeholder span:nth-child(2) {
    height: 72%;
}

.guide-diagram-placeholder span:nth-child(3) {
    height: 56%;
}

.guide-table-shell {
    display: grid;
    margin-top: 12px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius-sm);
    overflow: hidden;
}

.guide-table-shell div {
    display: grid;
    grid-template-columns: var(--guide-table-columns, repeat(2, minmax(0, 1fr)));
    min-width: max-content;
}

.guide-table-shell div + div {
    border-top: 1px solid var(--guide-line);
}

.guide-table-shell span {
    padding: 10px 12px;
    color: var(--guide-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.guide-table-shell [role="columnheader"] {
    color: var(--guide-ink);
    background: var(--guide-surface-soft);
    font-weight: 850;
}

.guide-callout {
    border-left: 4px solid var(--guide-accent);
}

.guide-key-insight {
    background: linear-gradient(180deg, rgba(149, 230, 208, 0.18), rgba(255, 255, 255, 0.88));
}

.guide-expert-tip {
    border-left-color: #4666f5;
}

.guide-did-you-know {
    border-left-color: #ef4444;
    background: linear-gradient(180deg, var(--guide-warning), rgba(255, 255, 255, 0.88));
}

.guide-evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.guide-evidence-grid span,
.guide-glossary-grid span {
    display: grid;
    place-items: center;
    min-height: 50px;
    padding: 10px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius-sm);
    color: var(--guide-muted);
    background: var(--guide-surface-soft);
    font-size: 0.85rem;
    font-weight: 820;
    text-align: center;
}

.guide-glossary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.guide-section-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px;
}

.guide-section-pager a {
    min-height: 100px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 20px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius);
    color: var(--guide-ink);
    background: var(--guide-surface);
    font-weight: 850;
}

.guide-section-pager span {
    color: var(--guide-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.guide-footer-cta-shell {
    padding: 92px 0;
    background: #0f1715;
}

.guide-footer-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: clamp(28px, 4vw, 44px);
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(149, 230, 208, 0.12), rgba(255, 255, 255, 0.04)),
        #14211e;
}

.guide-footer-cta-inner h2 {
    color: #ffffff;
}

.knowledge-guide-page a:focus-visible,
.knowledge-guide-page button:focus-visible,
.knowledge-guide-page main:focus-visible {
    outline: 3px solid rgba(42, 143, 122, 0.38);
    outline-offset: 4px;
}

/* =========================
   Sprint 2 Premium Reading Layer
========================= */

.guide-premium-hero {
    border-bottom: 1px solid rgba(16, 23, 21, 0.08);
    background:
        linear-gradient(135deg, rgba(149, 230, 208, 0.16), rgba(255, 255, 255, 0) 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 250, 248, 0));
}

.guide-hero-badge-row,
.guide-hero-meta,
.guide-utility-actions,
.guide-framework-notes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.guide-badge,
.guide-hero-meta span,
.guide-utility-actions button,
.guide-framework-notes span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--guide-line);
    border-radius: var(--radius-pill);
    color: var(--guide-muted);
    background: rgba(255, 255, 255, 0.78);
    font-size: 0.8rem;
    font-weight: 820;
    line-height: 1.2;
}

.guide-badge--reviewed {
    color: #155e51;
    border-color: rgba(42, 143, 122, 0.28);
    background: rgba(149, 230, 208, 0.18);
}

.guide-badge--evidence {
    color: #2f4779;
    border-color: rgba(70, 102, 245, 0.2);
    background: rgba(70, 102, 245, 0.08);
}

.guide-hero-meta {
    margin-top: 24px;
}

.guide-author-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    margin-top: 24px;
    padding: 12px 14px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius);
    background: rgba(255, 255, 255, 0.82);
}

.guide-author-avatar {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #07110f;
    background: linear-gradient(135deg, var(--green), #ffffff);
    font-size: 0.88rem;
    font-weight: 950;
}

.guide-author-card p {
    margin: 0;
    color: var(--guide-ink);
    font-weight: 880;
}

.guide-author-card span:not(.guide-author-avatar) {
    display: block;
    margin-top: 2px;
    color: var(--guide-muted);
    font-size: 0.88rem;
}

.guide-author-card--article {
    width: 100%;
    margin: 34px 0;
    padding: 18px 20px;
}

.guide-author-card--article span:not(.guide-author-avatar) {
    max-width: 820px;
    line-height: 1.55;
}

.guide-utility-actions {
    margin-top: 18px;
}

.guide-utility-actions button {
    min-height: 42px;
    color: var(--guide-ink);
    cursor: pointer;
    transition: border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}

.guide-utility-actions button:hover {
    border-color: rgba(42, 143, 122, 0.34);
    background: var(--guide-accent-soft);
    transform: translateY(-1px);
}

.guide-utility-actions button[aria-pressed="true"] {
    color: #07110f;
    border-color: rgba(42, 143, 122, 0.36);
    background: var(--green);
}

.guide-hero-stat-list,
.guide-metadata-grid {
    margin: 0;
}

.guide-hero-stat-list {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.guide-hero-stat-list div,
.guide-metadata-grid div {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius);
    background: rgba(255, 255, 255, 0.72);
}

.guide-hero-stat-list dt,
.guide-metadata-grid dt {
    color: var(--guide-muted);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.guide-hero-stat-list dd,
.guide-metadata-grid dd {
    margin: 5px 0 0;
    color: var(--guide-ink);
    font-size: 0.95rem;
    font-weight: 860;
}

.guide-metadata-strip {
    padding: 18px 0;
    border-top: 1px solid rgba(16, 23, 21, 0.06);
    border-bottom: 1px solid rgba(16, 23, 21, 0.08);
    background: rgba(255, 255, 255, 0.72);
}

.guide-metadata-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.guide-section-intro {
    max-width: 680px;
    margin: 18px 0 0;
    color: #2c3935;
    font-size: clamp(1.18rem, 2vw, 1.42rem);
    font-weight: 650;
    line-height: 1.55;
}

.guide-section-content {
    margin-top: 26px;
}

.guide-section-content > * + * {
    margin-top: 22px;
}

.guide-section-content p,
.guide-section-content li {
    color: var(--guide-muted);
    font-size: 1.02rem;
    line-height: 1.72;
}

.guide-section-content h3 {
    margin: 38px 0 0;
    color: var(--guide-ink);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    line-height: 1.25;
}

.guide-section-content h4 {
    margin: 0;
    color: var(--guide-ink);
    font-size: 1.02rem;
    font-weight: 880;
    line-height: 1.3;
}

.guide-section-content ul,
.guide-section-content ol {
    display: grid;
    gap: 10px;
    padding-left: 1.2rem;
}

.guide-section-content strong {
    color: var(--guide-ink);
    font-weight: 850;
}

.guide-article-shell :is(p, li) a[href^="/knowledge/"],
.knowledge-learning-context a[href^="/knowledge/"],
[data-manual-learning-journey] a[href^="/knowledge/"],
.knowledge-related-concepts a[href^="/knowledge/"] {
    color: #116354;
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-color: #83DDC6;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
    transition: color 0.16s ease, text-decoration-color 0.16s ease, background-color 0.16s ease;
}

.guide-article-shell :is(p, li) a[href^="/knowledge/"]:hover,
.knowledge-learning-context a[href^="/knowledge/"]:hover,
[data-manual-learning-journey] a[href^="/knowledge/"]:hover,
.knowledge-related-concepts a[href^="/knowledge/"]:hover {
    color: #0b463d;
    text-decoration-color: #2fb99e;
}

.guide-article-shell :is(p, li) a[href^="/knowledge/"]:focus-visible,
.knowledge-learning-context a[href^="/knowledge/"]:focus-visible,
[data-manual-learning-journey] a[href^="/knowledge/"]:focus-visible,
.knowledge-related-concepts a[href^="/knowledge/"]:focus-visible {
    outline: 3px solid #83DDC6;
    outline-offset: 3px;
    border-radius: 4px;
}

.knowledge-related-concept-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.knowledge-related-concept-list a {
    display: grid;
    gap: 8px;
    min-height: 100%;
    padding: 16px;
    border: 1px solid var(--guide-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
}

.knowledge-related-concept-list strong {
    color: var(--guide-ink);
    font-size: 0.98rem;
}

.knowledge-related-concept-list span {
    color: var(--guide-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .knowledge-related-concept-list {
        grid-template-columns: 1fr;
    }
}

.guide-responsive-table {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.guide-responsive-table .guide-table-shell {
    overflow-x: auto;
}

.guide-responsive-table .guide-table-shell span {
    min-width: 0;
    white-space: normal;
}

.guide-callout h3 {
    margin: 0 0 8px;
    color: var(--guide-ink);
    font-size: 1.05rem;
    line-height: 1.35;
}

.guide-callout p:last-child {
    margin-bottom: 0;
}

.guide-callout--definition {
    border-color: rgba(16, 23, 21, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 247, 245, 0.86));
}

.guide-callout--mistake {
    border-color: rgba(239, 68, 68, 0.24);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08), rgba(255, 255, 255, 0.88));
}

.guide-callout--tip,
.guide-callout--recommendation {
    border-color: rgba(70, 102, 245, 0.22);
    background: linear-gradient(180deg, rgba(70, 102, 245, 0.08), rgba(255, 255, 255, 0.88));
}

.guide-callout--know,
.guide-callout--takeaway,
.guide-callout--final {
    border-color: rgba(42, 143, 122, 0.24);
}

.guide-business-example p {
    color: var(--guide-muted);
    line-height: 1.68;
}

.guide-dropcap-placeholder {
    margin: 26px 0 0;
    color: var(--guide-muted);
    font-size: 1.06rem;
    line-height: 1.74;
}

.guide-dropcap-placeholder::first-letter {
    float: left;
    margin: 0.08em 0.12em 0 0;
    color: var(--guide-ink);
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 0.8;
}

.guide-reading-callout,
.guide-pullquote-placeholder {
    margin-top: 30px;
    border-radius: var(--guide-radius);
}

.guide-reading-callout {
    padding: 22px;
    border: 1px solid rgba(42, 143, 122, 0.22);
    background: linear-gradient(180deg, rgba(149, 230, 208, 0.16), rgba(255, 255, 255, 0.84));
}

.guide-reading-callout--insight {
    border-color: rgba(70, 102, 245, 0.18);
    background: linear-gradient(180deg, rgba(70, 102, 245, 0.08), rgba(255, 255, 255, 0.86));
}

.guide-pullquote-placeholder {
    margin-inline: 0;
    padding: 24px 28px;
    border-left: 4px solid var(--guide-accent);
    color: var(--guide-ink);
    background: var(--guide-surface-soft);
}

.guide-pullquote-placeholder p {
    margin: 0;
    font-size: clamp(1.28rem, 2vw, 1.7rem);
    font-weight: 820;
    line-height: 1.35;
}

.guide-framework-block--enhanced {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: 24px;
    align-items: stretch;
}

.guide-framework-copy p:not(.guide-component-kicker),
.guide-framework-visual figcaption {
    color: var(--guide-muted);
    line-height: 1.65;
}

.guide-framework-notes {
    margin-top: 18px;
}

.guide-framework-visual {
    display: grid;
    gap: 12px;
    margin: 0;
}

.guide-framework-svg-shell {
    min-height: 230px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 12px;
    padding: 18px;
    border: 1px dashed rgba(42, 143, 122, 0.32);
    border-radius: var(--guide-radius);
    background:
        linear-gradient(90deg, rgba(42, 143, 122, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(42, 143, 122, 0.08) 1px, transparent 1px),
        var(--guide-surface-soft);
    background-size: 32px 32px;
}

.guide-framework-svg-shell span {
    border-radius: var(--guide-radius-sm);
    background: linear-gradient(180deg, rgba(149, 230, 208, 0.8), rgba(42, 143, 122, 0.32));
}

.guide-framework-svg-shell span:nth-child(1) {
    height: 44%;
}

.guide-framework-svg-shell span:nth-child(2) {
    height: 76%;
}

.guide-framework-svg-shell span:nth-child(3) {
    height: 58%;
}

.guide-jump-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 34px;
}

.guide-jump-nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius);
    color: var(--guide-ink);
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    font-weight: 850;
    text-align: center;
    transition: border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}

.guide-jump-nav a:hover,
.guide-section-pager a:hover,
.guide-component-card:hover {
    border-color: rgba(42, 143, 122, 0.32);
    background: #ffffff;
    transform: translateY(-1px);
}

.guide-sticky-cta {
    position: fixed;
    right: 22px;
    bottom: 92px;
    z-index: 899;
    width: min(390px, calc(100vw - 32px));
    border: 1px solid rgba(42, 143, 122, 0.22);
    border-radius: var(--guide-radius);
    color: var(--guide-ink);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 20px 60px rgba(18, 32, 28, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease), width 220ms var(--ease);
}

.guide-sticky-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.guide-sticky-cta.is-collapsed {
    width: auto;
}

.guide-sticky-cta.is-collapsed .guide-sticky-cta__content {
    display: none;
}

.guide-sticky-cta__collapse {
    position: absolute;
    top: -14px;
    right: 10px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--guide-line);
    border-radius: var(--radius-pill);
    color: var(--guide-muted);
    background: #ffffff;
    font-size: 0.76rem;
    font-weight: 850;
    cursor: pointer;
}

.guide-sticky-cta__content {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.guide-sticky-cta__label {
    margin: 0 0 5px;
    color: var(--guide-accent);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.guide-sticky-cta h2 {
    margin: 0;
    color: var(--guide-ink);
    font-size: 1.1rem;
    line-height: 1.25;
}

.guide-sticky-cta__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.guide-sticky-cta__actions a {
    min-height: 42px;
    display: grid;
    place-items: center;
    padding: 8px 10px;
    border-radius: var(--guide-radius-sm);
    color: #07110f;
    background: var(--green);
    font-size: 0.84rem;
    font-weight: 900;
    text-align: center;
}

.guide-sticky-cta__actions a + a {
    color: var(--guide-ink);
    border: 1px solid var(--guide-line);
    background: var(--guide-surface-soft);
}

/* =========================
   Sprint 3 Framework SVG System
========================= */

.framework-system-gallery {
    margin-top: 40px;
    padding-top: 38px;
    border-top: 1px solid var(--guide-line);
}

.framework-system-header {
    max-width: 780px;
}

.framework-system-header h3 {
    margin: 0;
    color: var(--guide-ink);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.16;
}

.framework-system-header p:not(.guide-section-label) {
    color: var(--guide-muted);
    line-height: 1.7;
}

.framework-asset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.framework-asset {
    min-width: 0;
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 48px rgba(18, 32, 28, 0.07);
}

.framework-asset--wide,
.framework-asset--signature {
    grid-column: 1 / -1;
}

.framework-asset--signature {
    background:
        linear-gradient(135deg, rgba(149, 230, 208, 0.16), rgba(70, 102, 245, 0.06)),
        rgba(255, 255, 255, 0.94);
}

.framework-asset-copy h4 {
    margin: 0;
    color: var(--guide-ink);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.2;
}

.framework-asset-copy p:not(.guide-component-kicker) {
    margin: 10px 0 0;
    color: var(--guide-muted);
    line-height: 1.62;
}

.framework-copy-btn {
    min-height: 38px;
    margin-top: 14px;
    padding: 0 13px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius-sm);
    color: var(--guide-ink);
    background: var(--guide-surface-soft);
    font-size: 0.82rem;
    font-weight: 850;
    cursor: pointer;
}

.framework-svg-wrap {
    position: relative;
    min-width: 0;
    padding: clamp(12px, 2vw, 18px);
    border: 1px solid rgba(42, 143, 122, 0.16);
    border-radius: var(--guide-radius);
    background:
        linear-gradient(90deg, rgba(42, 143, 122, 0.06) 1px, transparent 1px),
        linear-gradient(rgba(42, 143, 122, 0.06) 1px, transparent 1px),
        var(--guide-surface-soft);
    background-size: 30px 30px;
}

.framework-svg {
    width: 100%;
    height: auto;
    color: var(--guide-ink);
    overflow: visible;
}

.framework-caption {
    margin: 12px 0 0;
    color: var(--guide-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.framework-svg text {
    fill: currentColor;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 900;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.framework-stage polygon,
.framework-stage circle,
.framework-stage rect {
    fill: rgba(255, 255, 255, 0.92);
    stroke: rgba(42, 143, 122, 0.38);
    stroke-width: 2;
    transition: fill 180ms var(--ease), stroke 180ms var(--ease), filter 180ms var(--ease), transform 180ms var(--ease);
}

.framework-stage {
    cursor: pointer;
    outline: none;
}

.framework-stage:hover polygon,
.framework-stage:hover circle,
.framework-stage:hover rect,
.framework-stage:focus-visible polygon,
.framework-stage:focus-visible circle,
.framework-stage:focus-visible rect {
    fill: rgba(149, 230, 208, 0.52);
    stroke: var(--guide-accent);
    filter: drop-shadow(0 10px 18px rgba(42, 143, 122, 0.18));
}

.framework-stage:focus-visible text {
    fill: #07110f;
}

.framework-stage:focus-visible {
    outline: 0;
}

.framework-ring,
.framework-flow-line,
.framework-arrow-path,
.framework-links line,
.framework-pipeline-lines path {
    fill: none;
    stroke: rgba(42, 143, 122, 0.3);
    stroke-width: 4;
    stroke-linecap: round;
}

.framework-links line,
.framework-pipeline-lines path {
    stroke-width: 3;
}

.framework-arrow-path,
.framework-flow-line {
    stroke-dasharray: 10 14;
    animation: frameworkStrokeMove 4.8s linear infinite;
}

.framework-pipeline-lines path {
    marker-end: url("#pipelineArrow");
}

.framework-svg marker path {
    fill: var(--guide-accent);
}

.framework-center-label {
    fill: var(--guide-muted);
    font-size: 22px;
    letter-spacing: 0;
}

.pyramid-layer {
    transform-origin: center;
}

.pyramid-layer:nth-of-type(1) polygon {
    fill: rgba(42, 143, 122, 0.18);
}

.pyramid-layer:nth-of-type(2) polygon {
    fill: rgba(42, 143, 122, 0.15);
}

.pyramid-layer:nth-of-type(3) polygon {
    fill: rgba(42, 143, 122, 0.12);
}

.pyramid-layer:nth-of-type(4) polygon {
    fill: rgba(42, 143, 122, 0.09);
}

.pyramid-layer:nth-of-type(5) polygon {
    fill: rgba(42, 143, 122, 0.06);
}

.flow-stage,
.roadmap-stage {
    animation: frameworkStagePulse 5.6s var(--ease) infinite;
}

.flow-stage:nth-of-type(2),
.roadmap-stage:nth-of-type(2) {
    animation-delay: 0.18s;
}

.flow-stage:nth-of-type(3),
.roadmap-stage:nth-of-type(3) {
    animation-delay: 0.36s;
}

.flow-stage:nth-of-type(4) {
    animation-delay: 0.54s;
}

.flow-stage:nth-of-type(5) {
    animation-delay: 0.72s;
}

.flow-stage:nth-of-type(6) {
    animation-delay: 0.9s;
}

.flow-stage:nth-of-type(7) {
    animation-delay: 1.08s;
}

.flow-stage:nth-of-type(8) {
    animation-delay: 1.26s;
}

.framework-marker {
    fill: var(--guide-accent);
    opacity: 0.28;
    animation: frameworkMarkerMove 5s var(--ease) infinite;
}

.method-hub circle {
    fill: rgba(149, 230, 208, 0.42);
    stroke-width: 3;
}

.method-pillar rect {
    fill: rgba(255, 255, 255, 0.96);
}

.method-links line {
    stroke-dasharray: 1 10;
    animation: frameworkStrokeMove 5.4s linear infinite;
}

.framework-tooltip {
    position: absolute;
    right: 14px;
    bottom: 14px;
    max-width: min(260px, calc(100% - 28px));
    padding: 9px 11px;
    border: 1px solid rgba(42, 143, 122, 0.22);
    border-radius: var(--guide-radius-sm);
    color: var(--guide-muted);
    background: rgba(255, 255, 255, 0.94);
    font-size: 0.8rem;
    font-weight: 820;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}

.framework-svg-wrap:hover .framework-tooltip,
.framework-svg-wrap:focus-within .framework-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.framework-roadmap-details {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.framework-roadmap-details details {
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius-sm);
    background: rgba(255, 255, 255, 0.82);
}

.framework-roadmap-details summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    color: var(--guide-ink);
    font-weight: 850;
    cursor: pointer;
}

.framework-roadmap-details p {
    margin: 0;
    padding: 0 13px 13px;
    color: var(--guide-muted);
}

/* =========================
   Sprint 4 Interactive Knowledge System
========================= */

.guide-section-utilities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--guide-line);
}

.guide-section-utilities button {
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius-sm);
    color: var(--guide-ink);
    background: rgba(255, 255, 255, 0.86);
    font-size: 0.82rem;
    font-weight: 850;
    cursor: pointer;
}

.guide-section-shell.is-collapsed > :not(.guide-section-label):not(h2):not(.guide-section-utilities) {
    display: none;
}

.guide-section-shell mark,
.interactive-panel mark,
.guide-search-results mark {
    padding: 0 2px;
    border-radius: 3px;
    color: #07110f;
    background: rgba(149, 230, 208, 0.7);
}

.guide-interactive-lab {
    margin-top: 42px;
    padding-top: 40px;
    border-top: 1px solid var(--guide-line);
}

.guide-interactive-header {
    max-width: 780px;
}

.guide-interactive-header h3,
.guide-mini-search h4,
.interactive-panel h4,
.guide-recommendations h4,
.guide-download-center h4 {
    margin: 0;
    color: var(--guide-ink);
    line-height: 1.18;
}

.guide-interactive-header h3 {
    font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.guide-interactive-header p:not(.guide-section-label),
.guide-mini-search p,
.interactive-panel p {
    color: var(--guide-muted);
    line-height: 1.68;
}

.guide-mini-search,
.interactive-panel,
.guide-recommendations,
.guide-download-center {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 48px rgba(18, 32, 28, 0.06);
}

.guide-faq-standard-shell {
    margin: 30px 0;
}

.guide-mini-search {
    display: grid;
    gap: 16px;
}

.guide-mini-search form,
.glossary-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.guide-mini-search input,
.glossary-controls input {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius-sm);
    color: var(--guide-ink);
    background: #ffffff;
}

.guide-mini-search button,
.glossary-az button,
.glossary-entry button {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius-sm);
    color: var(--guide-ink);
    background: var(--guide-surface-soft);
    font-weight: 850;
    cursor: pointer;
}

.guide-search-results {
    display: grid;
    gap: 8px;
}

.guide-search-results a,
.guide-search-results p {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius-sm);
    color: var(--guide-muted);
    background: rgba(255, 255, 255, 0.76);
    font-weight: 780;
}

.guide-interactive-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.interactive-panel-header {
    margin-bottom: 16px;
}

.interactive-panel-header h4 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.glossary-controls {
    align-items: start;
}

.glossary-az {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.glossary-az button[aria-pressed="true"] {
    color: #07110f;
    background: var(--green);
}

.glossary-entry-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.glossary-entry {
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius-sm);
    background: rgba(255, 255, 255, 0.72);
    overflow: hidden;
}

.glossary-entry > button {
    width: 100%;
    justify-content: space-between;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
}

.glossary-entry-body {
    display: grid;
    gap: 12px;
    padding: 0 14px 14px;
    color: var(--guide-muted);
}

.glossary-entry-actions {
    align-items: start;
}

.glossary-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.glossary-entry-actions span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--guide-line);
    border-radius: var(--radius-pill);
    color: var(--guide-muted);
    font-size: 0.8rem;
    font-weight: 820;
}

.recommendation-grid,
.download-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.recommendation-grid article,
.download-grid button {
    min-height: 150px;
    padding: 16px;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-radius);
    background: rgba(255, 255, 255, 0.78);
}

.recommendation-grid span,
.download-grid span {
    display: block;
    color: var(--guide-accent);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.recommendation-grid h5 {
    margin: 10px 0 8px;
    color: var(--guide-ink);
    font-size: 1rem;
}

.recommendation-grid p {
    margin: 0;
    color: var(--guide-muted);
}

.download-grid button {
    color: var(--guide-muted);
    text-align: left;
    cursor: not-allowed;
}

@keyframes frameworkStrokeMove {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -48;
    }
}

@keyframes frameworkStagePulse {
    0%,
    68%,
    100% {
        opacity: 1;
    }
    34% {
        opacity: 0.72;
    }
}

@keyframes frameworkMarkerMove {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(496px);
    }
    100% {
        transform: translateX(0);
    }
}

@media (max-width: 1100px) {
    .guide-hero-grid {
        grid-template-columns: 1fr;
    }

    .guide-layout {
        grid-template-columns: 1fr;
        padding-top: 18px;
    }

    .guide-article-shell {
        width: min(100%, var(--guide-reading-width));
        margin-inline: auto;
    }

    .guide-component-zone {
        width: 100%;
        margin-left: 0;
    }

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

    .guide-framework-block--enhanced {
        grid-template-columns: 1fr;
    }

    .framework-asset-grid {
        grid-template-columns: 1fr;
    }

    .guide-interactive-grid,
    .recommendation-grid,
    .download-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-sticky-cta {
        right: 20px;
        bottom: 82px;
    }
}

@media (max-width: 820px) {
    .guide-container {
        width: min(calc(100% - 32px), var(--guide-wide-width));
    }

    .guide-hero-shell {
        min-height: auto;
        padding: 34px 0 70px;
    }

    .guide-breadcrumbs {
        margin-bottom: 32px;
    }

    .guide-meta-grid,
    .guide-metadata-grid,
    .guide-reference-grid,
    .guide-component-grid,
    .guide-section-pager,
    .guide-footer-cta-inner {
        grid-template-columns: 1fr;
    }

    .guide-footer-cta-inner {
        align-items: stretch;
    }

    .guide-component-card,
    .guide-section-shell {
        padding: 22px;
    }

    .guide-evidence-grid {
        grid-template-columns: 1fr;
    }

    .framework-asset {
        padding: 18px;
    }

    .framework-svg text {
        font-size: 14px;
    }

    .framework-center-label {
        font-size: 18px;
    }

    .guide-mini-search form,
    .glossary-controls,
    .guide-interactive-grid {
        grid-template-columns: 1fr;
    }

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

    .guide-sticky-cta {
        left: 16px;
        right: 16px;
        bottom: 78px;
        width: auto;
    }
}

@media (max-width: 560px) {
    .guide-progress {
        top: 0;
    }

    .guide-meta-grid {
        gap: 9px;
    }

    .guide-hero-panel {
        padding: 20px;
    }

    .guide-hero-schematic {
        min-height: 190px;
    }

    .guide-cta-row,
    .guide-cta-row .primary-btn,
    .guide-cta-row .secondary-btn {
        width: 100%;
    }

    .guide-cta-row .primary-btn,
    .guide-cta-row .secondary-btn {
        justify-content: center;
    }

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

    .guide-hero-badge-row,
    .guide-hero-meta,
    .guide-utility-actions {
        align-items: stretch;
    }

    .guide-badge,
    .guide-hero-meta span,
    .guide-utility-actions button {
        width: 100%;
        justify-content: center;
    }

    .guide-author-card {
        width: 100%;
    }

    .guide-jump-nav,
    .guide-sticky-cta__actions {
        grid-template-columns: 1fr;
    }

    .guide-sticky-cta {
        bottom: 74px;
    }

    .guide-sticky-cta__content {
        padding: 18px;
    }

    .framework-system-gallery {
        margin-top: 30px;
        padding-top: 28px;
    }

    .framework-svg-wrap {
        padding: 10px;
        overflow-x: auto;
    }

    .framework-svg--flow,
    .framework-svg--method,
    .framework-svg--roadmap {
        min-width: 620px;
    }

    .framework-tooltip {
        position: static;
        max-width: none;
        margin-top: 10px;
        opacity: 1;
        transform: none;
    }

    .recommendation-grid,
    .download-grid {
        grid-template-columns: 1fr;
    }

}

@media (prefers-reduced-motion: reduce) {
    .guide-progress__bar,
    .guide-sticky-cta,
    .guide-utility-actions button,
    .guide-jump-nav a,
    .guide-section-pager a,
    .guide-component-card {
        transition: none;
    }

    .knowledge-guide-page {
        scroll-behavior: auto;
    }

    .framework-arrow-path,
    .framework-flow-line,
    .method-links line,
    .flow-stage,
    .roadmap-stage,
    .framework-marker {
        animation: none;
    }

    .framework-stage polygon,
    .framework-stage circle,
    .framework-stage rect,
    .framework-tooltip {
        transition: none;
    }
}

/* =========================
   Editorial Reading Experience
========================= */

.knowledge-guide-page {
    --guide-reading-width: 780px;
    --guide-editorial-wide: 1060px;
    --guide-bg: #ffffff;
    background: #ffffff;
}

.knowledge-guide-page main {
    overflow: clip;
    background: #ffffff;
}

.guide-progress {
    height: 2px;
    z-index: 1100;
}

.guide-premium-hero {
    min-height: auto;
    padding: 118px 0 96px;
    border-bottom: 1px solid rgba(16, 23, 21, 0.08);
    background: #ffffff;
}

.guide-premium-hero .guide-breadcrumbs,
.guide-metadata-strip {
    display: none;
}

.guide-editorial-hero-grid {
    display: block;
}

.guide-editorial-hero-copy {
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
}

.guide-editorial-hero-copy .guide-kicker {
    margin-inline: auto;
    border: 0;
    background: transparent;
    color: #247a68;
}

.guide-editorial-hero-copy h1 {
    max-width: none;
    font-size: 4.75rem;
    line-height: 0.96;
}

.guide-editorial-hero-copy .guide-subtitle {
    max-width: 760px;
    margin: 24px auto 0;
}

.guide-editorial-hero-copy .guide-subtitle span:first-child {
    color: var(--guide-ink);
    font-size: 1.28rem;
    font-weight: 850;
}

.guide-editorial-hero-copy .guide-subtitle span:last-child {
    color: var(--guide-muted);
    font-size: 1.16rem;
    line-height: 1.72;
}

.guide-editorial-meta {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: 36px auto 0;
    padding: 12px;
    border: 1px solid rgba(16, 23, 21, 0.1);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(247, 251, 249, 0.68)),
        rgba(255, 255, 255, 0.72);
    box-shadow: 0 22px 60px rgba(18, 32, 28, 0.09);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.guide-editorial-meta div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 14px 16px;
    border-right: 1px solid rgba(16, 23, 21, 0.08);
    text-align: left;
}

.guide-editorial-meta div:last-child {
    border-right: 0;
}

.guide-editorial-meta dt {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5f6e69;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.guide-editorial-meta dd {
    margin: 0;
    color: var(--guide-ink);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.25;
}

.guide-meta-icon {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(42, 143, 122, 0.22);
    border-radius: 10px;
    color: #247a68;
    background: rgba(149, 230, 208, 0.16);
}

.guide-meta-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.guide-meta-pill,
.guide-meta-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 30px;
    padding: 6px 11px;
    border: 1px solid rgba(42, 143, 122, 0.24);
    border-radius: var(--radius-pill);
    color: #155e51;
    background: rgba(149, 230, 208, 0.18);
    font-size: 0.88rem;
    font-weight: 920;
    line-height: 1;
}

.guide-meta-tag {
    color: #1f4f47;
    background: rgba(255, 255, 255, 0.72);
}

.guide-editorial-hero-copy .guide-cta-row {
    justify-content: center;
    margin-top: 34px;
}

.guide-layout {
    display: block;
    width: min(calc(100% - 40px), var(--guide-editorial-wide));
    padding: 0 0 104px;
}

.guide-article-shell {
    width: min(100%, var(--guide-reading-width));
    margin-inline: auto;
}

.guide-section-shell {
    min-height: 0;
    padding: 84px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.guide-section-shell + .guide-section-shell {
    margin-top: 0;
    border-top: 1px solid rgba(16, 23, 21, 0.08);
}

.guide-section-shell h2 {
    max-width: 760px;
    margin-bottom: 14px;
    font-size: 3rem;
    line-height: 1.04;
}

.guide-section-shell h3 {
    margin: 42px 0 10px;
    color: var(--guide-ink);
    font-size: 1.58rem;
    line-height: 1.18;
}

.guide-section-shell h4 {
    margin: 0 0 10px;
    color: var(--guide-ink);
    font-size: 1rem;
}

.guide-section-intro {
    max-width: 720px;
    margin: 0 0 30px;
    color: var(--guide-muted);
    font-size: 1.16rem;
    line-height: 1.66;
}

.guide-section-content p,
.guide-section-content li {
    color: #26302d;
    font-size: 1.04rem;
    line-height: 1.72;
}

.guide-section-content p {
    margin: 0 0 18px;
}

.guide-section-content ul,
.guide-section-content ol {
    display: grid;
    gap: 10px;
    margin: 18px 0 26px;
    padding-left: 1.35rem;
}

.guide-reading-callout,
.guide-component-card,
.guide-responsive-table,
.interactive-panel,
.guide-recommendations,
.guide-download-center {
    margin: 30px 0;
}

.guide-reading-callout,
.guide-component-card,
.interactive-panel,
.guide-recommendations,
.guide-download-center {
    border-radius: 8px;
    box-shadow: none;
}

.guide-component-zone {
    width: min(100%, var(--guide-reading-width));
    margin-left: 0;
}

.guide-table-shell {
    overflow-x: auto;
}

.guide-table-shell div {
    min-width: 720px;
}

.guide-chapter-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 52px;
    padding-top: 24px;
    border-top: 1px solid rgba(16, 23, 21, 0.1);
}

.guide-chapter-nav a,
.guide-chapter-nav > span {
    min-height: 86px;
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 18px;
    border: 1px solid rgba(16, 23, 21, 0.12);
    border-radius: 8px;
    color: var(--guide-ink);
    background: #ffffff;
}

.guide-chapter-nav a:hover {
    border-color: rgba(42, 143, 122, 0.34);
    background: #f8fbfa;
}

.guide-chapter-nav span {
    color: #74807c;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.guide-chapter-nav strong {
    font-size: 1rem;
    line-height: 1.28;
}

.guide-chapter-continue {
    grid-column: 1 / -1;
    min-height: 54px;
    justify-items: center;
    color: #07110f !important;
    background: linear-gradient(135deg, var(--green), #58c5b0) !important;
    font-weight: 900;
}

.framework-asset {
    align-content: start;
}

.framework-disclosure-toggle {
    min-height: 44px;
    margin-top: 12px;
    padding: 0 16px;
    border: 1px solid rgba(42, 143, 122, 0.28);
    border-radius: 999px;
    color: #07110f;
    background: linear-gradient(135deg, var(--green), #58c5b0);
    font-weight: 900;
    cursor: pointer;
}

.framework-asset > :not(.framework-asset-copy)[hidden] {
    display: none !important;
}

.framework-asset.is-framework-expanded > :not(.framework-asset-copy) {
    animation: guideFrameworkReveal 220ms var(--ease);
}

.glossary-az button[data-letter="all"] {
    display: none;
}

.glossary-entry[hidden] {
    display: none !important;
}

.glossary-entry-list::before {
    content: "Search or choose a letter to view matching glossary terms.";
    display: block;
    margin-bottom: 14px;
    color: var(--guide-muted);
    font-size: 0.95rem;
}

@keyframes guideFrameworkReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 920px) {
    .guide-editorial-hero-copy h1 {
        font-size: 3.6rem;
    }

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

    .guide-editorial-meta div {
        border-right: 0;
        border-bottom: 1px solid rgba(16, 23, 21, 0.08);
    }

    .guide-editorial-meta div:nth-last-child(-n + 1) {
        border-bottom: 0;
    }

    .guide-section-shell {
        padding: 70px 0;
    }

    .guide-section-shell h2 {
        font-size: 2.35rem;
    }
}

@media (max-width: 640px) {
    .guide-premium-hero {
        padding: 86px 0 70px;
    }

    .guide-editorial-hero-copy {
        text-align: left;
    }

    .guide-editorial-hero-copy .guide-kicker {
        margin-inline: 0;
    }

    .guide-editorial-hero-copy h1 {
        font-size: 3rem;
    }

    .guide-editorial-hero-copy .guide-cta-row {
        justify-content: stretch;
    }

    .guide-editorial-hero-copy .primary-btn,
    .guide-editorial-hero-copy .secondary-btn {
        width: 100%;
        justify-content: center;
    }

    .guide-chapter-nav {
        grid-template-columns: 1fr;
    }

    .guide-editorial-meta {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-top: 30px;
        padding: 10px;
    }

    .guide-editorial-meta div {
        padding: 14px;
        border: 1px solid rgba(16, 23, 21, 0.08);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.64);
    }

    .guide-editorial-meta div:last-child {
        border-right: 1px solid rgba(16, 23, 21, 0.08);
    }

    .guide-layout {
        width: min(calc(100% - 32px), var(--guide-editorial-wide));
    }

    .guide-section-shell {
        padding: 58px 0;
    }

    .guide-section-shell h2 {
        font-size: 2.05rem;
    }

    .guide-section-content p,
    .guide-section-content li {
        font-size: 1rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .framework-asset.is-framework-expanded > :not(.framework-asset-copy) {
        animation: none;
        transition: none;
    }
}

/* =========================
   Knowledge FAQ Standardization
========================= */

.knowledge-page .guide-faq-standard-shell .faq-item,
.knowledge-page .guide-section-shell.faq .faq-item {
    border-color: rgba(131, 221, 198, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.88)),
        var(--guide-surface);
    box-shadow: 0 18px 48px rgba(18, 32, 28, 0.08);
}

.knowledge-page .guide-faq-standard-shell .faq-item.active,
.knowledge-page .guide-section-shell.faq .faq-item.active {
    border-color: rgba(131, 221, 198, 0.62);
    box-shadow: 0 24px 64px rgba(18, 32, 28, 0.12), 0 0 0 1px rgba(131, 221, 198, 0.12);
}

.knowledge-page .guide-faq-standard-shell .faq-question,
.knowledge-page .guide-section-shell.faq .faq-question {
    color: var(--guide-ink);
}

.knowledge-page .guide-faq-standard-shell .faq-question:hover,
.knowledge-page .guide-section-shell.faq .faq-question:hover {
    color: #0b463d;
}

.knowledge-page .guide-faq-standard-shell .faq-answer p,
.knowledge-page .guide-section-shell.faq .faq-answer p {
    color: var(--guide-muted);
}

/* =========================
   Knowledge Article Design System v1.0
========================= */

.knowledge-guide-page {
    --guide-ds-accent: #83DDC6;
    --guide-ds-radius: 8px;
    --guide-ds-shadow: 0 18px 48px rgba(18, 32, 28, 0.08);
    --guide-ds-motion: 240ms var(--ease);
}

.knowledge-guide-page :where(.guide-hero-shell, .guide-premium-hero) {
    padding-top: clamp(86px, 10vw, 122px);
    padding-bottom: clamp(64px, 8vw, 94px);
}

.knowledge-guide-page :where(.guide-breadcrumbs, .knowledge-breadcrumbs) {
    margin-bottom: clamp(24px, 4vw, 44px);
}

.knowledge-guide-page :where(.guide-hero-copy h1, .guide-section-shell h2, .guide-footer-cta-shell h2) {
    letter-spacing: 0;
    text-wrap: balance;
}

.knowledge-guide-page :where(.guide-subtitle, .guide-section-intro, .guide-footer-cta-inner p) {
    line-height: 1.66;
}

.knowledge-guide-page :where(.primary-btn, .secondary-btn, .framework-disclosure-toggle) {
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 900;
    line-height: 1;
    transition:
        transform var(--guide-ds-motion),
        border-color var(--guide-ds-motion),
        background var(--guide-ds-motion),
        box-shadow var(--guide-ds-motion),
        color var(--guide-ds-motion);
}

.knowledge-guide-page :where(.primary-btn, .secondary-btn, .framework-disclosure-toggle):hover {
    transform: translateY(-2px);
}

.knowledge-guide-page :where(.primary-btn, .secondary-btn, .framework-disclosure-toggle):active {
    transform: translateY(0);
}

.knowledge-guide-page :where(.guide-hero-panel, .guide-component-card, .guide-section-shell, .guide-reference-card, .guide-footer-cta-inner, .guide-reading-callout, .guide-recommendations, .guide-download-center, .guide-author-box, .guide-next-lesson, .guide-business-example, .guide-workbook, .guide-checklist-card, .guide-glossary-card, .knowledge-related-concept-list a) {
    border-radius: var(--guide-ds-radius);
    transition:
        transform var(--guide-ds-motion),
        border-color var(--guide-ds-motion),
        background var(--guide-ds-motion),
        box-shadow var(--guide-ds-motion);
}

.knowledge-guide-page :where(.guide-component-card, .guide-reference-card, .guide-reading-callout, .guide-recommendations, .guide-download-center, .guide-author-box, .guide-next-lesson, .guide-business-example, .guide-workbook, .guide-checklist-card, .guide-glossary-card, .knowledge-related-concept-list a):hover {
    border-color: rgba(42, 143, 122, 0.28);
    box-shadow: var(--guide-ds-shadow);
}

.knowledge-guide-page :where(.guide-reading-callout, .guide-callout) {
    position: relative;
    padding: 22px 24px;
    border-width: 1px;
    border-style: solid;
    border-left-width: 4px;
    box-shadow: none;
}

.knowledge-guide-page :where(.guide-callout h3, .guide-reading-callout h3) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 900;
}

.knowledge-guide-page :where(.guide-callout h3, .guide-reading-callout h3)::before {
    content: "";
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--guide-ds-accent);
    box-shadow: 0 0 0 5px rgba(131, 221, 198, 0.14);
}

.knowledge-guide-page .guide-callout--mistake h3::before {
    background: #ef4444;
    box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.12);
}

.knowledge-guide-page :where(.guide-callout--tip, .guide-callout--recommendation) h3::before {
    background: #4666f5;
    box-shadow: 0 0 0 5px rgba(70, 102, 245, 0.1);
}

.knowledge-guide-page :where(.guide-table-wrap, .guide-responsive-table, .article-table-wrap) {
    width: 100%;
    margin: 24px 0;
    overflow-x: auto;
    border: 1px solid var(--guide-line);
    border-radius: var(--guide-ds-radius);
    background: #ffffff;
    box-shadow: var(--guide-ds-shadow);
    -webkit-overflow-scrolling: touch;
}

.knowledge-guide-page :where(.guide-table-wrap, .article-table-wrap) table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
}

.knowledge-guide-page :where(.guide-table-wrap, .article-table-wrap) :is(th, td) {
    padding: 15px 16px;
    border-bottom: 1px solid var(--guide-line);
    color: #26302d;
    line-height: 1.55;
    vertical-align: top;
}

.knowledge-guide-page :where(.guide-table-wrap, .article-table-wrap) th {
    color: var(--guide-ink);
    background: var(--guide-surface-soft);
    font-weight: 900;
}

.knowledge-guide-page :where(.guide-table-wrap, .article-table-wrap) tbody tr:hover {
    background: rgba(131, 221, 198, 0.08);
}

.knowledge-guide-page .guide-table-shell {
    margin: 24px 0;
    border-radius: var(--guide-ds-radius);
    box-shadow: var(--guide-ds-shadow);
}

.knowledge-guide-page .guide-table-shell span {
    padding: 13px 14px;
}

.knowledge-guide-page :where(.guide-section-content ul, .guide-section-content ol) {
    gap: 9px;
    margin: 18px 0 26px;
}

.knowledge-guide-page :where(.guide-section-content li) {
    padding-left: 2px;
}

.knowledge-guide-page :where(.guide-mini-search input, .glossary-controls input) {
    min-height: 48px;
    border-radius: var(--guide-ds-radius);
    transition:
        border-color var(--guide-ds-motion),
        box-shadow var(--guide-ds-motion),
        background var(--guide-ds-motion);
}

.knowledge-guide-page :where(.guide-mini-search input, .glossary-controls input):focus {
    border-color: rgba(131, 221, 198, 0.64);
    box-shadow: 0 0 0 4px rgba(131, 221, 198, 0.14);
}

.knowledge-guide-page :where(.guide-footer-cta-shell) {
    padding: clamp(64px, 8vw, 92px) 0;
}

.knowledge-guide-page :where(.guide-footer-cta-inner) {
    gap: 24px;
}

@media (max-width: 920px) {
    .knowledge-guide-page :where(.guide-hero-shell, .guide-premium-hero) {
        padding-top: 84px;
        padding-bottom: 70px;
    }
}

@media (max-width: 640px) {
    .knowledge-guide-page :where(.guide-reading-callout, .guide-callout) {
        padding: 18px;
    }

    .knowledge-guide-page :where(.guide-table-wrap, .guide-responsive-table, .article-table-wrap) {
        margin: 20px 0;
    }

    .knowledge-guide-page :where(.guide-table-wrap, .article-table-wrap) :is(th, td) {
        padding: 13px 14px;
    }
}