/* Attention.Cloud design tokens and shared components. */
:root {
  --ac-bg: #f8f9f5;
  --ac-surface: #fff;
  --ac-soft: #edf2e6;
  --ac-text: #20291e;
  --ac-muted: #52614a;
  --ac-line: #d7dfcf;
  --ac-accent: #345b27;
  --ac-accent-hover: #24451b;
  --ac-highlight: #d4e7b2;
  --ac-space-1: 4px;
  --ac-space-2: 8px;
  --ac-space-3: 12px;
  --ac-space-4: 16px;
  --ac-space-6: 24px;
  --ac-space-8: 32px;
  --ac-space-12: 48px;
  --ac-radius: 16px;
  --ac-inset: 8px;
  --ac-inner-radius: calc(var(--ac-radius) - var(--ac-inset));
  --ac-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body { background: var(--ac-bg); color: var(--ac-text); font-family: var(--ac-font); }
.hub { background: var(--ac-bg); color: var(--ac-text); font-size: 15px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:is(button, a, input, select, summary):focus-visible { outline: 3px solid var(--ac-accent); outline-offset: 4px; }
.hub h1 em, .industry-hero h1 em, .course-promise, .course-number, .feature-aside h3, .profile { font: inherit; font-style: normal; }
.hub h1, .hub h2, .hub h3 { color: var(--ac-text); }
.hub h1 { letter-spacing: -.045em; line-height: 1.08; max-width: 20ch; }
.hub h1 em { color: inherit; }
.hub .page-heading h1 { font-size: clamp(36px, 4.2vw, 62px); max-width: 19ch; }
.hub .watch-title { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.25; letter-spacing: -.025em; max-width: 42ch; overflow-wrap: normal; margin: 24px 0 16px; }
.industry-guide-header, .industry-guide-header h1 { overflow-wrap: normal; }
.industry-guide-header h1 { max-width: 24ch; }
.hub .industry-hero h1 { max-width: 18ch; }
.hub main { padding-top: var(--ac-space-8); }
.sidebar { background: #f0f3e9; border-color: var(--ac-line); padding-top: var(--ac-space-8); }
.hub-brand { align-items: center; margin-bottom: var(--ac-space-8); }
.brand-dot, .sidebar-bottom, .nav-label { color: var(--ac-muted); }
.nav-label { font-size: 12px; letter-spacing: 0; }
.brand-mark { font-family: var(--ac-font); font-style: normal; font-size: 25px; font-weight: 650; border-radius: var(--ac-inner-radius); }
.nav-item { color: var(--ac-muted); min-height: 44px; font-size: 14px !important; border-radius: var(--ac-inner-radius); gap: var(--ac-space-3); }
.nav-item.active { color: var(--ac-accent); background: #dfeacf; }
.nav-item .nav-count { font-size: 12px; color: var(--ac-muted); }
.topic-item { font-size: 13px !important; }
.topics-label { margin-top: var(--ac-space-6); }
.sidebar-bottom { font-size: 12px; }
.hub-header { border-color: var(--ac-line); background: var(--ac-bg); gap: var(--ac-space-4); }
#search-form { border: 1px solid var(--ac-line); background: var(--ac-surface); border-radius: var(--ac-inner-radius); padding: 0 var(--ac-space-3); }
#search-form:focus-within { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
#search { font-size: 14px; color: var(--ac-text); }
#search::placeholder { color: var(--ac-muted); }
kbd { font-family: ui-monospace, monospace; color: var(--ac-muted); }
.profile { margin-left: auto; font-size: 13px; font-weight: 650; color: var(--ac-accent); }
.section-kicker { color: var(--ac-muted); font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 550; }
.page-heading { margin: 0 0 var(--ac-space-4); }
.brand-intro { max-width: 62ch; color: var(--ac-muted); font-size: 17px; line-height: 1.65; margin-bottom: var(--ac-space-6); }
.brand-links { gap: var(--ac-space-6); align-items: center; margin-bottom: var(--ac-space-8); font-size: 14px; }
.brand-links .ac-primary, .ac-primary, .primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--ac-space-2); min-height: 48px; padding: 12px 20px; background: var(--ac-accent); border: 1px solid var(--ac-accent); border-radius: var(--ac-inner-radius); color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; cursor: pointer; }
.brand-links .ac-primary:hover, .ac-primary:hover, .primary:hover { background: var(--ac-accent-hover); }
.brand-links a, .hub-footer a { color: var(--ac-accent); }
.feature-layout { display: block; }
.feature-video { display: block; width: 100%; aspect-ratio: 16/8; border-radius: var(--ac-radius); }
.feature-video > img { opacity: .86; }
.feature-video:hover > img { transform: none; }
.feature-content { inset: auto var(--ac-space-8) var(--ac-space-8); }
.feature-content h2 { color: #fff; font-size: clamp(24px, 2.7vw, 38px); line-height: 1.2; max-width: 30ch; }
.feature-content p { color: #fff; font-size: 14px; }
.play-circle { width: 44px; height: 44px; flex: none; background: var(--ac-highlight); color: var(--ac-accent); }
.quick-paths { margin: var(--ac-space-6) 0 var(--ac-space-12); gap: var(--ac-space-3); }
.quick-path { font-size: 14px !important; padding: var(--ac-space-4); min-height: 56px; border-color: var(--ac-line); border-radius: var(--ac-inner-radius); color: var(--ac-text); background: var(--ac-surface); }
.quick-path strong { font-size: inherit; font-weight: 550; }
.quick-path span { font: inherit; font-variant-numeric: tabular-nums; color: var(--ac-accent); }
.library-heading { margin-bottom: var(--ac-space-6); }
.library-heading h2 { font-size: 28px; font-weight: 600; letter-spacing: -.025em; }
.library-heading > span, .byline, .creator-link { color: var(--ac-muted); font-size: 13px; }
.browse-controls { gap: var(--ac-space-4); margin-bottom: var(--ac-space-6); }
.format-button { min-height: 44px; font-size: 13px !important; color: var(--ac-muted); border-radius: var(--ac-inner-radius); }
.format-button.active { background: var(--ac-accent); color: #fff; }
#creator { min-height: 44px; border-color: var(--ac-line); background: var(--ac-surface); font-size: 13px; color: var(--ac-text); border-radius: var(--ac-inner-radius); }
.resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ac-space-8) var(--ac-space-6); }
.resource-preview { border-radius: var(--ac-inner-radius); }
.resource-preview:hover > img { transform: none; }
.resource-copy { padding: var(--ac-space-3) 0; gap: var(--ac-space-3); }
.resource-copy h3 { font-size: 15px; line-height: 1.45; -webkit-line-clamp: 3; font-weight: 600; }
.resource-copy .byline { margin-top: var(--ac-space-1); }
.save-button { width: 40px; height: 40px; display: grid; place-items: center; background: #fff; color: var(--ac-accent); border: 1px solid var(--ac-line); border-radius: var(--ac-inner-radius); }
.save-button.saved { background: var(--ac-highlight); color: var(--ac-accent); }
.ac-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ac-link-icon { width: 16px; height: 16px; display: inline-block; vertical-align: -.15em; }
.nav-item svg { stroke-width: 1.75; }
.editorial-preview, .editorial-preview.linkedin, .editorial-preview.reddit, .editorial-preview.documentation, .editorial-preview.checklist { background: var(--ac-soft); color: var(--ac-text); padding: var(--ac-space-6); }
.editorial-preview strong { font-family: var(--ac-font); font-size: clamp(18px, 1.8vw, 26px); line-height: 1.25; font-weight: 550; }
.editorial-preview small { color: var(--ac-muted); font-size: 12px; text-transform: none; letter-spacing: 0; }
.hub-footer { margin-top: var(--ac-space-12); padding-top: var(--ac-space-6); font-size: 12px; color: var(--ac-muted); }
.hub #main:has(> #welcome) { display: flex; flex-direction: column; }
#welcome { order: 0; }
#knowledge-map, #course-path, #creator-profile, #watch-page { order: 0; }
#library { order: 1; }
#industry-promo { order: 2; margin-top: var(--ac-space-12); margin-bottom: 0; }
.hub-footer { order: 3; }
.industry-promo { border: 0; border-top: 1px solid var(--ac-line); border-radius: 0; padding: var(--ac-space-8) 0; background: transparent; }
.industry-promo h2 { font-size: 28px; max-width: 30ch; letter-spacing: -.025em; }
.industry-promo p { color: var(--ac-muted); line-height: 1.65; }
.industry-promo-head > a { color: #fff; background: var(--ac-accent); padding: 12px 18px; border-radius: var(--ac-inner-radius); font-size: 14px; }
.industry-preview-links { gap: var(--ac-space-4) var(--ac-space-6); }
.industry-preview-links a { padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ac-accent); text-decoration: underline; text-underline-offset: 3px; }
.industry-hero > p, .industry-guide-header > p, .industry-stats, .industry-results-bar span, .industry-card-meta, .industry-card > p, .industry-card-bottom, .industry-breadcrumb, .guide-editorial-note, .guide-byline { color: var(--ac-muted) !important; }
.industry-card { background: var(--ac-surface); border-color: var(--ac-line); border-radius: var(--ac-radius); padding: var(--ac-space-6); }
.industry-card-meta { font-size: 12px; text-transform: none; letter-spacing: 0; }
.industry-card h2 { margin-top: var(--ac-space-4); font-size: 22px; }
.industry-card h2 a:after { border-radius: var(--ac-radius); }
.industry-card-bottom { border: 0; padding-top: 0; font-size: 12px; }
.sector-directory { padding: 12px 0; }
.sector-directory summary { cursor: pointer; font-size: 16px; font-weight: 550; color: var(--ac-accent); padding: 12px 0; }
.sector-directory details > p { color: var(--ac-muted); }
#industry-filters button:not(.industry-clear), #industry-more, #copy-email { background: var(--ac-accent); color: #fff; border-color: var(--ac-accent); border-radius: var(--ac-inner-radius); }
.guide-badges { gap: var(--ac-space-4); flex-wrap: wrap; }
.guide-badges span { background: transparent !important; padding: 0; border-radius: 0; font-size: 13px; color: var(--ac-muted) !important; }
.guide-step { font-size: 13px; letter-spacing: 0; color: var(--ac-muted); }
.industry-email { font-family: var(--ac-font); font-size: 15px; line-height: 1.8; border-radius: var(--ac-inner-radius); }
.industry-video-plan h2 { font-family: var(--ac-font) !important; }
.guide-action, .guide-watchout, .guide-contents, .guide-foundations, .industry-guide .industry-video-plan { border-radius: var(--ac-radius); }
.industry-guide p, .industry-guide li { color: #45533e; }
.creator-stats { gap: var(--ac-space-6); }
.creator-stats span { border: 0; border-radius: 0; padding: 0; color: var(--ac-muted); }
.creator-disclaimer, .course-note, .course-intro, .course-sequence-header > span, .course-step small, .watch-note, .watch-next span, .watch-next small { color: var(--ac-muted); font-size: 13px; }
.course-promise { font: 20px/1.4 var(--ac-font); color: var(--ac-muted); max-width: 34ch; }
.course-intro { font-size: 16px; }
.course-step { border-radius: var(--ac-radius); padding: var(--ac-inset); }
.course-step-top, .course-step-body > div { padding: var(--ac-space-2); }
.course-thumb { border-radius: var(--ac-inner-radius); }
.course-step strong { font-size: 15px; }
.course-step-label, .course-format { color: var(--ac-muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.course-number { font: 22px var(--ac-font); color: var(--ac-accent); font-variant-numeric: tabular-nums; }
.watch-layout { grid-template-columns: minmax(0, 1fr); }
.watch-player { border-radius: var(--ac-radius); position: relative; }
.watch-related { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--ac-space-6); margin-top: var(--ac-space-8); }
.watch-related h2 { grid-column: 1/-1; margin: 0; }
.watch-next { display: block; margin: 0; }
.watch-next img { border-radius: var(--ac-inner-radius); margin-bottom: var(--ac-space-2); }
.watch-next strong { font-size: 15px; }
.watch-actions a, .preview-actions a { background: var(--ac-accent); color: #fff; border-color: var(--ac-accent); border-radius: var(--ac-inner-radius); }
.watch-actions button, .preview-actions button { border-radius: var(--ac-inner-radius); color: var(--ac-accent); }
.watch-description { padding: var(--ac-space-6); border-radius: var(--ac-radius); }
.map-heading h1 { max-width: 20ch; }
.map-heading p, .map-toolbar, .map-legend, .map-status { color: var(--ac-muted); }
.graph-topic-count { fill: var(--ac-muted); font-size: 14px; }
.graph-trunk { stroke-dasharray: none; }
.knowledge-panel { border-radius: var(--ac-radius); }
.nav-count, #result-count, .industry-stats, #industry-result-count, .creator-stats, .metric-label + strong, .analytics-metric strong, .analytics-detail-row strong, .chart-label, .rank-label strong, .stat strong, .journey-stat strong, table, .graph-topic-count { font-variant-numeric: tabular-nums; }
.analytics-metric .metric-label, .analytics-metric small, .analytics-panel > p, .analytics-panel-header p, .analytics-note, .analytics-empty, .traffic-note, .chart-caption, .analytics-detail-row, .journey-filter, .journey-stat, .journey-stat small, .journey-note, .journey-empty, .muted { color: var(--ac-muted); }
.chart-label { fill: var(--ac-muted); }
.analytics-button, .chart-switch button { color: var(--ac-accent); font-size: 13px; min-height: 40px; }
.analytics-domain { border: 0; border-radius: 0; padding: 0; background: transparent; color: var(--ac-muted); }
.analytics-domain i { display: none; }
.ac-feedback { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100; border-radius: var(--ac-inner-radius); padding: 12px 20px; background: #24351f; color: #fff; font-size: 14px; max-width: calc(100vw - 32px); text-align: center; pointer-events: none; }
.ac-feedback:empty { display: none; }
.ac-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: #20291e; color: white; font-size: 14px; z-index: 1; }
.ac-loading::before { content: ''; width: 18px; height: 18px; border: 2px solid #ffffff55; border-top-color: #fff; border-radius: 50%; animation: ac-spin .8s linear infinite; }
[aria-busy="true"] { cursor: progress; }
.ac-image-loading { opacity: .3; }
.ac-loading-inline { font-size: 14px; color: var(--ac-muted); padding: 16px 0; }
@keyframes ac-spin { to { transform: rotate(360deg); } }
@keyframes ac-confirm { from { transform: scale(.82); } to { transform: scale(1); } }
@keyframes ac-appear { from { opacity: 0; } to { opacity: 1; } }
.save-button.saved .ac-icon { animation: ac-confirm .18s ease-out; }
.ac-feedback:not(:empty) { animation: ac-appear .16s ease-out; }
button, .ac-primary { transition: background-color .16s, color .16s, border-color .16s; }
@media(min-width:1600px) { .resource-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media(max-width:1100px) { .resource-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .watch-related { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
  .hub main { padding: 24px 20px 0; }
  .hub-header { padding: 0 20px; gap: 12px; }
  #search-form { min-width: 0; }
  #search { font-size: 14px; }
  .hub .page-heading h1 { font-size: clamp(30px,8vw,48px); }
  .brand-intro { font-size: 16px; }
  .brand-links { gap: 20px; }
  .feature-video { aspect-ratio: 4/3; }
  .feature-content { inset: auto 20px 20px; }
  .feature-content h2 { font-size: 25px; }
  .feature-content p { font-size: 13px; gap: 10px; }
  .quick-paths { grid-template-columns: 1fr; margin-bottom: 40px; }
  .resource-grid { grid-template-columns: 1fr; gap: 24px; }
  .resource-copy h3 { font-size: 16px; }
  .resource-copy .publisher-badge { width: 32px; height: 32px; }
  .library-heading { gap: 16px; align-items: center; }
  .library-heading h2 { font-size: 25px; }
  #result-count { white-space: nowrap; }
  .format-button { padding: 9px 10px; }
  .watch-related { grid-template-columns: 1fr; }
  .watch-next { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 12px; }
  .watch-next img { margin: 0; }
  .watch-next strong { font-size: 14px; }
  .course-step-body { align-items: flex-start; }
  .industry-hero h1 { font-size: clamp(34px,8vw,46px); }
  .industry-promo-head > a { margin-top: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}