/* Shared public resources: visual guide and mentions. */
.resource-page { color: var(--product-ink); background: var(--site-background); }
.resource-main { padding-top: 72px; }
.resource-shell { width: min(1120px, calc(100% - 80px)); margin-inline: auto; }
.resource-hero { padding: 88px 0 56px; }
.resource-hero .product-eyebrow { margin-bottom: 22px; }
.resource-hero h1 { max-width: 1000px; font-size: clamp(44px, 6vw, 76px); font-weight: 650; letter-spacing: -.065em; line-height: 1.12; text-wrap: balance; }
.resource-intro { max-width: 700px; margin-top: 24px; color: var(--product-muted); font-size: 18px; line-height: 1.8; }
.resource-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.resource-jump a { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--product-line); border-radius: 999px; font-size: 13px; }
.resource-jump a:hover { background: var(--product-tint); border-color: var(--product-accent); }
.resource-page h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 650; line-height: 1.3; letter-spacing: -.045em; text-wrap: balance; }
.resource-index { margin-bottom: 14px; color: var(--product-accent); font-size: 12px; font-weight: 650; letter-spacing: .08em; }
.resource-caption { color: var(--product-muted); font-size: 12px; line-height: 1.8; }
.resource-text-link { display: inline-block; padding-block: 12px; font-size: 13px; text-decoration: underline; text-underline-offset: 5px; }
.resource-section-heading { margin-bottom: 36px; }
.resource-page section[id], .resource-page article[id] { scroll-margin-top: 100px; }
.guide-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; padding: 40px; border-radius: 28px; background: var(--product-tint-end); }
.guide-steps { display: grid; gap: 26px; margin: 32px 0; list-style: none; }
.guide-steps li { display: flex; align-items: start; gap: 16px; }
.guide-step-number { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--product-accent); color: var(--site-on-dark); font-size: 12px; }
.guide-steps h3 { margin-bottom: 8px; font-size: 17px; font-weight: 650; line-height: 1.5; }
.guide-steps p { color: var(--product-muted); font-size: 14px; line-height: 1.8; }
.guide-start-visual { padding-block: 16px; }
.guide-screen { width: min(100%, 300px); margin-inline: auto; }
.guide-screen-link { position: relative; display: block; border: 1px solid var(--product-line); border-radius: 24px; box-shadow: 0 20px 40px -30px rgb(28 28 30 / 35%); cursor: zoom-in; }
.guide-screen img { display: block; width: 100%; height: auto; border-radius: inherit; }
.guide-pin { position: absolute; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; color: var(--site-on-dark); background: var(--product-accent); font-size: 12px; font-weight: 650; box-shadow: 0 2px 8px rgb(28 28 30 / 20%); }
.guide-pin--1 { top: 9%; right: 1%; }
.guide-pin--2 { top: 25%; left: 0; }
.guide-pin--3 { top: 67%; left: 0; }
.guide-pin--4 { top: 80%; right: 0; }
.guide-zoom { position: absolute; bottom: 12px; left: 50%; width: max-content; max-width: calc(100% - 24px); padding: 7px 12px; border: 1px solid var(--product-line); border-radius: 30px; background: var(--site-background); font-size: 10px; transform: translateX(-50%); }
.guide-check { display: flex; gap: 20px; margin-block: 28px 88px; padding: 28px 32px; border: 1px solid var(--product-line); border-radius: 18px; }
.guide-check > span { color: var(--product-accent); font-size: 25px; }
.guide-check h2 { margin-bottom: 10px; font-size: 18px; letter-spacing: -.02em; }
.guide-check p, .guide-check a { max-width: 880px; color: var(--product-muted); font-size: 13px; line-height: 1.9; }
.guide-check a { display: inline-block; margin-top: 10px; text-decoration: underline; text-underline-offset: 4px; }
.guide-progress-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.guide-progress-card { padding: 32px; border: 1px solid var(--product-line); border-radius: 24px; }
.guide-progress-copy h3 { margin-bottom: 12px; font-size: 22px; font-weight: 650; letter-spacing: -.04em; }
.guide-progress-copy p { min-height: 84px; color: var(--product-muted); font-size: 14px; line-height: 1.9; }
.guide-progress-screen { margin-top: 28px; padding: 30px 20px; border-radius: 18px; background: var(--product-tint); }
.guide-progress-screen .guide-screen { width: min(100%, 240px); }
.guide-demo { margin-top: 24px; border-block: 1px solid var(--product-line); }
.guide-demo summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 70px; padding-block: 20px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.guide-demo summary::-webkit-details-marker { display: none; }
.guide-demo[open] summary span { transform: rotate(45deg); }
.guide-demo > div { display: flex; align-items: center; gap: 40px; padding-bottom: 28px; }
.guide-demo video { display: block; width: min(40%, 220px); height: auto; border: 1px solid var(--product-line); border-radius: 18px; }
.guide-demo p { max-width: 500px; color: var(--product-muted); font-size: 14px; line-height: 1.9; }
.guide-demo p a { text-decoration: underline; text-underline-offset: 4px; }
.guide-extras { padding-top: 88px; }
.guide-extras-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.guide-extra { min-width: 0; }
.guide-extra h3 { margin-bottom: 12px; font-size: 23px; font-weight: 650; letter-spacing: -.04em; }
.guide-extra > p { min-height: 100px; color: var(--product-muted); font-size: 14px; line-height: 1.9; }
.guide-extra-screen { margin-block: 24px; padding: 24px; border-radius: 20px; background: var(--product-tint); }
.guide-extra-screen .guide-screen { width: min(100%, 240px); }
.guide-extra > p.guide-extra-note { min-height: 0; font-size: 12px; }
.resource-ending { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; padding-block: 64px 88px; }
.screen-dialog { position: fixed; inset: 0; width: min(100% - 32px, 600px); max-height: calc(100dvh - 32px); margin: auto; padding: 60px 20px 20px; border: 0; border-radius: 20px; background: var(--product-tint); overscroll-behavior: contain; }
.screen-dialog::backdrop { background: rgb(20 20 25 / 75%); }
.screen-dialog img { display: block; width: 100%; height: auto; border-radius: 12px; }
.screen-dialog-close { position: absolute; top: 12px; right: 16px; min-height: 36px; padding: 8px 16px; border: 1px solid var(--product-line); border-radius: 30px; background: var(--site-background); color: var(--product-ink); font: inherit; font-size: 13px; cursor: pointer; }
body:has(.screen-dialog[open]) { overflow: hidden; }
.resource-home-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 0 64px; }
.resource-home-link { padding: 28px; border: 1px solid var(--product-line); border-radius: 20px; background: var(--product-tint-end); }
.resource-home-link h3 { font-size: 23px; font-weight: 650; letter-spacing: -.04em; }
.resource-home-link p { margin-top: 14px; color: var(--product-muted); font-size: 14px; line-height: 1.8; }
.resource-home-link span { display: inline-block; margin-top: 20px; font-size: 13px; }
.resource-home-link:hover { border-color: var(--product-accent); }
@media (max-width: 1000px) {
 .guide-start { gap: 32px; padding: 32px; }
 .guide-extras-grid { gap: 20px; }
 .guide-extra-screen { padding: 14px; }
}
@media (max-width: 760px) {
 .resource-shell { width: calc(100% - 40px); }
 .resource-hero { padding: 56px 0 36px; }
 .resource-hero h1 { font-size: clamp(37px, 10vw, 54px); }
 .resource-intro { font-size: 16px; }
 .resource-jump { gap: 8px; margin-top: 24px; }
 .resource-jump a { gap: 16px; font-size: 12px; }
 .guide-start { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 20px; }
 .guide-start-visual { grid-row: 1; padding: 0; }
 .guide-start-visual .guide-screen { width: min(100%, 280px); }
 .guide-steps { gap: 24px; }
 .guide-check { gap: 14px; margin-bottom: 56px; padding: 24px 20px; }
 .guide-progress-grid, .guide-extras-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
 .guide-progress-card { padding: 24px 20px; }
 .guide-progress-copy p, .guide-extra > p { min-height: 0; }
 .guide-progress-screen { padding: 24px 16px; }
 .guide-extra { padding-bottom: 28px; border-bottom: 1px solid var(--product-line); }
 .guide-extra-screen { padding: 28px; }
 .guide-demo > div { flex-direction: column; gap: 20px; }
 .guide-demo video { width: min(100%, 240px); }
 .guide-extras { padding-top: 56px; }
 .resource-ending { gap: 16px; padding-block: 40px 56px; }
 .resource-home-links { grid-template-columns: minmax(0, 1fr); }
 .resource-home-link { padding: 24px; }
}

/* Mentions: 3:4 source cards with platform colors and accessible contrast. */
.resource-home-links:has(> a:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mentions-hero { padding: 64px 0 36px; }
.mentions-hero h1 { font-size: clamp(40px, 5.2vw, 64px); }
.mentions-hero .resource-intro { margin-top: 20px; font-size: 16px; }
.mentions-note { max-width: 720px; margin-top: 14px; color: var(--product-muted); font-size: 11px; line-height: 1.8; }
.mentions-breadcrumb { margin-bottom: 28px; color: var(--product-muted); font-size: 11px; }
.mentions-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.mentions-breadcrumb li + li::before { content: '/'; margin-right: 10px; color: var(--product-end); }
.mentions-breadcrumb a:hover { color: var(--product-ink); text-decoration: underline; text-underline-offset: 3px; }
.mentions-updated { margin-top: 12px; color: var(--product-muted); font-size: 11px; }
.mentions-updated time { margin-left: 8px; font-variant-numeric: tabular-nums; }
.mentions-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; padding-top: 20px; border-top: 1px solid var(--product-line); }
.mentions-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.mentions-filters button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 15px; border: 1px solid var(--product-line); border-radius: 30px; color: var(--product-muted); background: var(--site-background); font: inherit; font-size: 12px; cursor: pointer; }
.mentions-filters button span { font-size: 10px; opacity: .7; }
.mentions-filters button[aria-pressed="true"] { border-color: var(--product-deep); background: var(--product-deep); color: var(--site-on-dark); }
.mentions-filters button:hover { border-color: var(--product-accent); }
.mentions-count { color: var(--product-muted); font-size: 11px; }
.mentions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mention-card { --mention-ink: #102943; --mention-muted: #4f647b; --mention-line: #ceddf0; --mention-soft: rgb(255 255 255 / 65%); --mention-hover: #8baad2; position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; min-width: 0; min-height: 300px; padding: 22px; border: 1px solid var(--mention-line); border-radius: 24px; color: var(--mention-ink); background: linear-gradient(145deg, #edf4ff, #e1ecfb); container-type: inline-size; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.mention-card[data-platform="threads"] { --mention-ink: #fff; --mention-muted: #c2c2c8; --mention-line: #39393d; --mention-soft: rgb(255 255 255 / 9%); --mention-hover: #76767e; background: radial-gradient(ellipse at 100% 0%, #29292d, transparent 65%), #111113; }
.mention-card[data-platform="youtube"] { --mention-ink: #fff; --mention-muted: #fff4f6; --mention-line: rgb(255 255 255 / 25%); --mention-soft: rgb(255 255 255 / 12%); --mention-hover: #ff8799; background: linear-gradient(145deg, #e00024, #ae0923); }
.mention-card[data-platform="instagram"] { --mention-ink: #fff; --mention-muted: #fff0f7; --mention-line: rgb(255 255 255 / 25%); --mention-soft: rgb(255 255 255 / 12%); --mention-hover: #f5a6cf; background: linear-gradient(145deg, #6035af, #a32879 52%, #b4432d); }
.mention-source { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mention-source-mark { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border: 1px solid var(--mention-line); border-radius: 14px; background: var(--mention-soft); }
.mention-source-mark img { display: block; width: 24px; height: 24px; object-fit: contain; }
.mention-card:not([data-platform="website"]) .mention-source-mark img { filter: invert(1); }
.mention-source-copy { min-width: 0; }
.mention-source-name { font-size: 13px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.mention-platform { margin-top: 3px; color: var(--mention-muted); font-size: 11px; line-height: 1.5; }
.mention-content { align-self: center; min-width: 0; }
.mention-date { margin-bottom: 16px; color: var(--mention-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.mention-card h2 { color: var(--mention-ink); font-size: clamp(18px, 7cqw, 24px); font-weight: 650; letter-spacing: -.035em; line-height: 1.4; text-wrap: pretty; }
.mention-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--mention-line); }
.mention-language { color: var(--mention-muted); font-size: 10px; line-height: 1.7; }
.mention-open { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 12px; font-weight: 600; }
.mention-open > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--mention-line); border-radius: 50%; background: var(--mention-soft); font-size: 15px; }
.mention-open::after { content: ''; position: absolute; inset: 0; border-radius: 24px; }
.mention-card:focus-within { outline: 2px solid var(--product-accent); outline-offset: 4px; }
.mention-disclosure { margin-top: 14px; color: var(--mention-ink); font-size: 11px; font-weight: 600; }
.mentions-empty { padding: 32px 0; color: var(--product-muted); font-size: 13px; }
.mentions-context { margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--product-line); }
.mentions-context h2 { font-size: 24px; }
.mentions-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 28px; }
.mentions-topic h3 { margin-bottom: 12px; font-size: 16px; font-weight: 650; line-height: 1.5; letter-spacing: -.025em; }
.mentions-topic p { color: var(--product-muted); font-size: 13px; line-height: 1.9; }
.mentions-topic-sources { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; list-style: none; color: var(--product-muted); font-size: 11px; }
.mentions-topic-sources a { display: inline-block; padding-block: 5px; }
.mentions-topic-sources a:hover { color: var(--product-ink); text-decoration: underline; text-underline-offset: 3px; }
.mentions-contact { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 40px; padding: 26px 28px; border: 1px solid var(--product-line); border-radius: 18px; background: var(--product-tint-end); }
.mentions-contact h2, .mentions-related h2 { font-size: 20px; }
.mentions-contact p, .mentions-related p { max-width: 600px; margin-top: 10px; color: var(--product-muted); font-size: 13px; line-height: 1.8; }
.mentions-contact > a { display: inline-flex; flex-shrink: 0; gap: 16px; padding-block: 12px; font-size: 14px; font-weight: 600; }
.mentions-related { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 40px 64px; }
@media (hover: hover) {
 .mention-card:hover { border-color: var(--mention-hover); box-shadow: 0 14px 28px -18px rgb(37 37 45 / 45%); transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .mention-card { transition: none; } .mention-card:hover { transform: none; } }
@media (max-width: 1050px) { .mentions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
 .resource-home-links:has(> a:nth-child(2)) { grid-template-columns: minmax(0, 1fr); }
 .mentions-hero { padding: 44px 0 28px; }
 .mentions-hero h1 { font-size: clamp(36px, 9vw, 48px); }
 .mentions-toolbar { gap: 12px; }
 .mentions-context { margin-top: 36px; }
 .mentions-context-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
 .mentions-filters { gap: 6px; }
 .mentions-filters button { gap: 8px; padding-inline: 12px; font-size: 11px; }
 .mention-card { min-height: 280px; gap: 16px; padding: 20px; }
 .mentions-contact { flex-direction: column; align-items: start; gap: 16px; margin-top: 32px; padding: 22px; }
 .mentions-contact > a { flex-shrink: 1; font-size: 14px; }
 .mentions-related { flex-direction: column; align-items: start; padding-block: 32px 48px; }
}
@media (max-width: 680px) { .mentions-grid { grid-template-columns: minmax(0, 360px); justify-content: center; gap: 16px; } }