/* 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;
}

/* Approved visual refinements — 12 November 2026. Deliberately scoped to site chrome and
   reading surfaces. The real Off2Class screenshots, logo and embedded UI retain
   their native colors. Existing layout, navigation and interaction code remain. */
:root {
  --review-ink: #202723;
  --review-body: #4b5550;
  --review-muted: #5f6c66;
  --review-line: #dce3df;
  --review-surface: #f6f8f7;
  --review-accent: #297d77;
}
html:root { scrollbar-color: #9eaaa4 #f4f6f5; }
html:root body { background: #fff; }
html:root ::selection { color: #153d34; background: #d8ebe3; }
html:root input { caret-color: var(--review-accent); }
html:root #o2c-announcements { background: #fff; }
html:root #o2c-announcements :is(a,button,input,select,summary):focus-visible {
  outline: 2px solid #136f84; outline-offset: 4px;
}
html:root #o2c-announcements .o2c-shared-header { border-color: var(--review-line); }
html:root #o2c-announcements .o2c-nav-local a { color: #4b5952; }
html:root #o2c-announcements :is(.o2c-search-field,.search-box) { box-shadow: none; border-color: #b8c5bf; }
html:root #o2c-announcements input::placeholder { color: #626f68; opacity: 1; }
html:root #o2c-announcements .o2c-search-trigger { min-height: 44px; }
html:root #o2c-announcements :is(.o2c-section-heading h2,.o2c-type,.o2c-release-type,.o2c-toc p,.concept-meta,.concept-facts dt) {
  text-transform: none; letter-spacing: 0;
}
html:root #o2c-announcements :is(.o2c-type,.o2c-release-type,.concept-meta) { font-size: 13px; line-height: 1.5; }
html:root #o2c-announcements :is(.o2c-type,.o2c-release-type)::before { content: none; display: none; }
html:root #o2c-announcements :is(.o2c-category,.o2c-date,.o2c-latest-date,.o2c-release-period) { font-size: 13px; color: var(--review-muted); }

/* What's New: keep the featured pair and archive, give each a clearer weight. */
html:root #o2c-announcements[data-page="hub"] .o2c-hero { padding-top: 34px; padding-bottom: 26px; }
html:root #o2c-announcements .o2c-hero-rule { display: none; }
html:root #o2c-announcements[data-page="hub"] .o2c-hero h1 { font-size: 44px; line-height: 1.15; letter-spacing: -.025em; margin-bottom: 12px; }
html:root #o2c-announcements[data-page="hub"] .o2c-hero > p { margin-top: 12px; font-size: 16px; }
html:root #o2c-announcements .o2c-section-heading h2 { font-size: 16px; color: var(--review-ink); font-weight: 700; }
html:root #o2c-announcements .concept-feature { border-radius: 12px; box-shadow: none; }
html:root #o2c-announcements .concept-feature.studio-apt { background: #1b463b; box-shadow: none; border: 0; padding: 28px; min-height: 0; grid-template-rows: minmax(240px,1fr) auto; row-gap: 20px; }
html:root #o2c-announcements .studio-apt .concept-feature-copy h3 { font-size: 40px; line-height: 1.12; letter-spacing: -.025em; }
html:root #o2c-announcements .studio-apt .concept-feature-copy > p { font-size: 17px; }
html:root #o2c-announcements .studio-apt .concept-meta .o2c-category { color: #d1e1d7; }
html:root #o2c-announcements .studio-apt .concept-facts { padding-top: 18px; }
html:root #o2c-announcements .studio-apt .concept-facts dd { font-size: 21px; letter-spacing: -.015em; }
html:root #o2c-announcements .concept-facts dt { font-size: 12px; }
html:root #o2c-announcements .concept-feature.studio-handout { background: #fff; border-color: var(--review-line); box-shadow: none; padding: 24px; }
html:root #o2c-announcements .studio-handout .concept-feature-copy h3 { font-size: 28px; }
html:root #o2c-announcements .studio-handout .concept-feature-copy > p { font-size: 16px; color: var(--review-body); }
html:root #o2c-announcements .studio-handout .concept-paper { width: 172px; }
html:root #o2c-announcements .studio-handout .paper-stage { margin: 14px 0; }
html:root #o2c-announcements .concept-read { min-height: 44px; }
html:root #o2c-announcements .concept-feature:is(:hover,:focus-within) { box-shadow: none; }
html:root #o2c-announcements .o2c-all-updates-cta { margin-block: 18px 12px; }
html:root #o2c-announcements .o2c-all-updates-button { min-height: 46px; padding: 10px 22px; font-size: 16px; box-shadow: none; }
html:root #o2c-announcements .o2c-reader-switch > div { background: var(--review-surface); border: 1px solid var(--review-line); }
html:root #o2c-announcements :is(.o2c-reader-switch button,#o2c-filter-trigger) { border-radius: 6px; font-size: 14px; min-height: 44px; }
html:root #o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed .o2c-archive-entry {
  background: #fff !important; border: 1px solid var(--review-line) !important; border-radius: 12px !important; box-shadow: none !important;
}
html:root #o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed .o2c-archive-entry:is(:hover,:focus-within) { border-color: #9ab4a7 !important; }
html:root #o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed .o2c-entry-title { font-size: 32px !important; line-height: 1.2; letter-spacing: -.025em; color: var(--review-ink); text-wrap: pretty; }
html:root #o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed :is(.o2c-excerpt,.o2c-entry-summary) { color: var(--review-body); }
html:root #o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed .o2c-entry-media { box-shadow: none !important; }
html:root #o2c-announcements .o2c-month-heading { color: var(--review-ink) !important; }
html:root #o2c-announcements .o2c-roundup-number { font-variant-numeric: tabular-nums; color: var(--review-muted); }
html:root #o2c-announcements #o2c-feed .o2c-entry-link:focus-visible { text-decoration: underline !important; text-underline-offset: .15em; text-decoration-thickness: 2px; }
html:root #o2c-announcements .pl-field { color: #4b654c; }
html:root #o2c-announcements .pl-paper-footer { color: var(--review-muted); }

/* Calendar: stable controls and semantic event colors, no extra decoration. */
html:root #o2c-announcements .o2c-calendar { --rc-muted: #5f6c66; --rc-line: #dce3df; }
html:root #o2c-announcements .o2c-calendar .rc-shell { border-radius: 12px; box-shadow: none; }
html:root #o2c-announcements .o2c-calendar :is(.rc-arrow,.rc-latest,[data-rc-mode]) { border-radius: 6px; min-height: 44px; }
html:root #o2c-announcements .o2c-calendar .rc-month-title { font-size: 28px; letter-spacing: -.02em; }
html:root #o2c-announcements .o2c-calendar .rc-day { box-shadow: none; }
html:root #o2c-announcements .o2c-calendar :is(.rc-day-top,.rc-month-choice) { font-variant-numeric: tabular-nums; }
html:root #o2c-announcements .o2c-calendar .rc-upcoming { border-radius: 8px; background: var(--review-surface); box-shadow: none; }
html:root #o2c-announcements .o2c-calendar .rc-upcoming-hint { font-size: 13px; }

/* All announcement families: retain TOC, galleries, source text and foot links. */
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-breadcrumb { padding: 24px 0 20px; font-size: 14px; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-detail-hero { padding: 8px 0 28px; border-color: var(--review-line); }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-detail-hero > :is(time,.o2c-latest-date) { display: inline-block; margin: 0 16px 8px 0; font-size: 14px; color: var(--review-muted); }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-detail-hero > .o2c-badges { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 8px; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-detail-hero h1 { font-size: clamp(34px,3.34vw,48px); line-height: 1.14; letter-spacing: -.025em; max-width: 1060px; margin: 12px 0 18px; text-wrap: pretty; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-deck { font-size: 19px; line-height: 1.6; max-width: 76ch; color: var(--review-body); }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-detail-layout { padding-top: 32px; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-detail-body .o2c-copy { max-width: 68ch; font-size: 18px; line-height: 1.7; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-article-section h2 { font-size: 28px; line-height: 1.25; letter-spacing: -.02em; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-toc p { font-size: 13px; color: var(--review-muted); font-weight: 600; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail.o2c-detail .o2c-toc a { border-left-width: 1px; min-height: 44px; padding-block: 9px; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail.o2c-detail .o2c-toc a[aria-current="location"] { border-left-width: 1px; font-weight: 700; color: #226b61; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-gallery-link { box-shadow: none; border: 1px solid var(--review-line); border-radius: 8px; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-gallery-enlarge { min-width: 44px; min-height: 44px; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-help-box { padding: 28px 32px; background: var(--review-surface); border-radius: 8px; box-shadow: none; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-neighbors span { font-size: 13px; color: var(--review-muted); }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-release-metadata { margin-top: 16px !important; color: var(--review-muted); font-size: 14px; }
html:root #o2c-announcements[data-page="detail"] .o2c-feature-availability { margin-top: 18px; }
html:root #o2c-announcements[data-page="detail"] .o2c-availability-note { font-size: 14px; color: var(--review-muted); }

/* Roadmap and tracker: state controls stay familiar; illustration content stays. */
html:root #o2c-announcements :is(#roadmap,#lesson-refresh-tracker) h1 { font-size: clamp(34px,3.4vw,48px); line-height: 1.15; letter-spacing: -.025em; color: var(--review-ink); }
html:root #o2c-announcements :is(#roadmap,#lesson-refresh-tracker) h1 span { color: inherit; }
html:root #o2c-announcements #roadmap .roadmap-card { border-color: var(--review-line); border-radius: 12px; box-shadow: none; }
html:root #o2c-announcements #roadmap .card-title { letter-spacing: -.02em; color: var(--review-ink); }
html:root #o2c-announcements #roadmap .card-art { background: var(--review-surface); border-color: var(--review-line); }
html:root #o2c-announcements #roadmap .card-art > .rm-progress-preview { box-shadow: none; }
html:root #o2c-announcements #roadmap :is(.focus-areas details,.beta-invite) { box-shadow: none; border-color: var(--review-line); }
html:root #o2c-announcements #roadmap :is(.source-date,.timing,.section-count,.notice) { font-size: 13px; color: var(--review-muted); }
html:root #o2c-announcements #roadmap .status-label { font-size: 13px; }
html:root #o2c-announcements #roadmap .filter[aria-pressed=true] span { color: #fff; }
html:root #o2c-announcements #roadmap .status-label.ongoing { color: #4b654c; }
html:root #o2c-announcements #lesson-refresh-tracker :is(.updated,.result-count,.section-description,.eta-label,.status) { font-size: 13px; color: var(--review-muted); letter-spacing: 0; }
html:root #o2c-announcements #lesson-refresh-tracker .search-box { border-radius: 8px; box-shadow: none; }
html:root #o2c-announcements #lesson-refresh-tracker .search-box input { font-size: 16px; }
html:root #o2c-announcements #lesson-refresh-tracker :is(.filter,.clear-search) { min-height: 44px; }
html:root #o2c-announcements #lesson-refresh-tracker .clear-search { min-width: 44px; }
html:root #o2c-announcements #lesson-refresh-tracker :is(time,.lesson-count) { font-variant-numeric: tabular-nums; }
html:root #o2c-announcements #lesson-refresh-tracker .planned-list .planned-date small { color: #4b654c; }

/* Beta: retain every original word, with refined type and surface treatment. */
html:root #o2c-announcements #main.balanced-opening h2 { letter-spacing: -.025em; }
html:root #o2c-announcements #main.balanced-opening .premium-intro h1 { max-width: 22ch; font-size: clamp(34px,3.25vw,47px); line-height: 1.14; letter-spacing: -.025em; }
html:root #o2c-announcements #main.balanced-opening .premium-description { font-size: 16px; line-height: 1.65; max-width: 56ch; }
html:root #o2c-announcements #main.balanced-opening :is(.premium-actions .micro,.premium-quote figcaption) { font-size: 13px; }
html:root #o2c-announcements #main.balanced-opening .premium-actions .button { min-height: 44px; font-size: 14px; }
html:root #o2c-announcements #main.balanced-opening .pc-stage::before,
html:root #o2c-announcements #main.balanced-opening .pc-stage::after { content: none; }
html:root #o2c-announcements #main.balanced-opening .pc-stage h3 { margin-top: 0; }
html:root #o2c-announcements #main.balanced-opening :is(.section-nav-label,.section-links a) { font-size: 13px; }
html:root #o2c-announcements #main.balanced-opening .pc-merch { border-color: var(--review-line); }
html:root #o2c-announcements #main.balanced-opening .final-cta h2 { max-width: 26ch; }

@media (max-width: 1000px) {
  html:root #o2c-announcements .studio-apt .concept-feature-copy h3 { font-size: 34px; }
  html:root #o2c-announcements .concept-feature.studio-apt { grid-template-rows: minmax(220px,1fr) auto; }
}
@media (max-width: 800px) {
  html:root #o2c-announcements[data-page="detail"] .o2c-detail.o2c-detail .o2c-toc a { border-left: 0; }
  html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-detail-layout { padding-top: 24px; }
}
@media (max-width: 680px) {
  html:root #o2c-announcements[data-page="hub"] .o2c-hero { padding-top: 26px; padding-bottom: 24px; }
  html:root #o2c-announcements[data-page="hub"] .o2c-hero h1 { font-size: 36px; }
  html:root #o2c-announcements .concept-feature.studio-apt { grid-template-rows: auto 240px auto; padding: 24px; }
  html:root #o2c-announcements .studio-apt .concept-feature-copy h3 { font-size: 34px; }
  html:root #o2c-announcements .concept-facts { gap: 10px; }
  html:root #o2c-announcements .studio-apt .concept-facts dd { font-size: 17px; white-space: normal; }
  html:root #o2c-announcements .concept-facts dt { font-size: 12px; }
  html:root #o2c-announcements .studio-handout .concept-paper { width: 205px; }
  html:root #o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed .o2c-entry-title { font-size: 28px !important; }
  html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-detail-hero h1 { font-size: 32px; line-height: 1.18; }
  html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-deck { font-size: 18px; }
  html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-detail-body .o2c-copy { font-size: 17px; line-height: 1.7; }
  html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-article-section h2 { font-size: 26px; }
  html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-detail-hero > .o2c-badges { display: flex; }
  html:root #o2c-announcements #main.balanced-opening .premium-actions { flex-wrap: wrap; gap: 14px; }
}

/* Guided Preview remains a presentation, with quieter surrounding controls. */
html:root #presentation.presentation { border-radius: 10px; box-shadow: none; border-color: var(--review-line); }
html:root #presentation .storyboard { background: #f7f9f8; border-color: var(--review-line); }
html:root #presentation :is(.topbar,.review-controls) { border-color: var(--review-line); }
html:root #presentation .availability { font-size: 13px; }
html:root #presentation .icon-button { width: 44px; height: 44px; }
html:root #presentation :is(.text-button,.skip-button,.contents-toggle) { min-height: 44px; }
html:root #presentation .screen > .eyebrow,
html:root #presentation .demo-heading .eyebrow { text-transform: none; letter-spacing: 0; font-size: 13px; }
html:root #presentation .motion-visual { border-radius: 8px; }
html:root #presentation :is(.product-figure figcaption,.motion-visual figcaption) { font-size: 13px; line-height: 1.5; }
html:root #o2c-announcements #main.balanced-opening .pc-connection { display: none; }
/* Compact the mobile header into two rows. Every original word, including
   Search, stays visible. Long navigation labels may wrap within their column. */
@media (max-width:640px) {
  html:root #o2c-announcements #main.balanced-opening .premium-section-nav .section-nav { min-width: 0; }
  html:root #o2c-announcements #main.balanced-opening .premium-section-nav .section-links { min-width: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; }
  html:root #o2c-announcements #main.balanced-opening .premium-section-nav .section-links a { min-width: 0; min-height: 44px; font-size: 12px; padding: 8px 3px; white-space: normal; line-height: 1.25; text-align: center; justify-content: center; }
  html:root #o2c-announcements #main.balanced-opening .pc-stage { display: block; }
  html:root #o2c-announcements #main.balanced-opening .pc-marker { margin-bottom: 12px; }
  html:root #o2c-announcements #main.balanced-opening .pc-stage h3 { max-width: none; margin: 0 0 8px; }
  html:root #o2c-announcements #main.balanced-opening .pc-stage p { max-width: none; }
  html:root #o2c-announcements .o2c-shared-header-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; width: calc(100% - 40px); min-height: 0; padding: 12px 0 4px; gap: 6px; }
  html:root #o2c-announcements .o2c-shared-logo { display: flex; align-items: center; min-height: 44px; width: 117px; flex: 0 0 117px; }
  html:root #o2c-announcements .o2c-shared-nav { display: contents; }
  html:root #o2c-announcements .o2c-nav-away { order: 1; margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 0; border: 0 !important; }
  html:root #o2c-announcements .o2c-nav-away a { font-size: 13px; min-height: 44px; padding: 8px 12px; }
  html:root #o2c-announcements .o2c-nav-local { order: 2; width: 100%; flex: 0 0 100%; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; }
  html:root #o2c-announcements .o2c-nav-local a { font-size: 12px; min-height: 44px; padding: 8px 2px; justify-content: center; text-align: center; white-space: normal; line-height: 1.25; }
  html:root #o2c-announcements .o2c-search-trigger { position: static; width: auto; height: 44px; min-width: 0; margin: 0; padding: 0; gap: 4px; justify-content: center; font-size: 12px; }
  html:root #o2c-announcements .o2c-search-trigger > span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: nowrap; }
  html:root #o2c-announcements .o2c-search-trigger svg { width: 14px; height: 14px; }
}
@media (max-width:360px) {
  html:root #o2c-announcements .o2c-shared-logo { width: 88px; flex-basis: 88px; }
  html:root #o2c-announcements .o2c-nav-away a { padding-inline: 10px; }
  html:root #o2c-announcements .o2c-search-trigger { font-size: 11px; gap: 3px; }
  html:root #o2c-announcements .o2c-nav-local a { font-size: 11px; }
}
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-help-box > .o2c-eyebrow { font-size: 13px; color: var(--review-muted); text-transform: none; letter-spacing: 0; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-resource-list a:not(.o2c-resource-primary) { color: #226b61; }
/* Inverse focus indicators remain visible on the retained dark brand surfaces. */
html:root #o2c-announcements :is(.studio-apt,.premium-hero) :is(a,button,input,select,summary):focus-visible { outline-color: #d6e8b8; }
html:root #o2c-announcements .studio-apt .concept-feature-link:focus-visible::after { outline-color: #d6e8b8; }
html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-detail-hero .o2c-release-type { letter-spacing: 0; text-transform: none; }

/* Original supporting words remain visible, with quieter formatting. */
html:root #o2c-announcements :is(#roadmap,#lesson-refresh-tracker,#main.balanced-opening) :is(.eyebrow,.pc-eyebrow,.pc-merch-label) { font-size: 13px; letter-spacing: 0; text-transform: none; }
html:root #o2c-announcements #main.balanced-opening .pc-merch-label { color: var(--review-muted); }

/* Keep the transition into the archive compact without compressing its content. */
html:root #o2c-announcements[data-page="hub"] .o2c-highlights { padding-bottom: 20px; }
@media (max-width: 680px) {
  html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-breadcrumb { padding: 18px 0 14px; row-gap: 4px; }
}
@media (max-width: 640px) {
  html:root #o2c-announcements #main.balanced-opening .shipped-grid .shipped-link { flex-direction: row; align-items: center; gap: 12px; padding: 16px; min-height: 80px; }
  html:root #o2c-announcements #main.balanced-opening .shipped-grid .shipped-icon { margin-bottom: 0; }
  html:root #o2c-announcements #main.balanced-opening .shipped-grid .shipped-link > span:not(.shipped-icon) { min-width: 0; flex: 1; font-size: 14px; }
  html:root #o2c-announcements #main.balanced-opening .shipped-grid .shipped-link > svg { position: static; margin-left: auto; }
}

/* Long original feature names need a taller header on the narrowest phones. */
@media (max-width: 360px) {
  html:root #presentation.presentation { --header-height: 80px; }
  html:root #presentation .topbar { padding-block: 6px; }
}

/* Shared help cards keep a consistent inset on smaller reading surfaces. */
@media (max-width: 680px) {
  html:root #o2c-announcements[data-page="detail"] .o2c-detail .o2c-help-box { padding: 24px 20px; }
}