/* The SMC level-guide family (2026-09-13): the approved SMC-L design, opt-in. * * A page joins with and loads this file plus * /js/smc-level-guide.js. Derived from public/css/smc-l-aid-attendance.css, * which stays the reference page and is not touched. Every selector is scoped * to .smcg-page, so no unconverted page and not SMC-L itself can see it. * * Owner rules layered on the SMC-L values (master handoff 2026-09-13): * 12px TEXT FLOOR: no visible text under 12px, phone overrides included. * C10 DISCLOSURE TOGGLE: a plain + at the right of the clickable header that * rotates 45deg to a cross when open (the Pension Annual income control). It is * decorative (aria-hidden), carries no glow, box or lift, and each open-state * selector is scoped to its OWN trigger so a nested closed child never turns. * THE BUTTON LAW: every clickable card and button this family owns has a 2px * --color-accent border, the card-fx glow (cardfx-pop, or rel-card which must * not also carry it), a hover lift and a border shift to --color-primary. * TYPOGRAPHY ROLES: content headings Source Serif 4, UI stays Inter. * DARK MODE: the palette is defined for BOTH mechanisms, :root[data-theme] * and the prefers-color-scheme mirror. */ .smcg-page { --smcg-bg: #f8f6f0; --smcg-page: var(--color-page-bg, #f2efe9); --smcg-surface: #fffdf8; --smcg-ink: #122b47; --smcg-muted: #536474; --smcg-line: #d9dcd8; --smcg-gold: #e8b54a; --smcg-link: #163f69; --smcg-soft: #efede4; --smcg-warm: #f3ede0; --smcg-button: #112e50; --smcg-button-ink: #fff; background: var(--smcg-page); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .smcg-page { --smcg-bg: #0c121b; --smcg-page: #0c121b; --smcg-surface: #17212e; --smcg-ink: #edf1f5; --smcg-muted: #adbccc; --smcg-line: #344352; --smcg-link: #a7d0ff; --smcg-soft: #202b39; --smcg-warm: #29281f; --smcg-button: #b1d4ff; --smcg-button-ink: #122d48; } } :root[data-theme="dark"] .smcg-page { --smcg-bg: #0c121b; --smcg-page: #0c121b; --smcg-surface: #17212e; --smcg-ink: #edf1f5; --smcg-muted: #adbccc; --smcg-line: #344352; --smcg-link: #a7d0ff; --smcg-soft: #202b39; --smcg-warm: #29281f; --smcg-button: #b1d4ff; --smcg-button-ink: #122d48; } /* ── Page base ───────────────────────────────────────────────────────────── */ .smcg-page #main-content { font: 16px/1.65 var(--font-sans); color: var(--smcg-ink); text-align: left; padding-top: 15px; } .smcg-page #main-content > .container { max-width: 1240px; padding: 0 36px 44px; } .smcg-page #main-content [hidden] { display: none !important; } .smcg-page #main-content a { color: var(--smcg-link); text-decoration: underline; text-underline-offset: 4px; } .smcg-page #main-content img { display: block; max-width: 100%; height: auto; } .smcg-page #main-content h1, .smcg-page #main-content h2, .smcg-page #main-content h3, .smcg-page #main-content h4 { font-family: var(--font-serif); line-height: 1.22; color: var(--smcg-ink); font-weight: 600; text-wrap: pretty; text-align: left; border: 0; padding: 0; } .smcg-page #main-content h1 { font-size: 47px; letter-spacing: -1.4px; margin: 12px 0 22px; } .smcg-page #main-content h2 { font-size: 32px; letter-spacing: -.7px; margin: 0 0 14px; } .smcg-page #main-content h3 { font-size: 24px; margin: 0 0 12px; } .smcg-page #main-content p { margin: 0 0 16px; } .smcg-page #main-content summary { list-style: none; cursor: pointer; } .smcg-page #main-content summary::-webkit-details-marker { display: none; } .smcg-page #main-content summary:focus-visible, .smcg-page #main-content a:focus-visible, .smcg-page #main-content button:focus-visible { outline: 3px solid var(--smcg-gold); outline-offset: 4px; } .smcg-page #main-content .smcg-eyebrow { display: block; font: 700 12px/1.6 var(--font-sans); letter-spacing: 1.7px; text-transform: uppercase; color: var(--smcg-link); margin: 0 0 10px; } /* The page's own buttons: the mockup's box plus THE BUTTON LAW border. */ .smcg-page .smcg-utility-main .tldr-btn, .smcg-page .smcg-advisor-toggle, .smcg-page .smcg-expand-all, .smcg-page #main-content .smcg-button { font: 600 12px/1.5 var(--font-sans); color: var(--smcg-ink); background: var(--smcg-surface); border: 2px solid var(--color-accent); border-radius: 8px; padding: 11px 16px; min-height: 44px; margin: 0; display: inline-flex; gap: 15px; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; } .smcg-page .smcg-utility-main .tldr-btn:hover, .smcg-page .smcg-advisor-toggle:hover, .smcg-page .smcg-expand-all:hover, .smcg-page #main-content .smcg-button:hover { border-color: var(--color-primary); background: var(--smcg-soft); transform: translateY(-1px); } .smcg-page #main-content .smcg-primary { background: var(--smcg-button); color: var(--smcg-button-ink); } .smcg-page #main-content .smcg-primary:hover { background: var(--smcg-button); filter: brightness(.93); } /* ── Hero: the full opening and the rate panel ───────────────────────────── */ .smcg-page .smcg-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 65px; align-items: center; margin: 0 0 30px; } .smcg-page #main-content .smcg-lede { font-size: 15px; line-height: 1.85; color: var(--smcg-muted); max-width: 740px; } .smcg-page #main-content .smcg-meta { font-size: 12px; line-height: 1.75; color: var(--smcg-muted); margin: 20px 0 22px; } .smcg-page .smcg-meta strong { font-weight: 600; } .smcg-page .smcg-meta > span { padding: 0 6px; } .smcg-page .smcg-hero-actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .smcg-page #main-content .smcg-hero-actions > a:last-child { font-size: 12px; font-weight: 600; } .smcg-page .smcg-rate-preview { border: 1.5px solid var(--smcg-gold); background: var(--smcg-surface); border-radius: 14px; overflow: hidden; } .smcg-page #main-content .smcg-rate-preview > img { width: 100%; height: 195px; object-fit: cover; border-bottom: 1px solid var(--smcg-gold); } .smcg-page .smcg-rate-preview > div { padding: 21px 25px; } .smcg-page #main-content .smcg-rate-preview .smcg-eyebrow { font-size: 12px; } .smcg-page #main-content .smcg-amount { font: 600 38px/1.15 var(--font-serif); letter-spacing: -.6px; margin: 8px 0 15px; color: var(--smcg-ink); } .smcg-page .smcg-amount > span { display: block; font: 400 12px/1.5 var(--font-sans); letter-spacing: 0; color: var(--smcg-muted); margin-top: 6px; } .smcg-page #main-content .smcg-rate-caption { font-size: 12px; line-height: 1.8; color: var(--smcg-muted); } .smcg-page .smcg-rate-caption strong { font-weight: 500; } .smcg-page #main-content .smcg-rate-preview a { display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--smcg-line); font-size: 12px; font-weight: 600; text-decoration: none; } /* ── Utility row: the real Quick Summary, Advisor and Share ──────────────── */ .smcg-page .smcg-utility-bar { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 15px 0; border-top: 1px solid var(--smcg-line); border-bottom: 1px solid var(--smcg-line); margin-bottom: 38px; } .smcg-page .smcg-utility-main { display: flex; gap: 10px; flex-wrap: wrap; } .smcg-page .smcg-utility-main .tldr-btn, .smcg-page .smcg-advisor-toggle { background: transparent; } .smcg-page .smcg-utility-main .tldr-btn { background: var(--smcg-warm); } .smcg-page .smcg-utility-main .tldr-btn > span[aria-hidden] { display: none; } .smcg-page .smcg-utility-main .tldr-btn::after { content: '+'; } .smcg-page .smcg-contents .tldr-btn-nav { display: none; } .smcg-page .smcg-utility-bar .rmv-share-mount, .smcg-page .smcg-utility-bar .rmv-share { margin: 0; } .smcg-page .smcg-utility-bar .rmv-share-btn { font-size: 12px; padding: 9px 15px; } .smcg-page #ask-guide-mount .ask-guide { margin: 0 0 30px; } .smcg-page #ask-guide-mount .ask-guide:has(> .ask-guide-details:not([open])) { display: none; } .smcg-page #ask-guide-mount .ask-guide-details { border: 1px solid var(--smcg-gold); border-radius: 12px; background: var(--smcg-surface); } .smcg-page #ask-guide-mount .ask-guide-summary { padding: 28px 32px 0; color: var(--smcg-ink); font-size: 14px; } .smcg-page #ask-guide-mount .ask-guide-body { padding: 0 32px 28px; border-top: 0; font-size: 14px; } /* ── Section headings ────────────────────────────────────────────────────── */ .smcg-page .smcg-section-heading { display: flex; gap: 24px; justify-content: space-between; align-items: end; margin: 0 0 16px; } .smcg-page #main-content .smcg-section-heading h2 { margin: 0; } .smcg-page #main-content .smcg-section-heading > a { font-size: 12px; font-weight: 600; flex-shrink: 0; } .smcg-page #main-content .smcg-section-intro { font-size: 13px; color: var(--smcg-muted); max-width: 790px; margin-bottom: 24px; } /* ── Five paths ──────────────────────────────────────────────────────────── */ .smcg-page .smcg-pathways { scroll-margin-top: 84px; margin-bottom: 45px; } .smcg-page .smcg-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; } .smcg-page .smcg-path-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .smcg-page #main-content .smcg-path { background: var(--smcg-surface); color: var(--smcg-ink); border: 2px solid var(--color-accent); border-radius: 12px; padding: 21px; text-decoration: none; display: flex; flex-direction: column; min-width: 0; position: relative; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; } .smcg-page #main-content .smcg-path:hover { box-shadow: 0 5px 20px #0002; background: var(--smcg-soft); border-color: var(--color-primary); transform: translateY(-2px); } .smcg-page #main-content .smcg-path > img { width: 94px; height: 70px; object-fit: cover; align-self: flex-end; border-radius: 7px; margin-bottom: 14px; } .smcg-page .smcg-path > div { display: flex; flex-direction: column; flex: 1; } .smcg-page .smcg-path-number { font-size: 12px; letter-spacing: 1px; font-weight: 700; color: var(--smcg-muted); margin-bottom: 9px; text-transform: uppercase; } .smcg-page #main-content .smcg-path h3 { font-size: 24px; margin: 0 0 10px; } .smcg-page #main-content .smcg-path p { font-size: 12px; line-height: 1.8; color: var(--smcg-muted); margin: 0 0 15px; } .smcg-page .smcg-path-action { display: flex; gap: 12px; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--smcg-link); border-top: 1px solid var(--smcg-line); padding-top: 12px; margin-top: auto; } /* ── Evidence feature ────────────────────────────────────────────────────── */ .smcg-page .smcg-evidence-feature { display: grid; grid-template-columns: 275px minmax(0, 1fr); gap: 42px; background: var(--smcg-warm); border: 1.5px solid var(--smcg-gold); border-radius: 14px; padding: 36px; margin-bottom: 48px; align-items: center; scroll-margin-top: 84px; } .smcg-page #main-content .smcg-evidence-art img { width: 100%; border-radius: 11px; } .smcg-page #main-content .smcg-evidence-art > p { font: 600 27px/1.3 var(--font-serif); color: var(--smcg-ink); padding-top: 21px; margin: 0; } .smcg-page .smcg-evidence-art em { font-weight: 400; } .smcg-page #main-content .smcg-evidence-copy > p:not(.smcg-eyebrow) { font-size: 13px; line-height: 1.8; color: var(--smcg-muted); } .smcg-page #main-content .smcg-evidence-copy h2 { font-size: 35px; } .smcg-page .smcg-evidence-points { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin: 25px 0; } .smcg-page .smcg-evidence-points > div { border-top: 1px solid var(--smcg-line); padding-top: 13px; display: flex; gap: 12px; } .smcg-page .smcg-evidence-points b { font-size: 12px; color: var(--smcg-link); } .smcg-page .smcg-evidence-points span { font-size: 12px; line-height: 1.8; color: var(--smcg-muted); } .smcg-page .smcg-evidence-points strong { display: block; color: var(--smcg-ink); font-size: 12px; margin-bottom: 5px; } .smcg-page .smcg-evidence-actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .smcg-page #main-content .smcg-evidence-actions > a:last-child { font-size: 12px; font-weight: 600; } /* ── Contents rail and chapters ──────────────────────────────────────────── */ .smcg-page .smcg-guide-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; scroll-margin-top: 84px; } /* The mockup's 20px, measured below the site's 64px sticky navigation. */ .smcg-page .smcg-contents { position: sticky; top: 84px; min-width: 0; } .smcg-page .smcg-guide-body { min-width: 0; } .smcg-page .smcg-contents-disclosure > summary { align-items: center; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--smcg-line); } .smcg-page #main-content nav.guide-nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 10px 0; margin: 0; } .smcg-page #main-content nav.guide-nav a { font-size: 12px; line-height: 1.5; font-weight: 400; text-decoration: none; color: var(--smcg-muted); background: none; padding: 9px 10px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; } .smcg-page #main-content nav.guide-nav a:hover, .smcg-page #main-content nav.guide-nav a[aria-current="location"] { color: var(--smcg-ink); border-left-color: var(--smcg-gold); background: var(--smcg-warm); } .smcg-page .smcg-expand-all { width: 100%; font-size: 12px; margin-top: 12px; justify-content: space-between; } .smcg-page #main-content .smcg-sidebar-calc { display: block; background: var(--smcg-warm); border: 2px solid var(--color-accent); border-radius: 10px; padding: 20px; margin-top: 24px; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } .smcg-page #main-content .smcg-sidebar-calc:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 5px 20px #0001; } .smcg-page #main-content .smcg-sidebar-calc .smcg-eyebrow { font-size: 12px; letter-spacing: 1px; } .smcg-page .smcg-sidebar-calc strong { font: 600 22px/1.25 var(--font-serif); display: block; margin-bottom: 12px; color: var(--smcg-ink); } .smcg-page .smcg-sidebar-calc-text { display: block; font-size: 12px; color: var(--smcg-muted); margin-bottom: 16px; } .smcg-page .smcg-sidebar-calc-go { display: block; font-size: 12px; font-weight: 600; color: var(--smcg-link); } .smcg-page .smcg-reading-heading { margin-bottom: 25px; } .smcg-page #main-content .smcg-reading-heading > p:last-child { font-size: 13px; color: var(--smcg-muted); } .smcg-page .smcg-chapter { border: 1px solid var(--smcg-gold); border-radius: 11px; background: var(--smcg-surface); margin: 0 0 13px; overflow: hidden; } .smcg-page .smcg-chapter > details.guide-details { margin: 0; } .smcg-page .smcg-chapter > details > summary { display: flex; align-items: center; gap: 17px; padding: 22px; min-height: 0; } .smcg-page .smcg-chapter > details > summary::before { content: none; } .smcg-page .smcg-chapter > details[open] > summary { border-bottom: 1px solid var(--smcg-line); } .smcg-page #main-content .smcg-chapter h2 { display: block; font-size: 23px; line-height: 1.25; margin: 0; letter-spacing: normal; } .smcg-page .smcg-section-number { font-size: 12px; color: var(--smcg-muted); flex-shrink: 0; padding-right: 15px; border-right: 1px solid var(--smcg-line); } .smcg-page .smcg-section-sub { display: block; font-size: 12px; line-height: 1.65; color: var(--smcg-muted); margin-top: 5px; } /* C10: the whole header is the trigger; the glyph only reports the state. */ .smcg-page .smcg-sign { display: inline-block; flex-shrink: 0; margin-left: auto; font: 400 22px/1 var(--font-sans); color: var(--smcg-link); transition: transform .2s; } .smcg-page .smcg-chapter > details[open] > summary > .smcg-sign, .smcg-page .smcg-contents-disclosure[open] > summary > .smcg-sign, .smcg-page .smcg-advisor-toggle[aria-expanded="true"] > .smcg-sign, .smcg-page .smcg-expand-all[data-all-open] > .smcg-sign { transform: rotate(45deg); } .smcg-page .smcg-chapter .details-body { padding: 26px 30px; font-size: 14px; line-height: 1.85; } .smcg-page #main-content .details-body p:last-child { margin-bottom: 0; } .smcg-page .details-body ul, .smcg-page .details-body ol { padding-left: 24px; margin: 15px 0 22px; } .smcg-page .details-body li { margin-bottom: 12px; } .smcg-page .details-body strong { font-weight: 650; } .smcg-page #main-content .details-body blockquote { margin: 22px 0 !important; border-left: 3px solid var(--smcg-gold) !important; padding: 5px 0 5px 19px !important; color: var(--smcg-muted) !important; font: italic 18px/1.7 var(--font-serif); } .smcg-page .tip-box, .smcg-page .warning-box { padding: 21px; margin: 22px 0; border: 1px solid var(--smcg-gold); border-left-width: 4px; border-radius: 8px; background: var(--smcg-warm); font-size: 13px; line-height: 1.8; } .smcg-page .warning-box { background: var(--smcg-soft); } .smcg-page #main-content .tip-box p:last-child { margin: 0; } .smcg-page .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; } .smcg-page .compare-card { padding: 22px; border: 1px solid var(--smcg-gold); border-radius: 9px; background: var(--smcg-bg); } .smcg-page #main-content .compare-card h4 { font-size: 25px; margin: 0 0 15px; } .smcg-page #main-content .compare-card p { font-size: 12px; line-height: 1.8; } .smcg-page .rule-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 18px 0; } .smcg-page .rule-table th, .smcg-page .rule-table td { padding: 11px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--smcg-line); color: var(--smcg-ink); } .smcg-page .rule-table th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--smcg-soft); } .smcg-page .smcg-context-visuals { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; border-top: 1px solid var(--smcg-line); margin-top: 22px; } .smcg-page #main-content .smcg-context-visuals a { font-size: 12px; font-weight: 600; } /* ── Visual guides ───────────────────────────────────────────────────────── */ .smcg-page .smcg-resources { margin: 48px 0; padding-top: 32px; border-top: 1px solid var(--smcg-line); scroll-margin-top: 84px; } .smcg-page .smcg-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-top: 25px; } /* The shared viewer finds these by .visual-guide-card; the card look is the mockup's, so the shared inline-figure frame is reset here. */ .smcg-page #main-content .smcg-chart-card { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 22px; align-items: start; padding: 24px; margin: 0; max-width: none; border: 1px solid var(--smcg-gold); border-radius: 11px; background: var(--smcg-surface); box-shadow: none; scroll-margin-top: 84px; } .smcg-page .smcg-chart-thumb { display: block; } .smcg-page #main-content .smcg-chart-card img { width: 100px; height: 125px; object-fit: contain; border: 1px solid var(--smcg-line); border-radius: 5px; background: #fff; } .smcg-page #main-content .smcg-chart-card figcaption { display: block; padding: 0; margin: 0; border: 0; text-align: left; background: none; } .smcg-page #main-content .smcg-chart-card h3 { font-size: 24px; } .smcg-page #main-content .smcg-chart-card h3 strong { font-weight: 600; color: inherit; font-size: inherit; } .smcg-page #main-content .smcg-chart-card p { font-size: 12px; line-height: 1.75; color: var(--smcg-muted); } .smcg-page #main-content .smcg-chart-open { font-size: 12px; font-weight: 600; } /* ── Board outcomes: the live renderer's markup, restyled ────────────────── */ .smcg-page .smcg-research { padding: 32px; margin: 48px 0; background: var(--smcg-surface); border: 1.5px solid var(--smcg-gold); border-radius: 14px; scroll-margin-top: 84px; } .smcg-page .smcg-research-heading { display: flex; justify-content: space-between; gap: 28px; align-items: center; margin-bottom: 25px; } .smcg-page #main-content .smcg-research-heading img { width: 145px; height: 109px; border-radius: 9px; object-fit: cover; flex-shrink: 0; } .smcg-page #main-content .smcg-research-heading p:not(.smcg-eyebrow) { font-size: 13px; color: var(--smcg-muted); margin: 0; } .smcg-page #main-content .smcg-data-note { font-size: 12px; color: var(--smcg-muted); line-height: 1.85; } .smcg-page #main-content .smcg-research > .smcg-button { margin-top: 10px; } /* dc-smc-render.js writes inline styles; these win only inside this page. */ .smcg-page #smc-level-outcomes > .guide-section { margin: 0; } .smcg-page #main-content #smc-level-outcomes > .guide-section > h2 { font: 700 12px/1.6 var(--font-sans) !important; letter-spacing: 1.7px; text-transform: uppercase; color: var(--smcg-muted) !important; border: 0 !important; padding: 0 !important; margin: 0 0 10px !important; } .smcg-page #main-content #smc-level-outcomes h3 { font-size: 22px !important; color: var(--smcg-ink) !important; margin: 18px 0 12px !important; } .smcg-page #main-content #smc-level-outcomes p { color: var(--smcg-muted) !important; font-size: 12px !important; line-height: 1.85 !important; } .smcg-page #main-content #smc-level-outcomes p strong { color: var(--smcg-ink); } .smcg-page #smc-level-outcomes .guide-section > div > div:first-of-type { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; padding: 22px 0; border-top: 1px solid var(--smcg-line); border-bottom: 1px solid var(--smcg-line); } .smcg-page #smc-level-outcomes .guide-section > div > div:first-of-type > div { background: none !important; border: 0 !important; padding: 0 !important; } .smcg-page #smc-level-outcomes .guide-section > div > div:first-of-type > div > div:first-child { font: 600 36px/1.2 var(--font-serif) !important; color: var(--smcg-ink) !important; } .smcg-page #smc-level-outcomes .guide-section > div > div:first-of-type > div > div:last-child { font-size: 12px !important; color: var(--smcg-muted) !important; } .smcg-page #smc-level-outcomes table { font-size: 12px !important; line-height: 1.75; } .smcg-page #smc-level-outcomes th, .smcg-page #smc-level-outcomes td { padding: 11px 0 !important; border-bottom: 1px solid var(--smcg-line) !important; color: var(--smcg-ink); } .smcg-page #smc-level-outcomes th { font-size: 12px; font-weight: 600; color: var(--smcg-muted); } .smcg-page #smc-level-outcomes td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── Related, disclaimer ─────────────────────────────────────────────────── */ .smcg-page #main-content .smcg-related { margin: 48px 0 30px; padding-top: 32px; border-top: 1px solid var(--smcg-line); } .smcg-page #main-content .smcg-related .rel-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 25px; } .smcg-page #main-content .smcg-related .rel-card { display: flex; flex-direction: column; text-decoration: none; background: var(--smcg-surface); border: 2px solid var(--color-accent); border-radius: 11px; padding: 23px; } .smcg-page #main-content .smcg-related .rel-card:hover { background: var(--smcg-soft); border-color: var(--color-primary); } .smcg-page .smcg-related .rel-card .rc-t { font: 600 23px/1.3 var(--font-serif); color: var(--smcg-ink); margin-bottom: 12px; } .smcg-page .smcg-related .rel-card .rc-d { font-size: 12px; line-height: 1.8; color: var(--smcg-muted); margin-bottom: 15px; } .smcg-page .smcg-related-more { display: block; font-size: 12px; font-weight: 600; color: var(--smcg-link); margin-top: auto; } .smcg-page #main-content .smcg-related .smcg-related-distinct { grid-column: span 3; display: block; background: var(--smcg-warm); } .smcg-page .smcg-related .smcg-related-distinct .rc-d { max-width: 790px; } .smcg-page .smcg-disclaimer { background: var(--smcg-soft); padding: 22px; border-radius: 8px; margin-top: 30px; } .smcg-page #main-content .smcg-disclaimer p { margin: 0; font-size: 12px; color: var(--smcg-muted); line-height: 1.85; } /* ── Narrower screens (the mockup's 1040 / 760 / 350 steps) ──────────────── */ @media (max-width: 1040px) { .smcg-page #main-content > .container { padding-left: 28px; padding-right: 28px; } .smcg-page .smcg-hero { grid-template-columns: minmax(0, 1fr) 245px; gap: 32px; } .smcg-page #main-content h1 { font-size: 42px; } .smcg-page #main-content .smcg-rate-preview > img { height: 165px; } .smcg-page .smcg-rate-preview > div { padding: 20px; } .smcg-page #main-content .smcg-amount { font-size: 34px; } .smcg-page #main-content .smcg-path { padding: 18px; } .smcg-page #main-content .smcg-path h3 { font-size: 23px; } .smcg-page .smcg-evidence-feature { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; padding: 28px; } .smcg-page .smcg-evidence-points { gap: 12px; } .smcg-page .smcg-evidence-points > div { display: block; } .smcg-page #main-content .smcg-evidence-copy h2 { font-size: 31px; } .smcg-page .smcg-guide-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 27px; } .smcg-page #main-content .smcg-chart-card { grid-template-columns: 76px minmax(0, 1fr); gap: 17px; padding: 20px; } .smcg-page #main-content .smcg-chart-card img { width: 76px; height: 95px; } } @media (max-width: 760px) { .smcg-page .smcg-pathways { margin-bottom: 31px; } .smcg-page #main-content { padding-top: 9px; } .smcg-page #main-content > .container { padding: 0 20px 30px; } .smcg-page .smcg-hero { display: block; margin-bottom: 23px; } .smcg-page #main-content h1 { font-size: 36px; line-height: 1.13; letter-spacing: -1px; margin: 11px 0 21px; } .smcg-page #main-content .smcg-eyebrow { font-size: 12px; letter-spacing: 1.35px; } .smcg-page #main-content .smcg-lede { font-size: 14px; } .smcg-page #main-content .smcg-meta { margin: 19px 0; } .smcg-page .smcg-hero-actions { gap: 16px; } .smcg-page .smcg-rate-preview { display: grid; grid-template-columns: 100px minmax(0, 1fr); margin-top: 26px; } .smcg-page #main-content .smcg-rate-preview > img { width: 100%; height: 100%; object-fit: contain; background: #fff5e6; border-right: 1px solid var(--smcg-gold); border-bottom: 0; } .smcg-page .smcg-rate-preview > div { padding: 17px 19px; } .smcg-page #main-content .smcg-rate-preview .smcg-eyebrow { font-size: 12px; letter-spacing: 1px; } .smcg-page #main-content .smcg-amount { font-size: 32px; margin: 6px 0 12px; } .smcg-page .smcg-amount > span { font-size: 12px; } .smcg-page #main-content .smcg-rate-caption { margin-bottom: 10px; line-height: 1.7; } .smcg-page #main-content .smcg-rate-preview a { padding-top: 10px; } .smcg-page .smcg-utility-bar { flex-wrap: wrap; gap: 8px; margin-bottom: 29px; padding: 13px 0; align-items: stretch; } .smcg-page .smcg-utility-main { gap: 7px; flex: 1; } .smcg-page .smcg-utility-main .tldr-btn, .smcg-page .smcg-advisor-toggle { font-size: 12px; padding: 10px 11px; gap: 9px; } .smcg-page .smcg-utility-bar .rmv-share-btn { font-size: 12px; padding: 9px 11px; } .smcg-page #ask-guide-mount .ask-guide-summary { padding: 21px 19px 0; } .smcg-page #ask-guide-mount .ask-guide-body { padding: 0 19px 21px; } .smcg-page .smcg-section-heading { display: block; } .smcg-page #main-content .smcg-section-heading h2 { font-size: 29px; margin-bottom: 14px; } .smcg-page #main-content .smcg-section-heading > a { font-size: 12px; } .smcg-page #main-content .smcg-section-intro { font-size: 12px; line-height: 1.8; margin: 17px 0 23px; } .smcg-page .smcg-path-grid { display: flex; flex-direction: column; gap: 14px; } .smcg-page #main-content .smcg-path { display: grid; grid-template-columns: 100px minmax(0, 1fr); padding: 0; overflow: hidden; min-height: 213px; } .smcg-page #main-content .smcg-path > img { width: 100%; height: 100%; object-fit: cover; align-self: stretch; margin: 0; border-radius: 0; border-bottom: 0; border-right: 1px solid var(--smcg-gold); } .smcg-page .smcg-path > div { padding: 20px 17px; } .smcg-page .smcg-path-number { font-size: 12px; letter-spacing: .7px; line-height: 1.65; margin-bottom: 10px; } .smcg-page #main-content .smcg-path h3 { font-size: 26px; line-height: 1.13; margin-bottom: 12px; } .smcg-page #main-content .smcg-path p { font-size: 12px; line-height: 1.8; margin-bottom: 13px; } .smcg-page .smcg-path-action { font-size: 12px; gap: 7px; padding-top: 11px; } .smcg-page .smcg-evidence-feature { display: block; padding: 23px; margin-bottom: 33px; } .smcg-page .smcg-evidence-art { display: flex; align-items: center; gap: 19px; margin-bottom: 26px; } .smcg-page #main-content .smcg-evidence-art img { width: 92px; height: 92px; object-fit: cover; } .smcg-page #main-content .smcg-evidence-art > p { font-size: 22px; line-height: 1.25; padding: 0; } .smcg-page #main-content .smcg-evidence-copy h2 { font-size: 30px; } .smcg-page #main-content .smcg-evidence-copy > p:not(.smcg-eyebrow) { font-size: 12px; } .smcg-page .smcg-evidence-points { display: block; margin: 22px 0; } .smcg-page .smcg-evidence-points > div { display: flex; gap: 13px; padding: 14px 0; } .smcg-page .smcg-evidence-points span { font-size: 12px; } .smcg-page .smcg-evidence-actions { gap: 15px; } .smcg-page .smcg-guide-layout { display: flex; flex-direction: column; gap: 27px; } .smcg-page .smcg-contents { position: static; width: 100%; border: 1px solid var(--smcg-line); border-radius: 10px; background: var(--smcg-surface); padding: 0 16px; } .smcg-page .smcg-contents-disclosure > summary { border-bottom: 0; padding: 15px 0; font-size: 12px; } .smcg-page .smcg-contents-disclosure[open] > summary { border-bottom: 1px solid var(--smcg-line); } .smcg-page #main-content nav.guide-nav a { padding: 11px; } .smcg-page .smcg-expand-all { margin: 0 0 13px; } .smcg-page #main-content .smcg-sidebar-calc { margin: 0 0 17px; padding: 17px; } .smcg-page .smcg-guide-body { width: 100%; } .smcg-page #main-content .smcg-reading-heading h2 { font-size: 29px; } .smcg-page #main-content .smcg-reading-heading > p:last-child { font-size: 12px; } .smcg-page .smcg-chapter > details > summary { gap: 12px; padding: 19px 17px; } .smcg-page .smcg-section-number { display: none; } .smcg-page .smcg-chapter .details-body { padding: 21px 20px; font-size: 13px; } .smcg-page #main-content .details-body blockquote { font-size: 17px; } .smcg-page .tip-box, .smcg-page .warning-box { padding: 17px; font-size: 12px; } .smcg-page .compare-grid { grid-template-columns: 1fr; gap: 14px; } .smcg-page .compare-card { padding: 20px; } .smcg-page .smcg-resources { margin: 34px 0; padding-top: 24px; } .smcg-page .smcg-chart-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 22px; } .smcg-page #main-content .smcg-chart-card { grid-template-columns: 69px minmax(0, 1fr); gap: 17px; padding: 19px; } .smcg-page #main-content .smcg-chart-card img { width: 69px; height: 87px; } .smcg-page #main-content .smcg-chart-card h3 { font-size: 23px; } .smcg-page .smcg-research { padding: 22px; margin: 34px 0; } .smcg-page .smcg-research-heading { display: block; } .smcg-page #main-content .smcg-research-heading img { width: 100px; height: 75px; margin-top: 19px; } .smcg-page #main-content .smcg-research-heading h2 { font-size: 30px; } .smcg-page #main-content .smcg-research-heading p:not(.smcg-eyebrow) { font-size: 12px; } .smcg-page #smc-level-outcomes .guide-section > div > div:first-of-type { grid-template-columns: 1fr 1fr !important; gap: 21px 18px !important; } .smcg-page #smc-level-outcomes .guide-section > div > div:first-of-type > div > div:first-child { font-size: 33px !important; } .smcg-page #smc-level-outcomes table { font-size: 12px !important; } .smcg-page #main-content .smcg-related { margin: 34px 0 25px; padding-top: 25px; } .smcg-page #main-content .smcg-related .rel-cards { grid-template-columns: 1fr; gap: 13px; } .smcg-page #main-content .smcg-related .rel-card { padding: 22px; } .smcg-page #main-content .smcg-related .smcg-related-distinct { grid-column: auto; } .smcg-page .smcg-related .rel-card .rc-t { font-size: 25px; } } @media (max-width: 350px) { .smcg-page #main-content > .container { padding-left: 16px; padding-right: 16px; } .smcg-page #main-content h1 { font-size: 33px; } .smcg-page .smcg-rate-preview { grid-template-columns: 77px minmax(0, 1fr); } .smcg-page .smcg-rate-preview > div { padding: 16px; } .smcg-page #main-content .smcg-amount { font-size: 30px; } .smcg-page #main-content .smcg-path { grid-template-columns: 82px minmax(0, 1fr); } .smcg-page .smcg-path > div { padding: 17px 14px; } .smcg-page #main-content .smcg-path h3 { font-size: 24px; } .smcg-page .smcg-evidence-feature { padding: 20px; } .smcg-page .smcg-evidence-art { gap: 14px; } .smcg-page #main-content .smcg-evidence-art img { width: 75px; height: 75px; } .smcg-page #main-content .smcg-evidence-art > p { font-size: 20px; } .smcg-page #main-content .smcg-chart-card { grid-template-columns: 53px minmax(0, 1fr); gap: 13px; padding: 17px; } .smcg-page #main-content .smcg-chart-card img { width: 53px; height: 67px; } .smcg-page .smcg-research { padding: 18px; } } @media (prefers-reduced-motion: reduce) { .smcg-page #main-content .smcg-path, .smcg-page #main-content .smcg-sidebar-calc, .smcg-page #main-content .smcg-button, .smcg-page .smcg-utility-main .tldr-btn, .smcg-page .smcg-advisor-toggle, .smcg-page .smcg-expand-all, .smcg-page .smcg-sign { transition: none; } } @media print { .smcg-page .smcg-utility-bar, .smcg-page .smcg-contents { display: none; } .smcg-page .smcg-guide-layout { display: block; } .smcg-page .smcg-chapter { break-inside: avoid; } } /* Meta line: the site's .meta-line rule draws a divider the mockup does not. */ .smcg-page #main-content .smcg-meta { border: 0; padding: 0; } /* Board tables side by side above the phone step, as the mockup lays them out. Children of the level block: heading, figures, denominator note, then the denial group (title, explanation, table, ungrouped note) and the evidence group (title, table). Placement degrades to one column if a group is absent. */ @media (min-width: 761px) { .smcg-page #smc-level-outcomes .guide-section > div:has(> div + .smcg-denominator) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; } .smcg-page #smc-level-outcomes .guide-section > div:has(> div + .smcg-denominator) > :nth-child(-n+3) { grid-column: 1 / -1; } .smcg-page #smc-level-outcomes .guide-section > div:has(> div + .smcg-denominator) > :nth-child(n+4) { grid-column: 1; } .smcg-page #smc-level-outcomes .guide-section > div:has(> div + .smcg-denominator) > :nth-last-child(2) { grid-column: 2; grid-row: 4; } .smcg-page #smc-level-outcomes .guide-section > div:has(> div + .smcg-denominator) > :nth-last-child(1) { grid-column: 2; grid-row: 5 / span 3; } } /* Owner 2026-09-13: the two Board table titles and their column headings, larger. */ .smcg-page #main-content #smc-level-outcomes p[style*="font-weight:600"] { font-size: 16px !important; font-weight: 700 !important; color: var(--smcg-ink) !important; margin: 18px 0 8px !important; } .smcg-page #main-content #smc-level-outcomes th { font-size: 13px !important; font-weight: 700; color: var(--smcg-ink) !important; } .smcg-page #main-content #smc-level-outcomes .smcg-denial-explain { margin-top: 18px !important; } /* ── Static reference tables, case quotations and sources (Chunk 3) ─────── */ .smcg-page .rate-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 18px 0; } .smcg-page .rate-table th, .smcg-page .rate-table td { padding: 11px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--smcg-line); color: var(--smcg-ink); } .smcg-page .rate-table th { font-size: 12px; font-weight: 700; background: var(--smcg-soft); } .smcg-page .rate-table td.num { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .smcg-page .case-snippet { background: var(--smcg-warm); border-left: 3px solid var(--smcg-gold); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 14px 0 20px; font: italic 15px/1.7 var(--font-serif); color: var(--smcg-ink); } .smcg-page .case-snippet .case-cite { display: block; font: 400 12px/1.7 var(--font-sans); color: var(--smcg-muted); margin-top: 8px; } .smcg-page #main-content .smcg-amount-text { font-size: 26px; line-height: 1.2; } .smcg-page .smcg-sources { margin: 30px 0 0; padding: 22px; background: var(--smcg-soft); border-radius: 8px; } .smcg-page #main-content .smcg-sources h2 { font-size: 22px; margin: 0 0 10px; } .smcg-page .smcg-sources .sources-list { padding-left: 20px; margin: 0 0 12px; font-size: 13px; line-height: 1.8; } .smcg-page #main-content .smcg-sources-note { font-size: 12px; line-height: 1.85; color: var(--smcg-muted); margin: 0; } @media (max-width: 760px) { .smcg-page .rate-table th, .smcg-page .rate-table td { padding: 9px 8px; } } /* ── Authored care research, topic links (Chunk 4: SMC-R1/R2 and SMC-T) ──── */ /* The pages' own chart rules, moved here from their inline