/* ===================================================================   critical-child.css — printed last in <head> (lib/theme.php, wp_head 9999),
   so it wins over main.css / media.css by order. #1093: every colour here is
   a token from main.css :root; the button colour rules that used to live
   here (#03afb1 fills, 2.70:1 with white text) are gone — main.css owns the
   button system. This file keeps: the page ground, the header/banner
   composition and the old landing-block styles (.home-banner, .join-us …).
   ========================================================================== */

/* COMMON */
body{ background:var(--color-bg);}
*, :after, :before{ font-family: var(--font-body);}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{ font-family: var(--font-display);}
.single-content > .wp-block-cover, .single-content > .wp-block-group{ margin-bottom:0;}
.wp-block-group__inner-container{ margin-left:auto; margin-right:auto;}
body.logged-in .hide-logged-in{ display:none !important;}
h2, .h2{ font-weight:700; font-size:36px;}
.search-activities__item .button.icon.toggle-item.active{ background-color:var(--color-teal); border-color:var(--color-teal); color:var(--color-white);}
.single-activity__specialty-item a:hover{ color:var(--color-teal-deep);}
.single-activity__specialty-item a:hover svg, .share-social__item a svg path{ fill:var(--color-teal-deep);}
.specialty-navigation__control-button, .specialty-navigation__action-hint a{ color:var(--color-teal);}
.viv-modal__container .close-button:hover svg{ fill:var(--color-navy);}
.specialty-navigation__child-container input[type="checkbox"]:checked ~ .specialty-navigation__child, .specialty-navigation__child:hover, .specialty-selector__item:hover, .specialty-selector__item.selected, .badge-action{ border-color:var(--color-teal);}
.viv-modal__content .search-activities__load-more button{ padding:11px 24px;}
.provider-tooltip-content a{ background-color:var(--color-teal); border:1px solid var(--color-teal); color:var(--color-white);}
div.res-grid.wp-grid-builder .wpgb-card .provider-tooltip-content a:hover{ background-color:var(--color-teal-deep); border-color:var(--color-teal-deep); color:var(--color-white);}

/* TOP HEADER — the thin navy-ink strip with the audience menu */
.header-container .top-header{ background-color:var(--color-navy-deep); padding:0 15px;}
.top-header .container{ max-width:1538px; padding:0 3%;}
.header-container .top-header .menu{ gap:var(--space-xs);}
.header-container .top-header .menu a{ position:relative; border:none; color:var(--color-pale); padding:11px 12px 9px; font-family:var(--font-body); font-size:14px; line-height:20px; font-weight:500; letter-spacing:0.01em;}
.header-container .top-header .menu a::after{ content:""; position:absolute; left:12px; right:12px; bottom:0; height:3px; border-radius:2px 2px 0 0; background:var(--color-accent); transform:scaleX(0); transform-origin:left;}
.header-container .top-header .menu .menu-item:hover a, .header-container .top-header .menu .menu-item.current-menu-item a, .header-container .top-header .menu .menu-item.current_page_item a{ color:var(--color-white);}
.header-container .top-header .menu .menu-item:hover a::after, .header-container .top-header .menu .menu-item.current-menu-item a::after, .header-container .top-header .menu .menu-item.current_page_item a::after{ transform:scaleX(1);}
.header-container .top-header .menu a:focus-visible{ outline:3px solid var(--color-focus-on-dark); outline-offset:-3px;}

/* HEADER — the lockup bar. Over a hero it floats (absolute, transparent) on the
   photo; on pages without a hero (body.viv-header-solid, set in
   lib/design-system.php) it becomes an in-flow navy band so the white logo
   never lands on a light ground. Sticky state = fixed navy bar with a shadow. */
.header-main{ left:0; padding:0 15px; position:absolute; top:var(--header-top-height); width:100%; min-height:var(--header-main-height); display:flex; align-items:center;}
.header-main > .container{ width:100%;}
.header-fixed .header-main{ background:var(--gradient-bar); box-shadow:var(--shadow-bar); position:fixed; top:0; min-height:76px;}
.header-main .container{ max-width:1538px; padding:0 3%;}
.home .header-main>.container, .page-for-clinicians .header-main .container, .page-for-employers .header-main .container, .page-for-course-providers .header-main .container{ border-bottom:1px solid rgba(255,255,255,0.18);}
.header-fixed .header-main .container{ border:none;}
.archive .header-main .container, .single .header-main .container, .page-template-specialty .header-main .container{ border-bottom:none;}
.logged-in.header-fixed .header-main{ top:32px;}
.viv-header-solid .header-main{ position:relative; top:0; background:var(--gradient-bar);}
.viv-header-solid.header-fixed .header-main{ position:fixed; top:0;}
.viv-header-solid.logged-in.header-fixed .header-main{ top:32px;}
.viv-header-solid.header-fixed header{ padding-bottom:var(--header-main-height);}
.header-main-grid{ padding:var(--space-md) 0;}
.header-fixed .header-main-grid{ padding:6px 0;}

/* LOGO / EXPLORE */
.header-main-grid .site-title{ padding:0;}
.header-main-grid .site-title a{ color:var(--color-white); font-size:30px; line-height:35px;}
.header-main-specialty{ background-color:var(--color-teal); border:1px solid var(--color-teal); font-weight:600; justify-content: normal; max-width:157px; padding:6px 14px 6px 20px; position:relative; width:100%;}
.header-main .site-logo:focus-visible, .mobile-header .site-logo:focus-visible{ outline:3px solid var(--color-focus-on-dark); outline-offset:4px; border-radius:4px;}

/* SEARCH FORM (logged-in header search, banner search) */
.global-search__form{ padding:1px 3px 1px 20px;}
.global-search__submit.icon, .specialty-navigation__search-submit{ background-color:var(--color-wash);}
.global-search__submit.icon svg, .specialty-navigation__search-submit svg, .specialty-navigation__parent.preview .specialty-navigation__parent-arrow svg, .specialty-navigation__parent.expanded .specialty-navigation__parent-arrow svg, .specialty-navigation__parent-data:hover .specialty-navigation__parent-arrow svg{ fill:var(--color-teal);}
.header-main-grid .right.grid-item{ gap:20px; justify-content: end;}
.ai-assis-btn{ background-color:transparent; border:1px solid var(--color-white); color:var(--color-white); font-weight:600; padding:7px 23px 8px;}
.ai-assis-btn:hover{ background-color:var(--color-white); border:1px solid var(--color-white); color:var(--color-navy);}
/* "Join for Free / Log In": one white pill, two links split by a diagonal seam (navy on white 8.20:1).
   Each half is clipped along the slant so its hover wash stops at the seam; --cta-slant = horizontal run of the seam. */
.header-auth-split{ --cta-slant:14px; position:relative; display:inline-flex; align-items:stretch; min-height:44px; background:var(--color-white); border-radius:var(--radius-btn); box-shadow:0 10px 24px -14px rgba(3,26,34,0.7); overflow:hidden; isolation:isolate;}
.header-auth-split__item{ display:inline-flex; align-items:center; justify-content:center; padding:8px 22px; font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.2; color:var(--color-navy); text-decoration:none; white-space:nowrap; transition:background-color .15s ease, color .15s ease;}
.header-auth-split__item--join{ padding-right:calc(18px + var(--cta-slant)); margin-right:calc(-1 * var(--cta-slant)); clip-path:polygon(0 0, 100% 0, calc(100% - var(--cta-slant)) 100%, 0 100%);}
.header-auth-split__seam + .header-auth-split__item{ padding-left:calc(18px + var(--cta-slant)); clip-path:polygon(var(--cta-slant) 0, 100% 0, 100% 100%, 0 100%);}
.header-auth-split__seam{ position:relative; width:0; z-index:1; pointer-events:none;}
.header-auth-split__seam::before{ content:""; position:absolute; top:22%; bottom:22%; left:calc(var(--cta-slant) / 2); width:1.5px; margin-left:-0.75px; background:var(--color-grey-40); transform:rotate(17.6deg);}
.header-auth-split__item:hover{ background:var(--color-wash); color:var(--color-navy-deep);}
.header-auth-split__item:focus-visible{ outline:none; background:var(--color-wash); color:var(--color-navy-deep); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px;}
.header-auth-split:has(:focus-visible){ outline:3px solid var(--color-focus-on-dark); outline-offset:3px;}
.header-main-grid .right .account-menu .arrow-icon svg{ fill:var(--color-white);}
.header-main-grid .right .account-menu__container:focus-visible, .header-main-grid .right .account-menu__container:has(:focus-visible){ outline:3px solid var(--color-focus-on-dark); outline-offset:3px; border-radius:var(--radius-pill);}
.header-main-grid .right .account-menu__avatar .account-avatar{ background-color:var(--color-pale); color:var(--color-navy-deep); font-family:var(--font-display); font-weight:700; box-shadow:0 0 0 2px rgba(255,255,255,0.35);}
.header-main-grid .right .account-menu.active .arrow-icon svg{ fill:var(--color-accent-text);}
/* logged-in collapsed search: a white ring button on navy */
.header-main-grid .center .global-search.header-main-search .global-search__form:not(.expanded) .global-search__submit.icon{ background-color:transparent; border:1px solid rgba(255,255,255,0.55); width:44px; height:44px;}
.header-main-grid .center .global-search.header-main-search .global-search__form:not(.expanded) .global-search__submit.icon svg{ fill:var(--color-white);}
.header-main-grid .center .global-search.header-main-search .global-search__form:not(.expanded) .global-search__submit.icon:hover{ background-color:rgba(255,255,255,0.12); border-color:var(--color-white);}
.header-main-grid .center .global-search.header-main-search .global-search__form.expanded{ border-color:var(--color-white); box-shadow:var(--shadow-pop);}
.header-main-grid .center .global-search__submit.icon:focus-visible{ outline:3px solid var(--color-focus-on-dark); outline-offset:3px;}

/* SPECIALITY (Explore mega menu) */
.header-main .main-menu__container{ padding:25px 0;}
.header-main .specialty-navigation{ gap:25px;}
.header-main .specialty-navigation__search-container{ margin:0;}
.header-main .specialty-navigation__list{ margin:0; gap:15px;}
.header-main .specialty-navigation__parent{ gap:8px;}
.header-main .specialty-navigation__parent-data{ min-height:50px; gap:8px; padding:5px;}
.header-main .specialty-navigation__parent-data .subtitle{ font-size:15px; line-height:normal;}
.header-main .specialty-navigation__parent-icon:not(.default), .header-main .specialty-navigation__parent-arrow{ height:35px;  padding:5px; width:35px;}
.header-main .specialty-navigation__control-button{ font-size:15px; line-height:normal; padding:3px 0;}
.header-main .specialty-navigation__children-list{ gap:8px;}
.header-main .specialty-navigation__child{ min-height:auto; padding:10px;}
.header-main .specialty-navigation__child-title .text-body{ font-size:14px; line-height:normal;}
.header-main .specialty-navigation__list-actions{ margin:0;}

/* BANNER (old landing blocks) */
.wp-block-cover.banner{ padding:180px 15px 131px;}
#banner-text .wp-block-group__inner-container{ max-width:600px; padding:0; text-align:center; width:100%;}
#banner-text .wp-block-image{ margin:0 auto 25px; max-width:280px; width:100%;}
#banner-text h1{ font-size:28px; font-weight:normal; line-height:normal; margin:0 0 25px;}

/* JOIN US (old landing blocks) */
.wp-block-group.join-us{ padding:34px 0 72px;}
.join-us h2, .as-seen-on h2{ font-size:36px; line-height:54px; margin:0 0 36px;}
.join-us .wp-block-group__inner-container{ max-width:910px;}
.join-us .wp-block-countdown-block-countdown{ margin:0 0 57px;}
.join-us div.eb-cd-wrapper div.eb-cd-inner .box{ padding:0 10px 21px;}
.join-us .eb-countdown-lfpjq.eb-cd-wrapper .eb-cd-inner .box:last-child{ border-color:transparent;}
.join-us div.eb-cd-wrapper div.eb-cd-inner .box .eb-cd-digit{ margin:0 0 11px;}
.join-us .h2-head{ font-weight:700; line-height:normal; margin:0 0 10px;}
.join-us h3{ font-size:24px; font-weight:normal; line-height:35px; margin:0 0 42px;}
.join-blocks .wp-block-column{ position:relative;}
.join-us .wp-block-media-text{ display:block; padding:43px 15px 46px;}
.join-us .wp-block-media-text__media img{ display:block; margin:0 auto 11px; max-width:74px; width:100%;}
.join-us .wp-block-media-text > .wp-block-media-text__content{ padding:0;}
.join-us .wp-block-media-text p{ font-size:16px; line-height:28px; margin:0;}
.join-blocks{ gap:50px;}
.join-blocks .wp-block-column{ border-radius:10px;}

/* HOME BANNER (old landing blocks) */
.home-banner{ background: var(--color-navy-deep) url(../img/cme-banner.jpg) no-repeat; background-size:cover; padding:274px 15px 194px;}
.home-banner > .wp-block-group__inner-container{ color:var(--color-white); margin:0 auto; max-width:1224px; text-align:center;}
.home-banner h1{ font-size:72px; font-weight:800; margin:0 0 29px;}
.home-banner h1 strong, .blue-section h2 strong, .in-banner .lib-titles-row h1 strong{ background: url(../img/blue-shape.png) no-repeat left bottom; background-size:contain; padding-bottom:9px;}
.home-banner p{ font-size:24px; font-weight:500; margin:0 0 82px;}
.home-banner .wp-block-buttons{ gap: var(--space-lg)}
.banner-search{ gap:21px; margin:0 auto; max-width:775px; width:100%;}
.banner-search .global-search__form{ border-color:var(--color-white); border-radius:8px; padding:5px 5px 5px 16px;}
.banner-search .global-search__form input{ color:var(--color-black-10);}
.global-search__form input::placeholder{ color:var(--color-grey-40); opacity:1;}
.banner-search .global-search__form .button{ background:var(--color-teal); border:none; font-weight:600; line-height:normal; padding:11px 24px;}
.banner-search .global-search__form .button:hover{ background:var(--color-teal-deep);}
.banner-search .wp-block-buttons{ max-width:217px; width:100%;}
.home-banner .wp-block-buttons .wp-block-button__link, .blue-section .wp-block-buttons .wp-block-button__link{ background-color:transparent; border:1px solid var(--color-white); border-radius:4px; font-size:16px; font-weight:600; line-height:normal; padding:11px 24px; display: inline-flex; align-items: center; justify-content: center; gap:8px;}
.home-banner .wp-block-buttons .wp-block-button__link:after{ content: ''; width: 20px; height: 20px; background: url(../img/white-arrow.png) no-repeat center; background-size:contain; display: inline-flex;align-items: center; justify-content: center;}
.home-banner .wp-block-buttons .wp-block-button__link:hover, .blue-section .wp-block-buttons .wp-block-button__link:hover{ background:var(--color-white); color:var(--color-navy);}
.home-banner .wp-block-buttons .wp-block-button__link:hover:after, .blue-section .wp-block-buttons .wp-block-button__link:hover:after{ background-image: url('../img/sky-arrow.png');}
.home-banner .wp-block-buttons .no-arrow .wp-block-button__link, .blue-section .wp-block-buttons .no-arrow .wp-block-button__link{ background:var(--color-teal); background-image:none; border-color:var(--color-teal); font-weight:600; line-height:normal; padding:11px 24px;}
.home-banner .wp-block-buttons .no-arrow .wp-block-button__link::after, .blue-section .wp-block-buttons .no-arrow .wp-block-button__link::after{ display:none;}
.home-banner .wp-block-buttons .no-arrow .wp-block-button__link:hover, .blue-section .wp-block-buttons .no-arrow .wp-block-button__link:hover{ background:var(--color-teal-deep)!important; color:var(--color-white)!important; border-color:var(--color-teal-deep);}
.banner-search .wp-block-buttons .search-btn .wp-block-button__link{ background:none; display:block; font-size:16px; font-weight:600; padding:16px 15px 16px 60px; position:relative; text-align:left;}
.banner-search .wp-block-buttons .search-btn .wp-block-button__link:before{ background: url(../img/search-line-sky.png) no-repeat center; background-size:20px; content:''; height:20px; left:28px; margin-top:-10px; position:absolute; top:50%; width:20px;}
.banner-search .wp-block-buttons .search-btn .wp-block-button__link:after{ display:none;}
.banner-search .wp-block-buttons .search-btn .wp-block-button__link:hover{ background:var(--color-white); color:var(--color-navy);}

/* SEARCH BANNER (.in-banner: library, activity, account, legal, provider) —
   the photo band under the floating header, one white plate on top */
.in-banner{ background: var(--color-navy-deep) url(../img/cme-banner.jpg) no-repeat center; background-size:cover; margin:0 0 44px; padding:calc(var(--header-top-height) + var(--header-main-height) - 22px) 0 34px; position:relative; isolation:isolate;}
.in-banner::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--gradient-navy);}
.in-banner .container{ padding:0 3%;}
.in-banner .content-plate{ border:none; border-radius:var(--radius-xl); gap:0; padding:21px 24px 60px; position:relative; box-shadow:var(--shadow-deep);}
.in-banner .global-topbar{ margin:0 0 17px;}
.in-banner .global-topbar .container{ padding:0;}
.breadcrumbs__item a{ color:var(--color-teal);}
.breadcrumbs__item a:hover, .in-banner .button.return-page:hover{ color:var(--color-teal-deep);}
.in-banner .lib-titles-row{ margin:0 0 40px; max-width:100%;}
.in-banner .lib-titles-row h1{ font-size:60px; font-weight:700; line-height:1.15; padding:0 0 32px; color:var(--color-navy-ink); letter-spacing:-0.012em;}
.in-banner .lib-titles-row h1 strong{ color:var(--color-teal); font-weight:800;}
.in-banner .lib-sub-title{ font-size:22px; font-weight:400; color:var(--color-grey-40);}
.in-banner .global-search.body-main-search{ margin:0 auto; max-width:938px;}
.in-banner .global-search__form{ border-color:var(--color-grey-80); border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.in-banner .global-search__submit.icon{ background:var(--color-teal); border-radius:6px; height:47px; width:47px;}
.in-banner .global-search__submit.icon:hover{ background:var(--color-teal-deep);}
.in-banner .global-search__submit.icon svg{ fill:var(--color-white);}

/* MEMBER LIBRARY HERO (.in-banner--member) — the post-registration top of /library/.
   Keyword bar is the largest object on the plate; the marketing title, the trust stat
   and the breadcrumb only render for guests. See template-parts/library/hero.php. */
.in-banner--member .content-plate{ padding:18px 24px 22px;}
.lib-hero{ display:flex; flex-direction:column; gap:14px;}
.lib-hero__titles{ display:flex; flex-direction:column; gap:6px;}
.lib-hero__eyebrow{ font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-teal);}
.lib-hero__title{ font-size:24px; font-weight:700; line-height:1.2; letter-spacing:-0.01em; color:var(--color-navy-ink); margin:0; padding:0;}
.in-banner--member .global-search.body-main-search{ margin:0; max-width:100%;}
/* #1520 counts-for-my-MOC chips on the member hero */
.lib-hero__moc{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:-4px 0 0;}
.lib-hero__moc-label{ font-size:13px; font-weight:600; color:var(--color-navy-ink);}
.lib-hero .lib-hero__moc-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:250px; border:1px solid var(--color-teal); background:var(--color-white); color:var(--color-teal-deep); font-family:var(--font-body); font-size:13px; line-height:1.3; font-weight:600; text-decoration:none; cursor:pointer; transition:background .15s ease;}
.lib-hero .lib-hero__moc-chip b{ font-weight:600; color:var(--color-grey-40); font-variant-numeric:tabular-nums;}
.lib-hero .lib-hero__moc-chip:hover{ background:var(--color-wash);}
.lib-hero .lib-hero__moc-chip.is-active{ background:var(--color-teal); border-color:var(--color-teal); color:var(--color-white);}
.lib-hero .lib-hero__moc-chip.is-active b{ color:var(--color-pale);}
.lib-hero .lib-hero__moc-chip:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px;}
.lib-hero__moc-edit{ font-size:12.5px; color:var(--color-grey-50); text-decoration:underline; text-underline-offset:2px;}
.in-banner .page-header .vspec-board.is-mine{ border-color:var(--color-white); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5); opacity:1;}
.in-banner .page-header .vspec-board__mine{ margin-left:6px; padding:1px 6px; border-radius:250px; background:var(--color-white); color:var(--color-teal-deep); font-size:10.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;}
.in-banner .page-header a.vspec-board.is-active .vspec-board__mine{ background:var(--color-teal-deep); color:var(--color-white);}

.lib-hero__more{ display:flex; flex-direction:column; gap:10px;}
.lib-hero__more-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.lib-hero__more-title{ font-size:14px; font-weight:600; color:var(--color-navy-ink); margin:0;}
.lib-hero__more-note{ font-size:12.5px; color:var(--color-grey-50); margin:0;}
.lib-hero__rungs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1px; background:var(--color-grey-90); border:1px solid var(--color-grey-90); border-radius:10px; overflow:hidden; list-style:none; margin:0; padding:0;}
.lib-hero__rung{ margin:0;}
.lib-hero__rung-link{ background:var(--color-white); padding:15px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; height:100%; text-decoration:none; transition:background .15s ease;}
.lib-hero__rung-link:hover, .lib-hero__rung-link:focus-visible{ background:var(--color-blue-bg);}
.lib-hero__rung-link:focus-visible{ outline:2px solid var(--color-focus); outline-offset:-2px;}
.lib-hero__rung-label{ font-size:15px; font-weight:600; color:var(--color-navy-ink);}
.lib-hero__rung-cost{ font-size:11px; font-weight:600; color:var(--color-teal); background:var(--color-wash); border-radius:250px; padding:2px 8px; white-space:nowrap;}

.single-activity .in-banner .content-plate{ margin:0; padding-bottom:40px; width:100%;}
.in-banner .button.return-page{ border:none; padding:0; color:var(--color-grey-40);}
.in-banner .button.return-page:hover{ background-color:transparent; color:var(--color-teal-deep);}
.in-banner .single-activity__header-body{ gap:0;}
.in-banner .single-activity__header-top{ color:var(--color-grey-40); margin:0 0 6px; justify-content:center;}
.in-banner .single-activity__title{ padding:0 0 24px; text-align:center; color:var(--color-navy-ink); max-width:22ch; margin:0 auto; text-wrap:balance;}
.in-banner .single-activity__header-actions{ margin:0 0 12px; gap:12px; justify-content:center;}
.in-banner .single-activity__header-actions .activity-external-handler{ min-height:48px; padding:10px 22px; font-size:13px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;}
.in-banner .single-activity__header-actions .activity-external-handler svg{ height:20px; width:20px;}
.in-banner .single-activity__header-actions .activity-link-inquiry{ min-height:48px;}
.in-banner .single-activity__header-bottom{ justify-content:center;}
.in-banner .single-activity__header-bottom .report-activity{ color:var(--color-grey-40); font-weight:400;}
.in-banner .page-header__grid{ justify-content:center; text-align:center;}
.in-banner .page-header__grid > *{ width:100%; justify-content:center; text-align:center;}
.in-banner .page-header h1{ color:var(--color-navy-ink);}

/* RESPONSIVE */
@media(max-width:1699px){

.home-banner{ padding:254px 15px 174px;}
.home-banner h1{ font-size:68px;}
}

@media(max-width:1599px){

.home-banner{ padding:234px 15px 154px;}
.home-banner h1{ font-size:64px;}
}

@media(max-width:1499px){

.home-banner{ padding:214px 15px 134px;}
.home-banner h1{ font-size:60px;}
}

@media(max-width:1399px){

.wp-block-cover.banner{ padding:160px 15px 120px;}
#banner-text h1{ font-size:25px;}
.join-us h2, .as-seen-on h2{ font-size:32px;}
h1, .h1{ font-size:48px;}
.home-banner{ padding:194px 15px 114px;}
.home-banner h1, .in-banner .lib-titles-row h1{ font-size:56px;}
.home-banner p{ font-size:22px; margin:0 0 65px;}
.in-banner .lib-sub-title{ font-size:20px;}
.in-banner .content-plate{ padding:21px 20px 52px;}
.header-auth-split__item{ padding-left:16px; padding-right:16px;}
.header-auth-split__item--join{ padding-right:calc(12px + var(--cta-slant));}
.header-auth-split__seam + .header-auth-split__item{ padding-left:calc(12px + var(--cta-slant));}
}

@media(max-width:1234px){

.wp-block-cover.banner{ padding:160px 15px 100px;}
#banner-text .wp-block-image{ margin:0 auto 20px;}
#banner-text h1{ font-size:22px; margin:0 0 10px;}
.join-us h2, .as-seen-on h2{ font-size:28px; line-height:40px; margin:0 0 31px;}
.join-blocks{ gap:35px;}
.home-banner > .wp-block-group__inner-container{ margin:0 0;}
h1, .h1{ font-size:44px;}
h2, .h2{ font-size:33px;}
h3, .h3{ font-size:30px;}
.header-main .container, .in-banner .container{ padding:0 20px;}
.header-main-grid .grid-item{ gap:15px;}
.header-main-grid .site-title a{ font-size:25px; line-height:30px;}
.header-main-specialty{ max-width:137px; padding:7px 10px 8px;}
.header-main-specialty svg{ right:10px;}
.home-banner h1, .in-banner .lib-titles-row h1{ font-size:52px;}
}

@media(max-width:1100px){

.in-banner .container{ padding-left:15px; padding-right:15px;}
}

@media(max-width:992px){

.wp-block-cover.banner{ padding:160px 15px 80px;}
#banner-text h1{ font-size:20px; margin:0 0 5px;}
.join-us h2, .as-seen-on h2{ font-size:26px; line-height:35px;}
.wp-block-group.join-us{ padding:34px 0 55px;}
.join-us h3{ font-size:26px; line-height:36px;}
.join-us .wp-block-media-text{ padding:43px 15px 46px;}
.join-blocks{ gap:20px;}
h1, .h1{ font-size:40px;}
h2, .h2{ font-size:30px;}
h3, .h3{ font-size:28px;}
h4, .h4{ font-size:22px;}
h5, .h5{ font-size:20px;}
.home-banner h1, .in-banner .lib-titles-row h1{ font-size:48px;}
.home-banner p{ font-size:20px; margin:0 0 50px;}
.in-banner .lib-sub-title{ font-size:18px;}
}

@media(max-width:781px){

.wp-block-cover.banner{ padding:140px 15px 60px;}
#banner-text .wp-block-image{ max-width:260px;}
.wp-block-group.join-us{ padding:34px 0 40px;}
.join-us h2, .as-seen-on h2{ font-size:24px; line-height:33px; margin:0 0 25px;}
.join-us h3{ font-size:23px; line-height:32px; margin:0 0 30px;}
}

@media(max-width:768px){

body{ font-size:15px;}
h1, .h1{ font-size:34px;}
h2, .h2{ font-size:27px;}
h3, .h3{ font-size:25px;}
h4, .h4{ font-size:20px;}
h5, .h5{ font-size:18px;}
/* mobile top bar: the same navy band as the desktop lockup bar */
.mobile-header{ background:var(--gradient-bar);}
.mobile-header .site-title a{ color:var(--color-white); font-size:20px; line-height:24px;}
.header-container .site-title a{ color:var(--color-black-10); font-size:20px; line-height:24px;}
.mob-right-grid{ display:flex; align-items:center; gap:12px;}
.mobile-menu__button{ width:44px; height:44px; padding:0; background:transparent; border:1px solid rgba(255,255,255,0.55); border-radius:8px;}
.mobile-menu__button:hover{ background:rgba(255,255,255,0.12); border-color:var(--color-white);}
.mobile-menu__button:focus-visible{ outline:3px solid var(--color-focus-on-dark); outline-offset:3px;}
.mobile-menu__button svg{ stroke:var(--color-white);}
.ai-assis-btn{ border-color:var(--color-teal); color:var(--color-teal);}
.home .header-main>.container,.header-main .container{ padding:0; border:none;}
.header-main-grid .grid-item, .header-main-specialty{ max-width:100%;}
.header-main{ position:static; min-height:0; display:block; background:none;}
.viv-header-solid .header-main, .header-fixed .header-main, .viv-header-solid.header-fixed .header-main{ position:static; background:none; box-shadow:none;}
.viv-header-solid.header-fixed header{ padding-bottom:0;}
.tabs__control-item{ font-size:16px; line-height:22px;}
.blue-rec-section.personalized-section .wp-block-buttons .wp-block-button__link {background: none; padding-right: 15px; text-align: center;}
.home-banner{ padding:75px 5px 80px;}
.home-banner h1, .in-banner .lib-titles-row h1{ font-size:40px;}
body .home-banner .banner-search{ display:block;}
.banner-search .global-search{ margin:0 0 16px;}
.banner-search .wp-block-buttons{ max-width:100%; width: 100%;}
.banner-search .wp-block-buttons .search-btn .wp-block-button__link{ padding:12px 15px 12px 60px;}
.banner-search .global-search__form{ gap:16px; flex-direction: column; background: none; border: none; padding: 0;}
.banner-search .global-search__form .button{ width:100%;}
.banner-search .global-search__form .global-search__input{ background-color:var(--color-white); border-radius:8px; padding:14px 16px; width:100%;}
.in-banner{ padding:20px 0 34px;}
.in-banner .content-plate{ border-radius:var(--radius-lg);}
/* drawer: guest CTA becomes the primary teal split, full width, halves share the row */
.header-auth-split{ width:100%; min-height:48px; background:var(--color-teal); box-shadow:none;}
.header-auth-split__item{ flex:1 1 0; color:var(--color-white);}
.header-auth-split__seam::before{ background:var(--color-pale);}
.header-auth-split__item:hover, .header-auth-split__item:focus-visible{ background:var(--color-teal-deep); color:var(--color-white);}
.header-auth-split:has(:focus-visible){ outline-color:var(--color-focus);}
.header-main-grid .right.grid-item{ gap:16px;}
.header-main-grid .right .account-menu .arrow-icon svg{ fill:var(--color-navy);}
.header-main-grid .right .account-menu__avatar .account-avatar{ box-shadow:none;}
.header-container .top-header{ background-color:transparent; padding:0;}
.top-header .container{ padding:0;}
.top-header .menu{ flex-direction:column; gap:0; padding:0; overflow:hidden; position:relative;}
.top-header .menu .menu-item a{ color:var(--color-navy-ink); border:none; border-bottom:1px solid var(--color-grey-90); padding:16px 4px; font-family:var(--font-display); font-size:18px; line-height:24px; font-weight:600;}
.header-container .top-header .menu a::after{ display:none;}
.header-container .top-header .menu .menu-item:hover a, .header-container .top-header .menu .menu-item.current-menu-item a, .header-container .top-header .menu .menu-item.current_page_item a{ color:var(--color-teal-deep);}
.header-container .top-header .menu a:focus-visible{ outline:3px solid var(--color-focus); outline-offset:-3px;}
}

@media(max-width:599px){

.home-banner{ padding:50px 5px 55px;}
body .banner-search{ display:block;}
.banner-search .wp-block-buttons{ margin:12px auto 0;}
.home-banner h1, .in-banner .lib-titles-row h1{ font-size:36px;}
.home-banner p{ font-size:18px; margin:0 0 25px;}
.in-banner .lib-sub-title{ font-size:17px;}
h1, .h1{ font-size:32px;}
h2, .h2{ font-size:25px;}
h3, .h3{ font-size:24px;}
.blue-section .wp-block-buttons > .wp-block-button{ width:auto;}
.blue-section .wp-block-buttons .wp-block-button .wp-block-button__link{ padding:10px 20px}
.in-banner .content-plate{ padding:20px 16px 36px;}
.in-banner .lib-titles-row{ margin:0 0 25px;}
.in-banner--member .content-plate{ padding:16px 16px 18px;}
.lib-hero__title{ font-size:21px;}
.lib-hero__more-head{ gap:2px;}
}

@media(max-width:568px){

#banner-text .wp-block-image{ max-width:240px;}
.join-us h2{ font-size:22px; line-height:30px;}
.join-us h3{ font-size:21px; line-height:30px;}
}

@media(max-width:480px){

.home-banner h1, .in-banner .lib-titles-row h1{ font-size:32px;}
.mob-right-grid{ gap:10px;}
}

/* ACTIVITY HERO (#1263) — the single-activity top: the site's photo band with the
   navy scrim (same as the homepage and the provider hero), left-aligned, no plate;
   the content grid overlaps its foot. Ports the #585 structure to this lineage. */
.in-banner.activity-hero{ margin:0; padding-bottom:104px; color:var(--color-white);}
.activity-hero + .single-activity{ position:relative; z-index:2; margin-top:-64px;}
.activity-hero + .single-activity .content-plate{ box-shadow:var(--shadow-card);}
.activity-hero .global-topbar{ margin:0 0 28px;}
.activity-hero .breadcrumbs__list{ color:rgba(255,255,255,.82);}
.activity-hero .breadcrumbs__item a{ color:var(--color-accent-text);}
.activity-hero .breadcrumbs__item a:hover{ color:var(--color-white);}
.in-banner.activity-hero .button.return-page{ color:rgba(255,255,255,.85);}
.in-banner.activity-hero .button.return-page svg{ fill:currentColor;}
.in-banner.activity-hero .button.return-page:hover{ color:var(--color-white);}
.activity-hero__body{ display:flex; flex-direction:column; align-items:flex-start; gap:18px;}
.activity-hero__top{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px;}
.activity-hero__provider{ display:inline-flex; align-items:center; gap:8px; margin:0; color:var(--color-pale); font-size:16px; font-weight:500;}
.activity-hero__provider-icon{ display:inline-flex;}
.activity-hero__provider-icon svg{ width:20px; height:20px; fill:currentColor;}
.activity-hero__provider .activity__provider-link{ color:var(--color-white);}
.activity-hero__provider .global-info svg{ fill:rgba(255,255,255,.6);}
.activity-hero__provider .global-info:hover svg{ fill:var(--color-white);}
.activity-hero__title{ margin:0; max-width:26ch; color:var(--color-white); font-family:var(--font-display); font-size:clamp(30px, 3.6vw, 46px); font-weight:800; line-height:1.1; letter-spacing:-0.012em; text-wrap:pretty; overflow-wrap:anywhere;}
.activity-hero__title--long{ max-width:34ch; font-size:clamp(26px, 2.9vw, 36px); line-height:1.15; letter-spacing:-0.008em;}
.activity-hero__title--xl{ max-width:44ch; font-size:clamp(22px, 2.3vw, 29px); line-height:1.2; letter-spacing:0; font-weight:700;}
.activity-hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:10px;}
.activity-hero__actions .activity-external-handler{ min-height:50px; padding:10px 24px; font-size:13px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; border-color:rgba(255,255,255,.22); box-shadow:0 12px 28px -12px rgba(0,0,0,.6);}
.activity-hero__actions .activity-external-handler svg{ width:20px; height:20px;}
.activity-hero__actions .activity-external-handler:hover{ background:var(--color-teal-deep); border-color:rgba(255,255,255,.4);}
.activity-hero__actions .bookmark-button{ min-width:50px; min-height:50px; padding:0 12px; background:transparent; border:1px solid rgba(255,255,255,.45); border-radius:var(--radius-btn); color:var(--color-white);}
.activity-hero__actions .bookmark-button svg{ width:22px; height:22px; fill:currentColor;}
.activity-hero__actions .bookmark-button:hover{ background:rgba(255,255,255,.12); border-color:var(--color-white); color:var(--color-white);}
.activity-hero__actions .bookmark-button.bookmarked{ background:var(--color-white); border-color:var(--color-white); color:var(--color-teal);}
.activity-hero__actions .bookmark-button.bookmarked path{ fill:currentColor;}
.activity-hero__actions .bookmark-button .count{ color:inherit;}
.activity-hero__actions .button.ghost, .activity-hero__actions .button.outline{ min-height:50px; padding:10px 18px; background:transparent; border:1px solid rgba(255,255,255,.45); color:var(--color-white); font-weight:600;}
.activity-hero__actions .button.ghost svg{ width:20px; height:20px; fill:currentColor;}
.activity-hero__actions .button.ghost:hover, .activity-hero__actions .button.outline:hover{ background:rgba(255,255,255,.12); border-color:var(--color-white); color:var(--color-white);}
.activity-hero__actions .complete-course-action.active{ background:var(--color-white); border-color:var(--color-white); color:var(--color-teal-deep);}
.activity-hero a:focus-visible, .activity-hero button:focus-visible{ outline:3px solid var(--color-focus-on-dark); outline-offset:3px;}
@media (prefers-reduced-motion: no-preference){
.activity-hero__actions .button, .activity-hero .breadcrumbs__item a, .activity-hero .button.return-page{ transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s;}
}
@media(max-width:992px){
.in-banner.activity-hero{ padding-bottom:88px;}
.activity-hero + .single-activity{ margin-top:-48px;}
}
@media(max-width:768px){
.in-banner.activity-hero{ padding:16px 0 72px;}
.activity-hero + .single-activity{ margin-top:-40px;}
.activity-hero .global-topbar{ margin-bottom:18px;}
.activity-hero__body{ gap:14px;}
.activity-hero__title{ font-size:clamp(26px, 7vw, 34px);}
.activity-hero__title--long{ font-size:clamp(22px, 6vw, 28px);}
.activity-hero__title--xl{ font-size:clamp(19px, 5.2vw, 23px);}
.activity-hero__actions{ width:100%; gap:10px;}
.activity-hero__actions .activity-external-handler{ width:100%; order:-1;}
.activity-hero__actions .button.ghost, .activity-hero__actions .button.outline{ flex:1 1 auto;}
}

/* PAGE HERO (#1282) — light text on the navy band, no plate.
   Eight templates share a byte-identical `.in-banner > .page-header >
   .container > .content-plate` block: /profile, /preferences, terms +
   privacy, /learning-hub, /search-by-specialty, the specialty term archive,
   and the collection view + edit screens. Styling the shared block converts
   all eight at once, so the site stops having two page-top languages: this is
   the treatment the launch homepage and the single-activity hero (#1263)
   already use. Left-aligned, because the page content underneath is.
   The on-dark rules below (topbar, breadcrumbs, ghost buttons, gold focus)
   are written generically enough for .activity-hero to fold into them once
   #1264 lands. */
.in-banner .page-header{ color:var(--color-white); padding:0 0 22px;}
.in-banner .page-header .content-plate{ background:transparent; border:none; border-radius:0; box-shadow:none; padding:0;}
.in-banner .page-header .global-topbar{ margin:0 0 26px;}

/* back link + breadcrumbs on the band (the light-ground rule above paints
   them grey-40 / teal-deep, both of which vanish into the navy) */
.in-banner .page-header .breadcrumbs__list{ color:rgba(255,255,255,0.82);}
.in-banner .page-header .breadcrumbs__item a{ color:var(--color-accent-text);}
.in-banner .page-header .breadcrumbs__item a:hover{ color:var(--color-white);}
.in-banner .page-header .button.return-page{ color:rgba(255,255,255,0.85);}
.in-banner .page-header .button.return-page svg{ fill:currentColor;}
.in-banner .page-header .button.return-page:hover{ background-color:transparent; color:var(--color-white);}

/* left-aligned stack: title, then lede / meta row, then any action row */
.in-banner .page-header__grid{ justify-content:flex-start; text-align:left; gap:16px;}
.in-banner .page-header__grid > *{ width:100%; justify-content:flex-start; text-align:left;}
.in-banner .page-header h1{ margin:0; max-width:24ch; color:var(--color-white); font-family:var(--font-display); font-size:clamp(30px, 3.4vw, 44px); font-weight:800; line-height:1.12; letter-spacing:-0.012em; text-wrap:balance;}
.in-banner .page-header__description{ color:var(--color-pale);}
.in-banner .page-header__description p{ margin:0; max-width:66ch; color:inherit; font-size:18px; line-height:1.5;}
.in-banner .page-header__data{ color:var(--color-pale); align-items:center; gap:16px var(--space-lg);}
.in-banner .page-header__date .label, .in-banner .page-header .color-grey40{ color:rgba(255,255,255,0.72);}
.in-banner .page-header__date .date, .in-banner .page-header .color-black10, .in-banner .page-header .color-black20{ color:var(--color-white);}
.in-banner .page-header__actions{ justify-content:flex-start; gap:12px;}
.in-banner .page-header__actions-group{ justify-content:flex-start; gap:8px;}

/* ghost controls on the band; the solid teal fill keeps its colour but gains a
   hairline + lift so it does not sink into the navy */
.in-banner .page-header__actions .button.icon,
.in-banner .page-header__actions .button.outline{ background-color:transparent; border:1px solid rgba(255,255,255,0.45); color:var(--color-white);}
.in-banner .page-header__actions .button.icon svg,
.in-banner .page-header__actions .button.outline svg{ fill:currentColor;}
.in-banner .page-header__actions .button.icon:hover,
.in-banner .page-header__actions .button.outline:hover{ background-color:rgba(255,255,255,0.12); border-color:var(--color-white); color:var(--color-white);}
.in-banner .page-header__actions .button.icon:disabled,
.in-banner .page-header__actions .button.outline:disabled{ border-color:rgba(255,255,255,0.22); color:rgba(255,255,255,0.45);}
.in-banner .page-header__actions .button:not(.icon):not(.outline):not(.text):not(:disabled){ border-color:rgba(255,255,255,0.22); box-shadow:0 12px 28px -12px rgba(0,0,0,0.6);}
.in-banner .page-header__actions .button:not(.icon):not(.outline):not(.text):disabled{ background-color:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.18); color:rgba(255,255,255,0.62); box-shadow:none;}

/* SPECIALTY ARCHIVE (#1336, taxonomy-viv-specialty.php) — a facts row on the
   band (activity count, certifying boards) and, under a category page, the
   specialties in it as pill links on the white ground. The pills reuse the
   wash + teal-deep read of the homepage / curated-post chips; the boards are
   ghost pills on the navy, like the hero's outline buttons. */
.in-banner .page-header .vspec-facts{ display:flex; flex-wrap:wrap; gap:10px 40px; margin:0; padding:0;}
.in-banner .page-header .vspec-facts__item{ display:flex; flex-direction:column; gap:5px; width:auto;}
.in-banner .page-header .vspec-facts dt{ margin:0; color:rgba(255,255,255,0.72); font-family:var(--font-body); font-size:12px; line-height:1.3; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;}
.in-banner .page-header .vspec-facts dd{ margin:0; color:var(--color-white); font-family:var(--font-display); font-size:22px; line-height:1.2; font-weight:700; letter-spacing:-0.01em;}
.in-banner .page-header .vspec-board{ display:inline-block; margin:1px 6px 0 0; padding:3px 11px; border-radius:250px; border:1px solid rgba(255,255,255,0.38); background:rgba(255,255,255,0.10); color:var(--color-white); font-family:var(--font-body); font-size:13px; line-height:1.35; font-weight:600; letter-spacing:0.02em;}
.vspec-children{ padding:26px 0 4px;}
.vspec-children__label{ margin:0; color:var(--color-grey-50); font-family:var(--font-body); font-size:12px; line-height:1.3; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;}
.vspec-children__list{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:12px 0 0; padding:0;}
.vspec-pill{ display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:7px 14px; border-radius:250px; border:1px solid #C9E6E4; background:#E6F4F4; color:var(--color-teal-deep); font-family:var(--font-body); font-size:13.5px; line-height:1.3; font-weight:600; text-decoration:none; transition:background-color .15s, border-color .15s, color .15s;}
.vspec-pill b{ font-weight:500; color:var(--color-teal);}
.vspec-pill:hover, .vspec-pill:focus-visible{ background:var(--color-teal); border-color:var(--color-teal); color:var(--color-white);}
.vspec-pill:hover b, .vspec-pill:focus-visible b{ color:rgba(255,255,255,0.85);}

/* the collection status select keeps its light control on the band (same read
   as the homepage hero's search box). Its select2 face laid the icon and the
   label out inline, so the label fell out of the box on both grounds — a
   pre-existing bug that the navy made unreadable rather than merely untidy. */
.page-header__status .select2-container .select2-selection--single{ height:auto;}
.page-header__status .select2-container .select2-selection--single .select2-selection__rendered{ display:flex; align-items:center; gap:6px; padding:8px 34px 8px 12px; line-height:1.25;}
.page-header__status .select2-option__img{ width:18px; height:18px; flex:none;}
.page-header__status .select2-option__text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.in-banner .page-header a:focus-visible,
.in-banner .page-header button:focus-visible,
.in-banner .page-header select:focus-visible{ outline:3px solid var(--color-focus-on-dark); outline-offset:3px;}
@media (prefers-reduced-motion: no-preference){
.in-banner .page-header .button, .in-banner .page-header .breadcrumbs__item a{ transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s;}
}
@media(max-width:768px){
.in-banner .page-header{ padding-bottom:16px;}
.in-banner .page-header .global-topbar{ margin-bottom:18px;}
.in-banner .page-header__grid{ gap:12px;}
.in-banner .page-header h1{ font-size:clamp(26px, 7vw, 34px);}
.in-banner .page-header__description p{ font-size:16px;}
.in-banner .page-header__actions{ width:100%; flex-wrap:wrap;}
}

/* SPECIALTY SCOPE SWITCHER (#1351) — "Browsing [General Surgery · 8,136 ▾]"
   in the specialty page hero. The pill is the light control on the navy band
   (same read as the homepage hero search box); the menu is a white card that
   lists the group, the current term and its siblings / children with counts,
   every row a link to that term's own archive (the #1323 grid scope does the
   narrowing). Data: lib/specialty-switcher.php. */
.page-header__browse{ display:flex;}
.spec-switcher{ position:relative; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.spec-switcher__label{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,0.82);}
.spec-switcher__label svg{ width:18px; height:18px; fill:currentColor;}
.spec-switcher__pill{ display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:8px 14px 8px 18px; border-radius:999px; background:var(--color-white); border:1px solid rgba(255,255,255,0.35); box-shadow:var(--shadow-pop); color:var(--color-navy-ink); font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.2; text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none;}
.spec-switcher__pill:hover{ box-shadow:var(--shadow-lift);}
.spec-switcher__pill .spec-switcher__count{ padding:2px 9px; border-radius:999px; background:var(--color-wash);}
.spec-switcher__count{ flex:none; font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--color-grey-50); font-variant-numeric:tabular-nums;}
.spec-switcher__caret{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; color:var(--color-teal);}
.spec-switcher[data-open] .spec-switcher__caret{ transform:rotate(180deg);}
.spec-switcher__menu{ position:absolute; top:calc(100% + 10px); left:0; z-index:60; width:min(440px, calc(100vw - 32px)); padding:8px; background:var(--color-white); border-radius:18px; box-shadow:var(--shadow-deep); color:var(--color-navy-ink);}
.spec-switcher__menu ul{ list-style:none; margin:0; padding:0; max-height:min(62vh, 520px); overflow:auto; overscroll-behavior:contain;}
.spec-switcher__menu li{ margin:0; padding:0;}
.spec-switcher__top{ padding-bottom:6px; margin-bottom:4px; border-bottom:1px solid var(--color-grey-90);}
.spec-switcher__group{ padding:10px 14px 6px; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--color-grey-50);}
.spec-switcher__item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border-radius:12px; color:var(--color-navy-ink); text-decoration:none; font-family:var(--font-body); font-weight:500; font-size:16px; line-height:1.3;}
.spec-switcher__item-name{ display:inline-flex; align-items:center; gap:8px; min-width:0;}
.spec-switcher__item-name svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.spec-switcher__item:hover{ background:var(--color-wash); color:var(--color-teal-deep);}
.spec-switcher__item:focus-visible{ outline:3px solid var(--color-focus); outline-offset:-3px;}
.spec-switcher__item.is-current{ background:var(--color-blue-bg); box-shadow:inset 0 0 0 2px var(--color-teal); font-weight:700;}
.spec-switcher__item.is-current .spec-switcher__count{ color:var(--color-teal-deep);}
.spec-switcher__top .spec-switcher__item:not(.is-current){ color:var(--color-teal-deep); font-weight:600;}
@media (prefers-reduced-motion: no-preference){
.spec-switcher__caret{ transition:transform .15s;}
.spec-switcher__pill{ transition:box-shadow .15s;}
}
@media(max-width:768px){
.spec-switcher{ width:100%; gap:10px;}
.spec-switcher__pill{ width:100%; justify-content:space-between; font-size:16px;}
.spec-switcher__name{ flex:1 1 auto; min-width:0;}
.spec-switcher__menu{ width:100%;}
}
/* .in-banner is an isolated stacking context (isolation:isolate above), so a
   z-index inside it can never clear the section that follows. Lift the whole
   band while the menu is open instead. */
.in-banner:has(.spec-switcher[data-open]){ z-index:60;}
/* keyword search inside the specialty (#1351): the library's .body-main-search
   box, left-aligned on the band like the switcher above it */
.page-header__search{ display:flex;}
.in-banner .page-header .global-search.body-main-search{ margin:0; max-width:640px;}
.in-banner .page-header .global-search__form{ border-radius:999px; border-color:rgba(255,255,255,0.35); box-shadow:var(--shadow-pop);}
.in-banner .page-header .global-search__submit.icon{ border-radius:50%; height:42px; width:42px;}
/* filter field at the top of a long switcher list */
.spec-switcher__filter{ display:flex; align-items:center; gap:8px; margin:4px 4px 8px; padding:0 12px; min-height:40px; border:1px solid var(--color-grey-80); border-radius:12px; background:var(--color-bg); color:var(--color-grey-50);}
.spec-switcher__filter:focus-within{ border-color:var(--color-teal); background:var(--color-white); box-shadow:0 0 0 3px var(--color-wash);}
.spec-switcher__filter svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
.spec-switcher__filter input{ flex:1; min-width:0; border:0; padding:8px 0; background:transparent; font:inherit; font-size:15px; color:var(--color-navy-ink); outline:none;}
.spec-switcher__filter input::-webkit-search-cancel-button{ -webkit-appearance:none;}
.spec-switcher__menu.is-empty ul::after{ content:"No match"; display:block; padding:12px 14px; color:var(--color-grey-50); font-size:14px;}

/* PERSONAL AREA (#1356) — the hub hero: the member on the band, and the tab
   row (My feed · Bookmarks · Collections · Saved searches · Track CME · Account)
   sitting on the band's bottom edge, the way the top nav underlines its current
   item. Shared by /profile, /learning-hub and /my-feed via
   template-parts/account/hub-hero.php. The tabs are links, so the row is a
   <nav>: no swiper, it just scrolls sideways on narrow screens. */
.in-banner.hub-hero{ padding-bottom:0; margin-bottom:0;}
.hub-hero .page-header{ padding-bottom:0;}
.hub-hero .page-header .global-topbar{ margin-bottom:22px;}
.hub-hero__identity{ display:flex; align-items:center; gap:22px; margin:0 0 28px;}
.hub-hero__avatar{ position:relative; width:96px; height:96px; flex:none; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,0.38), var(--shadow-pop);}
.hub-hero__avatar .account-avatar{ font-family:var(--font-display); font-size:38px; font-weight:700; color:var(--color-navy-ink); background:var(--color-wash);}
.hub-hero__avatar .account-avatar img{ width:100%; height:100%; object-fit:cover;}
.hub-hero__avatar-action{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:0; border:none; border-radius:50%; background:rgba(11,63,78,0.58); color:var(--color-white); cursor:pointer; opacity:0;}
.hub-hero__avatar-action svg{ width:26px; height:26px; fill:currentColor;}
.hub-hero__avatar:hover .hub-hero__avatar-action, .hub-hero__avatar-action:focus-visible{ opacity:1;}
.hub-hero__who{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:6px;}
.in-banner .page-header .hub-hero__name{ max-width:none; font-size:clamp(28px, 3vw, 40px); overflow-wrap:anywhere;}
.hub-hero__meta{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; color:var(--color-pale); font-size:15px; line-height:1.4;}
.hub-hero__role{ font-weight:600; color:var(--color-white); text-transform:capitalize;}
.hub-hero__role + .hub-hero__email::before{ content:"\00b7"; margin-right:10px; color:rgba(255,255,255,0.5);}
.hub-hero__email{ color:rgba(255,255,255,0.74); overflow-wrap:anywhere;}
.in-banner .page-header .hub-hero__actions{ flex:none; margin-left:auto; width:auto;}

/* the tab row is a white plate that straddles the band's bottom edge (Kalman,
   2026-09-07: "make the tabs white"); the band's negative margin lets the
   lower half sit over the page ground, .hub-panel pads for it */
.hub-tabs{ position:relative; z-index:1; margin:0 0 -30px; padding:0 8px; background:var(--color-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);}
.hub-tabs__list{ display:flex; align-items:stretch; gap:2px; margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.hub-tabs__list::-webkit-scrollbar{ display:none;}
.hub-tabs__item{ flex:none; display:flex;}
.hub-tabs__link{ position:relative; display:flex; align-items:center; gap:8px; padding:18px 14px; color:var(--color-grey-40); font-family:var(--font-body); font-size:15px; font-weight:500; line-height:20px; white-space:nowrap; text-decoration:none;}
.hub-tabs__link::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px; border-radius:2px 2px 0 0; background:var(--color-teal); transform:scaleX(0); transform-origin:left;}
.hub-tabs__link svg{ width:20px; height:20px; flex:none; fill:currentColor;}
.hub-tabs__link:hover{ color:var(--color-navy-ink);}
.hub-tabs__link.is-active{ color:var(--color-navy-ink); font-weight:600;}
.hub-tabs__link.is-active::after{ transform:scaleX(1);}
.hub-tabs__link.is-active svg{ fill:var(--color-teal);}
.hub-tabs__count{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:var(--color-wash); color:var(--color-teal-deep); font-size:12px; font-weight:600; line-height:1;}
.hub-tabs__link.is-active .hub-tabs__count{ background:var(--color-teal); color:var(--color-white);}
.hub-tabs__count.is-zero{ background:var(--color-bg); color:var(--color-grey-50);}
.hub-tabs__link.is-disabled{ color:var(--color-grey-50); opacity:0.6; cursor:default;}
.hub-tabs__badge{ padding:2px 8px; border-radius:999px; background:var(--color-wash); color:var(--color-teal-deep); font-size:11px; font-weight:600; letter-spacing:0.02em; line-height:1.4;}
button.hub-tabs__link--ask{ border:0; background:transparent; cursor:pointer; color:var(--color-grey-50);}
button.hub-tabs__link--ask:hover{ color:var(--color-navy-ink);}
button.hub-tabs__link--ask:hover .hub-tabs__badge--ask{ background:var(--color-teal); color:var(--color-white);}
.hub-tabs__badge--muted{ background:var(--color-bg); color:var(--color-grey-50);}
.in-banner .page-header .hub-tabs__link:focus-visible{ outline:3px solid var(--color-focus); outline-offset:-3px;}
@media (prefers-reduced-motion: no-preference){
.hub-hero__avatar-action{ transition:opacity .15s;}
.hub-tabs__link{ transition:color .15s, background-color .15s;}
.hub-tabs__link::after{ transition:transform .18s;}
}
@media(max-width:992px){
.hub-tabs::before, .hub-tabs::after{ content:""; position:absolute; top:0; bottom:0; width:44px; pointer-events:none; opacity:0;}
.hub-tabs::before{ left:0; border-radius:var(--radius-lg) 0 0 var(--radius-lg); background:linear-gradient(270deg, rgba(255,255,255,0), var(--color-white) 70%);}
.hub-tabs::after{ right:0; border-radius:0 var(--radius-lg) var(--radius-lg) 0; background:linear-gradient(90deg, rgba(255,255,255,0), var(--color-white) 70%);}
.hub-tabs.is-scrolled::before, .hub-tabs.is-scrollable::after{ opacity:1;}
}
@media(max-width:768px){
.hub-hero .page-header .global-topbar{ margin-bottom:16px;}
.hub-hero__identity{ gap:14px; margin-bottom:20px;}
.hub-hero__avatar{ width:64px; height:64px;}
.hub-hero__avatar .account-avatar{ font-size:26px;}
.in-banner .page-header .hub-hero__name{ font-size:clamp(22px, 6vw, 28px);}
.hub-hero__meta{ font-size:14px;}
.hub-hero__role + .hub-hero__email::before{ display:none;}
.hub-hero__email{ flex-basis:100%;}
.in-banner .page-header .hub-hero__actions{ display:none;}
.hub-tabs{ margin-bottom:-24px; padding:0 4px;}
.hub-tabs__link{ padding:15px 12px; font-size:14px;}
.hub-tabs__link::after{ left:12px; right:12px;}
}
@media (max-width: 767px){
.in-banner .page-header .vspec-facts{ gap:10px 28px;}
.in-banner .page-header .vspec-facts dd{ font-size:19px;}
.vspec-children{ padding-top:20px;}
.vspec-pill{ padding:6px 12px; font-size:13px;}
}

/* #1351 (2): board chips as filters — count badge, hover, pressed state; rollup-only
   boards (no activity lists them) stay plain and muted */
.in-banner .page-header a.vspec-board{ text-decoration:none; cursor:pointer;}
.in-banner .page-header .vspec-board b{ margin-left:5px; font-weight:600; color:var(--color-pale); font-variant-numeric:tabular-nums;}
.in-banner .page-header a.vspec-board:hover{ background:rgba(255,255,255,0.22); border-color:var(--color-white);}
.in-banner .page-header a.vspec-board.is-active{ background:var(--color-white); border-color:var(--color-white); color:var(--color-navy-ink);}
.in-banner .page-header a.vspec-board.is-active b{ color:var(--color-teal-deep);}
.in-banner .page-header a.vspec-board:focus-visible{ outline:3px solid var(--color-focus-on-dark); outline-offset:2px;}
.in-banner .page-header .vspec-board--plain{ opacity:0.6;}
@media (prefers-reduced-motion: no-preference){
.in-banner .page-header a.vspec-board{ transition:background-color .15s, border-color .15s, color .15s;}
}
/* #1351 (3): the menu drills down — grandchildren indent under their parent */
.spec-switcher__item--sub{ padding-left:34px; font-size:15px; color:var(--color-grey-40);}
.spec-switcher__item--sub::before{ content:""; position:absolute; left:20px; width:6px; height:6px; border-radius:50%; background:var(--color-wash-line);}
.spec-switcher__item{ position:relative;}