/* İkon Dental — blog / roundup article styles. Uses the variables defined in /styles.css. */

.bl-article { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Byline + reviewed-by bar */
.bl-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 22px 0 0; font-size: 14px; color: var(--muted); }
.bl-byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
.bl-byline strong { color: var(--ink); font-weight: 600; }
.bl-byline a { color: var(--blue-deep); text-decoration: none; }
.bl-byline a:hover { text-decoration: underline; }
.bl-byline .bl-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--dim); }

/* Lead / key takeaways */
.bl-lead { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.7; color: var(--text); max-width: 820px; }
.bl-takeaways { margin: 28px 0 0; padding: 22px 26px; border: 1px solid var(--tp-line); border-radius: var(--radius-lg); background: var(--ice); max-width: 820px; }
.bl-takeaways h2 { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-deep); margin: 0 0 12px; font-family: var(--sans); font-weight: 700; }
.bl-takeaways ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; line-height: 1.6; }

/* Category legend / filter chips */
.bl-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 6px; padding: 0; list-style: none; }
.bl-legend a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.bl-legend a:hover { border-color: var(--blue); box-shadow: var(--glow); }
.bl-legend b { font-weight: 700; color: var(--blue-deep); }

/* Group heading */
.bl-group { padding-top: clamp(34px, 5vw, 64px); scroll-margin-top: 90px; }
.bl-group > header { max-width: 820px; margin-bottom: 26px; }
.bl-group > header p { color: var(--muted); line-height: 1.7; }

/* Celebrity card */
.bl-list { display: grid; gap: 22px; }
.tp { counter-reset: celeb; }
.bl-card { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow); scroll-margin-top: 90px; }
.bl-card figure { margin: 0; }
.bl-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--radius); background: var(--ice); display: block; }
.bl-card figcaption { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--dim); }
.bl-card figcaption a { color: inherit; }
.bl-card h3 { margin: 4px 0 10px; font-size: clamp(22px, 2vw, 27px); line-height: 1.2; }
.bl-card h3::before { counter-increment: celeb; content: counter(celeb, decimal-leading-zero); display: block; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--blue); margin-bottom: 6px; }
.bl-card p { margin: 0 0 12px; line-height: 1.72; }
.bl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.bl-tags li { font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; background: var(--ice); color: var(--blue-deep); border: 1px solid var(--tp-line); }
.bl-tags li.is-said { background: #eaf6f0; color: var(--tp-ok); border-color: rgba(20, 132, 90, .25); }
.bl-tags li.is-reported { background: #fbf2e9; color: var(--tp-warn); border-color: rgba(180, 97, 28, .25); }
.bl-ortho { margin: 12px 0 0; padding: 12px 16px; border-left: 3px solid var(--blue); background: var(--ice); border-radius: 0 var(--radius) var(--radius) 0; font-size: 15px; line-height: 1.65; }
.bl-ortho strong { color: var(--blue-deep); }
.bl-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 600; color: var(--blue-deep); text-decoration: none; }
.bl-more:hover { text-decoration: underline; }

/* Comparison table */
.bl-table-wrap { overflow-x: auto; margin: 24px 0 0; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.bl-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.bl-table th, .bl-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.bl-table thead th { background: var(--ice); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); }
.bl-table tbody tr:last-child td { border-bottom: 0; }

/* Sources + disclaimer */
.bl-sources { margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.bl-sources ol { padding-left: 1.3em; display: grid; gap: 6px; }
.bl-sources a { color: var(--blue-deep); word-break: break-word; }
.bl-note { margin-top: 26px; font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 820px; }

@media (max-width: 640px) {
  .bl-card { grid-template-columns: 1fr; padding: 16px; }
  .bl-card img { aspect-ratio: 16 / 11; }
}

/* Inline helpers */
.bl-article-intro { max-width: 860px; }
.bl-article-intro h3 { margin: 26px 0 8px; font-size: clamp(19px, 1.6vw, 22px); }
.bl-article-intro p { line-height: 1.75; }
.bl-inline-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.bl-inline-tag.is-said { background: #eaf6f0; color: var(--tp-ok); border-color: rgba(20, 132, 90, .25); }
.bl-inline-tag.is-reported { background: #fbf2e9; color: var(--tp-warn); border-color: rgba(180, 97, 28, .25); }
.bl-ref { font-size: .7em; line-height: 0; margin-left: 1px; }
.bl-ref a { color: var(--blue); text-decoration: none; font-weight: 700; }
.bl-card q { quotes: "\201C" "\201D"; font-style: italic; color: var(--ink); }
.bl-group .tp-kicker { display: block; }

/* Byline inside the dark hero */
.tp-hero .bl-byline { color: rgba(255, 255, 255, .72); }
.tp-hero .bl-byline strong, .tp-hero .bl-byline a { color: #fff; }
.tp-hero .bl-byline .bl-dot { background: rgba(255, 255, 255, .45); }
.bl-takeaways ul { list-style: disc; }
.bl-takeaways li::marker { color: var(--blue); }

.bl-ph { aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--grad); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-size: 56px; letter-spacing: .04em; }

/* ---------- Blog home (/en/blog) ---------- */
.bl-index-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(8px, 2vw, 20px); max-width: 900px; }
.bl-index-hero h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.05; margin: 0; }
.bl-index-hero h1 span { display: block; margin-top: 16px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--muted); font-family: var(--sans); }
.bl-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 3.5vw, 48px); align-items: center; padding: clamp(18px, 2.2vw, 28px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-lift); }
.bl-feature-media { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bl-feature-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); display: block; transition: transform .4s var(--ease); }
.bl-feature-media:hover img { transform: scale(1.02); }
.bl-feature-copy h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; margin: 10px 0 14px; }
.bl-feature-copy h2 a, .bl-post h3 a { color: var(--ink); text-decoration: none; }
.bl-feature-copy h2 a:hover, .bl-post h3 a:hover { color: var(--blue-deep); }
.bl-feature-copy > p { line-height: 1.7; color: var(--text); }
.bl-feature-copy .bl-legend { margin: 18px 0 22px; }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; font-size: 13px; color: var(--muted); }
.bl-cat { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-deep); }
.bl-reviewed { font-size: 14px; color: var(--muted) !important; }
.bl-reviewed a { color: var(--blue-deep); font-weight: 600; text-decoration: none; }
.bl-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.bl-post img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin-bottom: 12px; }
.bl-post h3 { margin: 8px 0; font-size: 22px; line-height: 1.25; }
.bl-topics { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.bl-topics li { padding: 20px 22px; border: 1px solid var(--tp-line); border-radius: var(--radius-lg); background: var(--ice); display: grid; gap: 6px; }
.bl-topics strong { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.bl-topics span { color: var(--muted); line-height: 1.6; font-size: 15px; }
@media (max-width: 960px) { .bl-feature { grid-template-columns: 1fr; } }

/* ---------- Inserted blocks between celebrity groups ---------- */
.bl-insert { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(22px, 3vw, 44px); align-items: start; margin: clamp(30px, 4vw, 54px) 0 0; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-lg); background: linear-gradient(140deg, #f2f8fc 0%, #e6f3fb 100%); border: 1px solid var(--tp-line); }
.bl-insert h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; margin: 6px 0 12px; }
.bl-insert p { line-height: 1.7; }
.bl-insert .tp-kicker { display: block; }
.bl-insert-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 18px; }
.bl-insert-links > a:not(.button) { font-weight: 600; color: var(--blue-deep); text-decoration: none; }
.bl-insert .price-table-wrap { background: #fff; border-radius: var(--radius); }
.bl-insert-sec { margin-top: clamp(30px, 4vw, 54px); }
.bl-insert-sec .stories-grid.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .bl-insert { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .bl-insert-sec .stories-grid.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Single-celebrity article (spoke) ---------- */
.sp-hero-media img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.sp-hero-media figcaption { font-size: 11px; }
.sp-answer p { margin: 0 0 10px; line-height: 1.75; font-size: 17px; }
.sp-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(22px, 3vw, 44px); align-items: start; }
.sp-plain { max-width: 860px; }
.sp-text { max-width: 820px; }
.sp-text p { line-height: 1.78; }
.sp-text h3 { margin: 24px 0 8px; font-size: clamp(19px, 1.6vw, 22px); }
.sp-fig { margin: 6px 0 0; position: sticky; top: 100px; }
.sp-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--radius-lg); box-shadow: var(--shadow); display: block; }
.sp-fig figcaption { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--dim); }
.sp-fig figcaption strong { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.sp-fig figcaption a { color: inherit; }
.sp-verdict { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sp-verdict.is-true { background: #eaf6f0; color: var(--tp-ok); }
.sp-verdict.is-false { background: #fdecec; color: #b42318; }
.sp-verdict.is-unproven { background: #fbf2e9; color: var(--tp-warn); }
@media (max-width: 960px) { .sp-split { grid-template-columns: 1fr; } .sp-fig { position: static; max-width: 320px; } }
.bl-card-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 0; }
.bl-more.is-story { color: #fff; background: var(--grad); padding: 8px 16px; border-radius: 999px; text-decoration: none; box-shadow: var(--glow); }
.bl-more.is-story:hover { text-decoration: none; filter: brightness(1.05); }
.bl-post img { aspect-ratio: 4 / 5; object-position: center 20%; }

.sp-text h2 { margin-bottom: 18px; }
.sp-text p { margin: 0 0 16px; }
.bl-card p { margin: 0 0 12px; }

/* Card links: "Read the full story →" / "About this treatment →" */
.bl-card-links { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 16px 0 0; }
.bl-card-links .bl-more { display: inline-flex; align-items: center; gap: 6px; padding: 0 0 8px; margin: 0; border-bottom: 1.5px solid var(--tp-line); color: var(--blue-deep); font-weight: 600; font-size: 15.5px; text-decoration: none; background: none; box-shadow: none; border-radius: 0; transition: border-color .2s var(--ease), color .2s var(--ease); }
.bl-card-links .bl-more:hover { color: var(--blue); border-bottom-color: var(--blue); text-decoration: none; }
.bl-card-links .bl-more span { transition: transform .2s var(--ease); }
.bl-card-links .bl-more:hover span { transform: translateX(3px); }

/* ---------- v6: landscape card shots + hero mosaic ---------- */
.bl-card { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: clamp(20px, 2.6vw, 36px); align-items: center; padding: clamp(16px, 1.8vw, 24px); }
.bl-shot { margin: 0; }
.bl-shot-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.bl-shot-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 0; transition: transform .5s var(--ease); }
.bl-card:hover .bl-shot-media img { transform: scale(1.025); }
.bl-shot-label { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 10px; background: rgba(6, 34, 52, .72); color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; border: 1px solid rgba(143, 216, 247, .45); backdrop-filter: blur(4px); }
.bl-shot figcaption { margin-top: 8px; font-size: 11px; color: var(--dim); }
.bl-shot figcaption a { color: inherit; }
.bl-card .bl-ph { aspect-ratio: 3 / 2; }
.bl-mosaic { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; padding: 8px; background: rgba(255, 255, 255, .06); }
.bl-mosaic-tile { position: relative; display: block; overflow: hidden; border-radius: 16px; min-height: 0; }
.bl-mosaic-tile.is-main { grid-row: 1 / span 2; }
.bl-mosaic-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.bl-mosaic-tile:hover img { transform: scale(1.04); }
.bl-mosaic-tile span { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(6, 34, 52, .7); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; border: 1px solid rgba(143, 216, 247, .4); }
@media (max-width: 960px) { .bl-card { grid-template-columns: 1fr; } }
.bl-mosaic::before { display: none; }
.bl-mosaic { background: #052a3e; }
.bl-mosaic-tile img { position: absolute; inset: 0; object-position: 50% 30%; }
.bl-mosaic-tile span { z-index: 2; }
@media (max-width: 960px) { .bl-mosaic { aspect-ratio: 4 / 3; } }
.bl-mosaic { position: relative; }
.bl-mosaic-badge { position: absolute; top: 18px; right: 18px; z-index: 3; padding: 8px 12px; border-radius: 12px; background: rgba(6, 34, 52, .6); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(4px); line-height: 0; }
.bl-mosaic-badge img { position: static !important; width: 92px !important; height: auto !important; }

/* ---------- v10: spoke intro + contents box ---------- */
.sp-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.sp-intro .sp-answer { margin: 0; max-width: none; }
.sp-intro .sp-answer p { font-size: 16.5px; }
.sp-toc { position: sticky; top: 96px; padding: 22px 24px; border-radius: var(--radius-lg); border: 1px solid var(--tp-line); background: #fff; box-shadow: var(--shadow); }
.sp-toc h2 { margin: 0 0 12px; font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--blue-deep); }
.sp-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 4px; }
.sp-toc li { counter-increment: toc; display: grid; grid-template-columns: 30px 1fr; align-items: baseline; }
.sp-toc li::before { content: counter(toc) "."; color: var(--blue); font-weight: 700; font-size: 15px; }
.sp-toc a { color: var(--ink); text-decoration: none; font-size: 15.5px; line-height: 1.45; padding: 3px 0; }
.sp-toc a:hover { color: var(--blue-deep); text-decoration: underline; }
.sp-wide { max-width: none; }
.sp-plain p { line-height: 1.78; margin: 0 0 16px; }
.sp-plain h3 { margin: 24px 0 8px; font-size: clamp(19px, 1.6vw, 22px); }
.sp-plain h2 { margin-bottom: 18px; }
@media (max-width: 960px) { .sp-intro { grid-template-columns: 1fr; } .sp-toc { position: static; } }

/* ---------- v11: wide in-article figures (branded 1600px images) ---------- */
.sp-wide-fig { margin: 26px 0 8px; }
.sp-wide-fig img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.sp-wide-fig figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.sp-wide-fig figcaption small { font-size: 12px; color: var(--dim); }
.sp-hero-wide img { object-fit: cover; object-position: center 30%; }

/* ---------- v12: mobile & tablet polish ---------- */
.bl-table td, .bl-table th { overflow-wrap: anywhere; }
.bl-sources li, .bl-sources a { overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .sp-hero-media figcaption { position: static; display: block; margin: 0; padding: 8px 14px; border: 0; border-radius: 0; background: rgba(5, 42, 62, .92); font-size: 10px; letter-spacing: .04em; text-transform: none; }
  .sp-hero-media img { position: relative; height: auto; aspect-ratio: 4 / 3; object-position: center 25%; }
  .sp-hero-media { aspect-ratio: auto !important; }
  .sp-toc { padding: 18px 18px; }
}
@media (max-width: 640px) {
  .tp-hero .bl-byline .bl-dot { display: none; }
  .tp-hero .bl-byline { gap: 10px 14px; font-size: 13.5px; }
  .sp-sec h2, .bl-group h2, #lessons h2, #faq h2, #related h2, #myths h2 { font-size: clamp(27px, 7.4vw, 33px); line-height: 1.12; }
  .sp-text h3, .sp-plain h3, .bl-article-intro h3 { font-size: 19px; }
  .sp-text p, .sp-plain p, .bl-card p, .bl-article-intro p { font-size: 16px; line-height: 1.72; }
  .bl-lead { font-size: 16.5px; }
  .sp-wide-fig { margin: 20px 0 6px; }
  .sp-wide-fig img { border-radius: var(--radius); }
  .sp-wide-fig figcaption { font-size: 13px; }
  .bl-post img { aspect-ratio: 4 / 3; }
  .bl-index-hero h1 { font-size: clamp(36px, 10vw, 46px); }
  .bl-feature { padding: 14px; }
  .bl-insert { padding: 18px; }
  .bl-insert h2 { font-size: 24px; }
  .bl-card-links { gap: 10px 22px; }
  .bl-card-links .bl-more { font-size: 15px; }
  /* tables become stacked cards */
  .bl-table-wrap { overflow: visible; border: 0; }
  .bl-table { min-width: 0; font-size: 15px; }
  .bl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bl-table, .bl-table tbody, .bl-table tr, .bl-table th, .bl-table td { display: block; width: 100%; }
  .bl-table tr { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
  .bl-table th, .bl-table td { padding: 6px 0; border: 0; }
  .bl-table th[scope="row"] { font-size: 16.5px; color: var(--ink); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .bl-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 2px; }
  .bl-table th[data-label]::before { content: none; }
}
@media (max-width: 380px) {
  .bl-card { padding: 12px; }
  .sp-toc a { font-size: 15px; }
}

/* ---------- v13: wide branded hero images (labels/logos must stay fully visible) ---------- */
.sp-hero-wide { display: flex; align-items: center; justify-content: center; background: var(--navy); padding: clamp(14px, 2vw, 28px); }
.sp-hero-wide::before { display: none; }
.sp-hero-wide img { position: static; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
@media (max-width: 960px) {
  .sp-hero-media.sp-hero-wide { aspect-ratio: auto !important; padding: 12px 12px 0; }
  .sp-hero-wide img { aspect-ratio: 3 / 2; border-radius: 12px; }
}

/* v14 — article layout: centred reading column + sticky rail (contents + CTA), no empty space on the right */
.tp.sp-page { max-width: 1440px; }
.sp-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(290px, 23vw, 340px); gap: var(--inset); align-items: start; }
.sp-main { min-width: 0; }
.sp-main .sp-plain, .sp-main .sp-text { max-width: 900px; }
.sp-main #short-answer .sp-intro { display: block; }
.sp-main #short-answer .sp-toc { display: none; }
.sp-rail { position: sticky; top: calc(var(--hh, 92px) + 16px); margin-top: var(--inset); }
.sp-rail-in { display: grid; gap: 14px; max-height: calc(100vh - var(--hh, 92px) - 40px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 2px; }
.sp-toc-rail { position: static; padding: 20px 20px 16px; }
.sp-toc-rail h2 { margin-bottom: 10px; }
.sp-toc-rail li { grid-template-columns: 26px 1fr; }
.sp-toc-rail li::before { font-size: 13.5px; }
.sp-toc-rail a { font-size: 14px; line-height: 1.4; padding: 3px 6px; margin-left: -6px; border-radius: 8px; display: block; }
.sp-toc-rail a[aria-current] { background: var(--ice, #eaf6fc); color: var(--blue-deep); font-weight: 600; text-decoration: none; }
.sp-rail-cta { padding: 22px 20px; border-radius: var(--radius-lg, 22px); color: #fff; background: radial-gradient(ellipse at 100% 0, rgba(143, 216, 247, .28), transparent 60%), linear-gradient(160deg, #0b3a56, #062234); box-shadow: var(--shadow); }
.sp-rail-kicker { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #8fd8f7; margin-bottom: 8px; }
.sp-rail-cta .sp-rail-title { margin: 0 0 10px; font: 400 25px/1.15 var(--serif); color: #fff; }
.sp-rail-cta p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.sp-rail-cta .button { width: 100%; justify-content: center; }
@media (max-width: 1180px) {
  .sp-layout { display: block; }
  .sp-rail { display: none; }
  .sp-main #short-answer .sp-intro { display: grid; }
  .sp-main #short-answer .sp-toc { display: block; }
}
@media (max-width: 960px) { .sp-main #short-answer .sp-intro { grid-template-columns: 1fr; } }