/* Narrow alignment layer. Existing structure, artwork, type sizes and spacing remain intact. */
:root {
  --align-teal: #297d77;
  --align-deep: #136f84;
  --align-ink: #161616;
  --align-body: #4d5056;
  --align-muted: #6a7282;
  --align-border: #d5d7da;
  --align-tint: #f0fdfa;
  --align-pill: 9999px;
}

/* Retain the original compact public-site navigation, including its underline. */
#o2c-announcements .o2c-shared-nav .o2c-nav-local a:is([aria-current="page"],[aria-current="location"]) {
  color: var(--align-teal) !important;
}
#o2c-announcements .o2c-shared-nav .o2c-nav-local a[aria-current]::after {
  background: var(--align-teal);
}
#o2c-announcements .o2c-nav-away a { color: var(--align-body); }

/* Preserve title size, line breaks and leading; relax only the tight tracking. */
#o2c-announcements[data-page="hub"] .o2c-hero h1 {
  color: var(--align-ink);
  letter-spacing: -.02em;
}
#o2c-announcements[data-page="hub"] .o2c-hero > p { color: var(--align-body); }
#o2c-announcements[data-page="hub"] .o2c-archive-heading h2 { color: var(--align-ink); }
#o2c-announcements[data-page="hub"] .o2c-section-heading > a { color: var(--align-teal); }
#o2c-announcements[data-page="hub"] .studio-handout .concept-read { color: var(--align-teal); }

/* Real form actions take the system's pill shape; segmented switches keep their geometry. */
#o2c-announcements[data-page="hub"] #o2c-filter-trigger,
#o2c-announcements[data-page="hub"] #o2c-filter-done,
#o2c-announcements[data-page="hub"] .o2c-empty-reset,
#o2c-announcements[data-page="hub"] .o2c-calendar .rc-latest,
#o2c-announcements[data-page="hub"] .o2c-calendar .rc-find-month,
#o2c-announcements[data-page="hub"] .o2c-calendar .rc-dialog-nav,
#o2c-announcements[data-page="hub"] .o2c-calendar .rc-read-article {
  border-radius: var(--align-pill);
  font-family: 'O2C Lato', Lato, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
}
#o2c-announcements[data-page="hub"] #o2c-filter-trigger {
  color: var(--align-teal);
  border-color: var(--align-teal);
}
#o2c-announcements[data-page="hub"] #o2c-filter-trigger:is(:hover,[aria-expanded="true"],[data-active="true"]) {
  background: var(--align-tint);
  color: var(--align-teal);
  border-color: var(--align-teal);
}
#o2c-announcements[data-page="hub"] #o2c-filter-done,
#o2c-announcements[data-page="hub"] .o2c-empty-reset,
#o2c-announcements[data-page="hub"] .o2c-calendar .rc-dialog-footer .rc-read-article {
  background: var(--align-teal);
  border-color: var(--align-teal);
  color: #fff;
}
#o2c-announcements[data-page="hub"] #o2c-filter-done:hover,
#o2c-announcements[data-page="hub"] .o2c-empty-reset:hover,
#o2c-announcements[data-page="hub"] .o2c-calendar .rc-dialog-footer .rc-read-article:hover {
  background: var(--align-deep);
  border-color: var(--align-deep);
}
#o2c-announcements[data-page="hub"] #o2c-filter-popover input { accent-color: var(--align-teal); }
#o2c-announcements[data-page="hub"] #o2c-filter-count { background: var(--align-teal); }
#o2c-announcements[data-page="hub"] .o2c-reader-switch button[aria-pressed="true"],
#o2c-announcements[data-page="hub"] .o2c-calendar :is([data-rc-mode],[data-rc-filter],.rc-month-choice)[aria-pressed="true"],
#o2c-announcements[data-page="hub"] .o2c-calendar .rc-day-top[aria-pressed="true"] {
  background: var(--align-teal) !important;
  border-color: var(--align-teal) !important;
  color: #fff !important;
}
#o2c-announcements[data-page="hub"] .o2c-calendar {
  --rc-teal: var(--align-teal);
  --rc-ink: var(--align-ink);
  --rc-muted: var(--align-body);
  --rc-line: var(--align-border);
}
#o2c-announcements[data-page="hub"] .o2c-calendar .rc-day.rc-selected { box-shadow: inset 0 0 0 2px var(--align-teal); }
#o2c-announcements[data-page="hub"] .o2c-calendar .rc-dialog-summary { color: var(--align-body); }
#o2c-announcements[data-page="hub"] .o2c-calendar :is(.rc-latest,.rc-find-month,.rc-dialog-nav,.rc-dialog-image-link) { color: var(--align-teal); }

/* Off2Class: restrained refinements for the ORIGINAL Roadmap and Beta pages.
   Append after the existing stylesheets. Keep every original layout, illustration,
   hero treatment, title scale, card shape, navigation and segmented control.
   References: supplied DS Lato bold action labels, pill actions, teal #297D77,
   deep teal #136F84, secondary text #4D5056 and muted text #6A7282. */

/* Real action buttons only. Existing sizes and spacing are deliberately retained.
   Filters, mode controls, quote controls, image cards and nav links are excluded. */
#o2c-announcements #roadmap .button,
#o2c-announcements #roadmap-detail .button,
#o2c-announcements #image-preview .button,
#o2c-announcements #main.balanced-opening .button {
  font-family: 'O2C Lato', Lato, Arial, sans-serif;
  font-weight: 700;
  border-radius: 9999px;
}

/* Roadmap primary actions: Preview, dialog Next / tracker, and Beta invitation. */
#o2c-announcements #roadmap .button.primary,
#o2c-announcements #roadmap .beta-invite .button,
#o2c-announcements #roadmap-detail .button.primary {
  background-color: #297D77;
  border-color: #297D77;
  color: #FFFFFF;
}
#o2c-announcements #roadmap .button.primary:hover,
#o2c-announcements #roadmap .beta-invite .button:hover,
#o2c-announcements #roadmap-detail .button.primary:hover {
  background-color: #136F84;
  border-color: #136F84;
  color: #FFFFFF;
}

/* Beta's lower sign-up action uses the standard primary teal.
   The lime action in the dark premium hero retains its original fill/contrast. */
#o2c-announcements #main.balanced-opening .final-cta .button.primary {
  background-color: #297D77;
  border-color: #297D77;
  color: #FFFFFF;
}
#o2c-announcements #main.balanced-opening .final-cta .button.primary:hover {
  background-color: #136F84;
  border-color: #136F84;
  color: #FFFFFF;
}

/* Supporting text on pale/white surfaces: reduce the green tint, retain hierarchy.
   No heading, preview art, status badge, testimonial or dark-hero text is selected. */
#o2c-announcements #roadmap .focus-areas details p,
#o2c-announcements #roadmap .card-summary,
#o2c-announcements #roadmap .full-copy p,
#o2c-announcements #roadmap-detail .detail-body p,
#o2c-announcements #roadmap-detail .detail-body li,
#o2c-announcements #main.balanced-opening .perks-variant-c .pc-stage p,
#o2c-announcements #main.balanced-opening .faq-answer {
  color: #4D5056;
}
#o2c-announcements #roadmap .source-date,
#o2c-announcements #roadmap .timing,
#o2c-announcements #roadmap .section-count,
#o2c-announcements #roadmap .notice {
  color: #6A7282;
}

/* Roadmap's existing text action becomes the exact brand teal.
   Same text, arrow, position and interaction as the original. */
#o2c-announcements #roadmap .roadmap-card .card-link {
  color: #297D77;
}

/* Selected roadmap filters share the primary state color; their layout is retained. */
#o2c-announcements #roadmap [data-filter][aria-pressed="true"] {
  background-color: #297D77;
  border-color: #297D77;
  color: #FFFFFF;
}

/* Subtle article-only alignment, appended after the original styles.
   Original composition, spacing, type sizes, card shapes, imagery, editorial
   gradients and animations are intentionally retained. Existing Lato body text
   and Inter metadata/navigation already match the supplied design system. */

/* Neutral reading text; retain all original heading sizes and tracking. */
#o2c-announcements[data-page="detail"] .o2c-detail .o2c-detail-hero h1,
#o2c-announcements[data-page="detail"] .o2c-detail .o2c-article-section h2,
#o2c-announcements[data-page="detail"] .o2c-detail .o2c-help-box h2,
#o2c-announcements[data-page="detail"] .o2c-detail .o2c-copy .o2c-change-title {
  color: #161616;
}

#o2c-announcements[data-page="detail"] .o2c-detail .o2c-deck,
#o2c-announcements[data-page="detail"] .o2c-detail .o2c-detail-body .o2c-copy,
#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page) .o2c-detail-body .o2c-copy {
  color: #4D5056;
}

#o2c-announcements[data-page="detail"] .o2c-detail .o2c-copy strong,
#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page) .o2c-copy strong {
  color: #161616;
}

/* Roundup headings were set in Inter; use the system's heading family only. */
#o2c-announcements[data-page="detail"] .o2c-detail .o2c-copy .o2c-change-title {
  font-family: "O2C Lato", Lato, Arial, sans-serif;
}

/* Reading and contents links use the existing primary brand teal. These
   selectors deliberately exclude the dark illustrated walkthrough card. */
#o2c-announcements[data-page="detail"] .o2c-detail .o2c-copy p a,
#o2c-announcements[data-page="detail"] .o2c-detail .o2c-copy li a,
#o2c-announcements[data-page="detail"] .o2c-detail .o2c-resource-list a:not(.o2c-resource-primary),
#o2c-announcements[data-page="detail"] .o2c-detail.o2c-detail .o2c-toc a[aria-current="location"] {
  color: #297D77;
}

#o2c-announcements[data-page="detail"] .o2c-detail .o2c-copy p a:hover,
#o2c-announcements[data-page="detail"] .o2c-detail .o2c-copy li a:hover,
#o2c-announcements[data-page="detail"] .o2c-detail .o2c-resource-list a:not(.o2c-resource-primary):hover {
  color: #136F84;
}

/* Real action controls receive pill corners and Lato Bold. Workflow step
   navigation remains the original Inter treatment and rectangular layout. */
#o2c-announcements[data-page="detail"] .o2c-detail .o2c-resource-list a.o2c-resource-primary,
#o2c-announcements[data-page="detail"] .o2c-workflow :is([data-workflow-next], [data-workflow-prev], [data-workflow-play], [data-workflow-close]) {
  border-radius: 9999px;
  font-family: "O2C Lato", Lato, Arial, sans-serif;
  font-weight: 700;
}

#o2c-announcements[data-page="detail"] .o2c-detail .o2c-resource-list a.o2c-resource-primary,
#o2c-announcements[data-page="detail"] .o2c-workflow [data-workflow-next]:not(:disabled) {
  background-color: #297D77;
  border-color: #297D77;
  color: #FFFFFF;
}

#o2c-announcements[data-page="detail"] .o2c-detail .o2c-resource-list a.o2c-resource-primary:hover,
#o2c-announcements[data-page="detail"] .o2c-workflow [data-workflow-next]:hover:not(:disabled) {
  background-color: #136F84;
  border-color: #136F84;
  color: #FFFFFF;
}

#o2c-announcements[data-page="detail"] .o2c-workflow :is([data-workflow-prev], [data-workflow-play], [data-workflow-close]):not(:disabled) {
  background-color: #FFFFFF;
  border-color: #297D77;
  color: #297D77;
}

#o2c-announcements[data-page="detail"] .o2c-workflow :is([data-workflow-prev], [data-workflow-play], [data-workflow-close]):hover:not(:disabled) {
  background-color: #F0FDFA;
  border-color: #297D77;
  color: #297D77;
}

/* Retain the automatic-advance progress animation; its fill follows the
   same system palette and keeps the white Next label legible. */
#o2c-announcements[data-page="detail"] .o2c-workflow [data-workflow-timer-fill] {
  background-color: #136F84;
}