/* The same components are rendered by tools/page-examples/components.py in both galleries and pages. */
.example-site .section--surface{padding:36px;background:var(--canvas);border-radius:var(--radius-section)}
@media(max-width:1100px){.example-site .section--surface{padding:26px}}
@media(max-width:520px){.example-site .section--surface{padding:20px 16px;border-radius:24px}}
@media(max-width:520px){.example-site .section--surface .section-heading{flex-direction:column;align-items:stretch}.example-site .section--surface .section-heading>a{align-self:flex-end;max-width:100%}}
:root{--tag-neutral-bg:#eeeeeb;--control-height:52px;--control-inline:16px;--catalog-control-height:68px;--quick-control-height:var(--catalog-control-height);--tag-contrast-border:#87988d;--tag-contrast-ink:#183325;--direction-hover-bg:color-mix(in srgb,var(--canvas) 60%,transparent)}
.direction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:0 32px}
.direction-item{padding:24px 16px;border:0;border-radius:var(--radius-card);display:flex;align-items:stretch;gap:14px;min-width:0;color:var(--ink);text-decoration:none;transition:background-color .15s}
.direction-item .index{color:var(--muted);font:11px var(--mono);padding-top:5px;flex:none;align-self:flex-start}.direction-copy{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start}.direction-item h3{font-size:19px;margin-bottom:7px;overflow-wrap:anywhere}.direction-item p{font-size:12px;color:var(--muted);margin-bottom:12px}.direction-item .arrow{margin-left:auto;flex:none;align-self:flex-start}
.direction-state{display:flex;flex-direction:column}.direction-state>.direction-item{flex:1}
.direction-item:is(.focus-example,:focus-visible){background:var(--canvas);outline:3px solid var(--brand-ink);outline-offset:-3px}.direction-item.is-hover{background:var(--direction-hover-bg)}
@media(hover:hover){.direction-item:hover{background:var(--direction-hover-bg)}}
@media(max-width:800px){.direction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.direction-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.direction-item{transition:none}}
.count-tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.count-tag{display:inline-flex;align-items:center;min-height:28px;border-radius:7px;padding:5px 9px;background:var(--tag-neutral-bg);color:#53554f;font-size:12px;line-height:1.4;font-weight:500;letter-spacing:normal;white-space:normal}.count-tag--neutral-soft{background:color-mix(in srgb,var(--tag-neutral-bg) 60%,transparent)}.direction-item .count-tag{margin-top:auto;flex:none}.results-bar [data-count]{display:inline-flex;border-radius:7px;padding:6px 10px;background:#eeeeeb;color:#53554f;font-size:12px}
.entity-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.entity-chip{display:inline-flex;align-items:center;max-width:100%;overflow-wrap:anywhere;border:1px solid #ccd4cd;border-radius:8px;padding:9px 13px;background:white;color:#24382d;font-size:13px;line-height:1.5;font-weight:500}.entity-chip[href]:hover{border-color:var(--ink);background:#f6f7f3}.detail-hero .entity-chips{margin-top:24px}.count-tag--green{background:var(--brand-soft);color:var(--brand-ink)}.count-tag--contrast,.detail-hero .entity-chip{background:var(--paper);border:1px solid var(--tag-contrast-border);color:var(--tag-contrast-ink);border-radius:8px;padding:9px 13px;font-size:13px;line-height:1.5;font-weight:500}.relation-group+.relation-group{margin-top:26px}.example-site .relation-group h3{font-size:18px;margin:0 0 12px}.relation-more summary{cursor:pointer;min-height:42px;display:flex;align-items:center;padding:8px 14px;border:1px solid var(--line);border-radius:8px;font-size:13px}.relation-more{min-width:0;max-width:100%}.relation-more[open]{flex-basis:100%}.relation-more[open]>summary{display:none}.relation-more .entity-chip[tabindex="-1"]:focus{outline:none}
.example-site .course-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,265px),1fr));gap:20px;align-items:stretch}.example-site .course-card{min-width:0;max-width:100%;display:flex;flex-direction:column}.example-site .course-card .course-body{flex:1;display:flex;flex-direction:column;padding:24px}.example-site .course-card h3{font-size:22px;line-height:1.3;letter-spacing:-.035em;margin:0 0 16px;min-height:0}.example-site .course-card .meta{font-size:12px;line-height:1.65;margin:0 0 14px;min-height:0}.example-site .course-card .course-description{font-size:14px;line-height:1.65;margin:0 0 24px;min-height:0}.example-site .course-card .course-price{font-size:27px;line-height:1.25;letter-spacing:-.035em;margin:0;white-space:nowrap;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px}.example-site .course-card .course-installment{line-height:1.5;min-height:36px}.example-site .course-card .course-actions{display:grid;gap:10px;margin-top:20px}.example-site .course-card .btn{margin:0;min-height:var(--control-height);font-size:13px;padding:12px 14px;white-space:normal}.btn.outline.white{background:white}.example-site .course-card .course-art{height:172px}.example-site .prose .course-card{font-size:14px}.example-site .prose .course-grid{margin:22px 0}.example-site .prose .course-card p{line-height:1.65}.example-site .prose .course-card .course-price-box{margin-top:auto}
.example-site .directory-controls{display:flex;flex-wrap:nowrap;gap:12px;align-items:end;margin:24px 0 18px}.example-site .directory-controls .field{flex:1;min-width:0;margin:0}.example-site .directory-controls input,.example-site .directory-controls .btn{min-height:var(--control-height);height:var(--control-height);box-sizing:border-box}.example-site .directory-controls .btn{margin:0;flex:none}.example-site .catalog-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}.example-site .catalog-tools>.dropdown{flex:1;min-width:180px}.example-site .catalog-tools>#more-filters{min-height:68px}.example-site .quick-filter{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0}.example-site .quick-filter .dropdown{margin-left:auto;min-width:230px}.example-site .quick-filter .dropdown-trigger,.example-site .quick-filter>.chip{height:var(--quick-control-height);min-height:var(--quick-control-height);box-sizing:border-box}.example-site .results-bar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:20px 0}.example-site .error{color:#923d23;margin-top:14px}.filter-count{border-radius:5px;background:var(--ink);color:white;padding:2px 6px;font-size:11px}.filters-dialog .all-filters-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.filter-context{margin-bottom:24px}.filters-dialog-footer{display:flex;justify-content:space-between;gap:12px;padding-top:24px;border-top:1px solid var(--line);margin-top:24px}.filters-dialog .dropdown{min-width:0}.filters-dialog .dropdown-trigger{width:100%}.example-site .facet-intro{margin:28px 0 0}
.example-site .site-footer h3{font-size:15px;line-height:1.5;letter-spacing:0;margin:0 0 12px}.example-site .site-footer .footer-logo{width:100%;height:auto;display:block}.example-site .site-footer .footer-description{font-size:13px;line-height:1.7;margin-top:20px;max-width:310px}.example-site .site-footer .footer-links{gap:0;font-size:14px}.example-site .footer-bottom{font-size:12px;line-height:1.7;gap:20px}.example-site .footer-bottom>div{display:flex;gap:16px;flex-wrap:wrap}.footer-separator{display:none}
.toc-island{display:none}.toc a[aria-current=location]{color:var(--ink);font-weight:650;border-left:3px solid var(--brand-ink);padding-left:12px;margin-left:-15px}.toc-dialog{border:1px solid var(--line);border-radius:24px;padding:26px;width:min(600px,calc(100% - 32px));max-height:85dvh;overflow:auto;background:white;color:var(--ink);margin:auto}.toc-dialog::backdrop{background:#14141466}.toc-dialog nav{display:grid;gap:4px;margin-top:20px}.toc-dialog nav a{padding:13px 14px;border-radius:10px;line-height:1.5;font-size:14px;min-height:48px}.toc-dialog nav a[aria-current=location]{background:var(--brand-soft);font-weight:600}.toc-dialog .dialog-top h2{font-size:25px}.prose>section{scroll-margin-top:24px}.example-site main{min-width:0}.example-site .section-heading h2{overflow-wrap:anywhere}.seo-help{max-width:980px}.seo-help p+p{margin-top:18px}
@media(max-width:800px){.toc{display:none}.toc-island{display:block;position:fixed;z-index:60;bottom:calc(12px + env(safe-area-inset-bottom));left:16px;right:16px}.toc-island .btn{width:100%;box-shadow:0 6px 30px #14141430;text-align:left;gap:12px;min-height:60px;border-radius:16px}.toc-island [data-toc-current]{flex:1;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:12px;font-weight:400;opacity:.8}.toc-island .icon{flex:none}.example-site:has(.toc-island){padding-bottom:calc(88px + env(safe-area-inset-bottom))}.example-site:has(.toc-island) .toast{bottom:calc(88px + env(safe-area-inset-bottom))}.toc-dialog{margin:auto 16px calc(14px + env(safe-area-inset-bottom));width:calc(100% - 32px)}}
@media(max-width:520px){.example-site .catalog-tools>.dropdown{min-width:140px}.example-site .catalog-tools>#more-filters{width:100%;min-height:48px}.filters-dialog .all-filters-grid{grid-template-columns:1fr}.filters-dialog-footer{flex-wrap:wrap}.filters-dialog-footer .btn{flex:1;min-width:140px}.example-site .directory-controls{gap:8px}.example-site .directory-controls .btn{padding:10px 13px;font-size:12px}.example-site .directory-controls input{font-size:16px}.example-site .course-card .course-art{height:190px}.example-site .site-footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}.example-site .site-footer .footer-grid>div:first-child{grid-column:1/-1}.example-site .site-footer .footer-logo{width:180px}.example-site .footer-bottom{display:flex;flex-direction:column;align-items:start}.example-site .footer-bottom>div{display:grid;gap:10px}.example-site .footer-bottom>div a{min-height:32px;display:flex;align-items:center}.example-site .home-intro .feature-visual{min-width:0;overflow:hidden}}

.example-site .site-footer{margin-top:96px}.example-site .footer-grid{gap:48px}@media(max-width:800px){.example-site .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}.example-site .footer-grid>:first-child{grid-column:1/-1}}@media(max-width:520px){.example-site .site-footer{margin-top:64px}.example-site .footer-bottom{margin-top:32px}}

.matrix-details{margin:24px 0}.matrix-details>summary{cursor:pointer;padding:18px 22px;border:1px solid var(--line);border-radius:12px;font-size:15px;font-weight:600}.matrix-details .data-table{min-width:800px}

/* Catalog controls share the existing school dropdown size at every breakpoint. */
.example-site #catalog-filters .directory-controls input,
.example-site #catalog-filters .btn,
.example-site #filters-dialog .dropdown-trigger,
.example-site #filters-dialog .filters-dialog-footer .btn{height:var(--catalog-control-height);min-height:var(--catalog-control-height);box-sizing:border-box}
.example-site .directory-controls .filter-action{border-radius:12px;padding:12px 16px;gap:8px;font-size:13px;white-space:nowrap}
.example-site .filter-reset>.icon{display:none}
.example-site #catalog-filters.collection-catalog-filters .directory-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px) max-content;align-items:end}
.collection-catalog-filters .dropdown{min-width:0}
.example-site #catalog-filters.collection-catalog-filters .dropdown-trigger{width:100%;height:var(--catalog-control-height);min-height:var(--catalog-control-height)}
@media(max-width:800px){
 .example-site #catalog-filters.collection-catalog-filters .directory-controls{grid-template-columns:minmax(0,1fr) max-content}
 .collection-catalog-filters .collection-search{display:none}
}
.example-site .quick-filter .dropdown-trigger{border-radius:12px}
.example-site .quick-filter .dropdown-copy{gap:3px}
@media(max-width:800px){
 .example-site .directory-controls .filter-action{position:relative;width:var(--catalog-control-height);min-width:var(--catalog-control-height);padding:0;gap:0}
 .example-site .filter-action-label{display:none}
 .example-site .directory-controls .filter-count{position:absolute;top:5px;right:5px;min-width:20px;height:20px;padding:0 2px;line-height:1}
 .example-site .directory-controls .filter-action>.icon{display:block;width:24px;height:24px}
}

/* Price pairs reuse the category reference; the old price is never inferred. */
.example-site .quick-filter:has(.inline-price){display:grid;grid-template-columns:minmax(0,160px) minmax(0,160px) minmax(0,1fr);gap:12px;align-items:stretch}
.example-site .quick-filter:has(.inline-price)>.dropdown{min-width:0;width:min(100%,270px);justify-self:end;margin:0}
/* Shared columns align sorting with both action buttons, including their gap. */
@media(min-width:801px){
 .example-site #catalog-filters:has(.inline-price){display:grid;grid-template-columns:minmax(0,160px) minmax(0,160px) minmax(0,1fr) max-content max-content;column-gap:12px}
 .example-site #catalog-filters:has(.inline-price)>*{grid-column:1/-1}
 .example-site #catalog-filters:has(.inline-price)>.directory-controls,
 .example-site #catalog-filters .quick-filter:has(.inline-price){display:grid;grid-template-columns:subgrid}
 .example-site #catalog-filters:has(.inline-price) .directory-controls>.field{grid-column:1/4}
 .example-site #catalog-filters:has(.inline-price) #more-filters{grid-column:4}
 .example-site #catalog-filters:has(.inline-price) .filter-reset{grid-column:5}
 .example-site #catalog-filters .quick-filter:has(.inline-price)>.dropdown{grid-column:4/-1;width:100%}
}
.inline-price{height:var(--quick-control-height);box-sizing:border-box;min-width:0;border:1px solid var(--line);border-radius:12px;padding:7px var(--control-inline);display:flex;flex-direction:column;justify-content:center;background:var(--paper);cursor:text}
.inline-price>span{font-size:11px;line-height:1.3;color:var(--muted);font-weight:400}
.example-site .inline-price input{min-width:0;width:100%;height:23px;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;font:500 16px/1.4 var(--font);color:var(--ink);appearance:textfield;-moz-appearance:textfield}
.inline-price input::-webkit-inner-spin-button,.inline-price input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.inline-price:focus-within{outline:2px solid var(--brand-ink);outline-offset:2px}
.inline-price:has([aria-invalid=true]){border-color:#923d23}
@media(max-width:800px){
 .example-site .quick-filter:has(.inline-price){grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.4fr);gap:6px}
 .example-site .quick-filter:has(.inline-price)>.dropdown{width:100%}
 .inline-price{padding-block:3px}
 .inline-price>span{font-size:10px}
}
.example-site .course-card .old-price{font-size:12px;line-height:1.5;letter-spacing:0;font-weight:400;color:var(--muted);margin:0;white-space:nowrap}
.fact-note{display:block;color:var(--muted);font-size:13px;font-weight:400;line-height:1.5;margin-top:6px}
.section-nav a[aria-current=location]{color:var(--ink);background:transparent;box-shadow:inset 0 -2px var(--ink)}
.detail-main>section{scroll-margin-top:28px}
.seo-guide .reading-copy{max-width:880px;line-height:1.75}
.seo-guide .reading-copy a{text-decoration:underline;text-underline-offset:3px;color:var(--brand-ink)}
@media(max-width:800px){
 .example-site .quick-filter{flex-wrap:nowrap;gap:6px;overflow:visible;padding:0}
 .example-site .quick-filter .dropdown{flex:1;min-width:0;width:auto;margin-left:auto}
 .example-site .quick-filter .dropdown-trigger,.example-site .quick-filter>.chip{padding:0 10px;font-size:12px;line-height:1.3}
 .example-site .quick-filter>.chip{flex:none}
 .example-site .quick-filter .dropdown-trigger{gap:6px}
 .example-site .quick-filter .dropdown-copy{min-width:0;flex:1}
 .example-site .quick-filter .dropdown-label{display:block}
 .example-site .quick-filter .dropdown-value{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .example-site .quick-filter .dropdown-trigger .icon{width:16px;height:16px}
 .detail-main>.section-nav{display:none}
 .toc-island--course{padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:0 6px 30px #14141426}
 .toc-island--course .btn{box-shadow:none;border-radius:16px}
 .toc-island--course [data-toc-open]{min-height:44px;height:44px;padding:8px 14px;border-color:var(--line);background:var(--paper)}
 .toc-island--course [data-toc-current]{font-size:14px;opacity:1;font-weight:500}
 .toc-island--course .course-island-cta{min-height:52px;height:52px;margin-top:8px;justify-content:center}
 .example-site:has(.toc-island--course){padding-bottom:calc(148px + env(safe-area-inset-bottom))}
 .example-site:has(.toc-island--course) .toast{bottom:calc(148px + env(safe-area-inset-bottom))}
 .toc-island--course~.toc-dialog{max-height:70dvh}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:390px){.example-site .page-hero h1{font-size:clamp(32px,10vw,39px);overflow-wrap:anywhere}}
.example-site .results-line .results-bar{margin:0}
.example-site .direction-hero .breadcrumb{color:#474944}
@media(max-width:520px){.example-site .direction-hero .page-hero h1{font-size:clamp(26px,8.3vw,36px);overflow-wrap:normal}}

/* Fixed site navigation, shared with the component gallery. */
:root{--site-header-height:0px}
html:has(.site-header--fixed){--site-header-height:82px;scroll-padding-top:var(--site-header-height)}
body:has(>.site-header--fixed){padding-top:var(--site-header-height)}
.site-header--fixed{position:fixed;inset:0 0 auto;z-index:70;background:var(--paper);box-shadow:0 5px 18px #1414140b;border-bottom:0}
.site-header--fixed+.header-nav{position:relative;z-index:1}
.mobile-menu-trigger{display:none}
.example-site .purchase-panel,.example-site .toc{top:calc(var(--site-header-height) + 24px)}
.example-site .purchase-panel{position:static;overflow:hidden}
.example-site .purchase-panel[data-sticky-fit=true]{position:sticky}
.example-site main section,.example-site .prose>section,.example-site .detail-main>section{scroll-margin-top:24px}
.example-site #main{scroll-margin-top:24px}
.price-block--purchase .course-price{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap;font-size:36px;line-height:1.2}
.price-block--purchase .course-price>span{white-space:nowrap}
.price-block--purchase .old-price{font-size:18px;color:var(--muted);font-weight:400;letter-spacing:0;white-space:nowrap}
.price-block--purchase .course-price-label{margin-top:8px;font-size:12px;color:var(--muted)}
.price-block--purchase .course-installment{font-size:14px;line-height:1.55;margin:14px 0 0}
.example-site .purchase-panel .course-art{position:relative;flex:none}
.example-site .purchase-panel .course-art .icon-btn{position:absolute;top:14px;right:14px}
.example-site .course-verification{font-size:12px;line-height:1.65;margin-top:20px}
#course-choice .reading-copy{max-width:880px}
.mobile-menu{--menu-top:max(12px,env(safe-area-inset-top));--menu-right:max(12px,env(safe-area-inset-right));--menu-bottom:max(12px,env(safe-area-inset-bottom));--menu-left:max(12px,env(safe-area-inset-left));padding:0;border:0;margin:var(--menu-top) var(--menu-right) var(--menu-bottom) auto;width:min(460px,calc(100% - var(--menu-left) - var(--menu-right)));max-width:none;height:calc(100dvh - var(--menu-top) - var(--menu-bottom));max-height:calc(100dvh - var(--menu-top) - var(--menu-bottom));border-radius:24px;overflow:hidden;background:var(--paper);color:var(--ink)}
.mobile-menu[open]{display:flex;flex-direction:column}
.mobile-menu::backdrop{background:var(--overlay,#14141466)}
.mobile-menu-top{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);flex:none}
.mobile-menu-top h2{font-size:28px;line-height:1.2}
.mobile-menu-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px;flex:1}
.mobile-menu .search-form{margin-bottom:24px;align-items:center}
.mobile-menu .search-box input{min-height:48px;font-size:16px}
.mobile-menu nav{display:grid}
.mobile-menu nav a,.mobile-favorites{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;font-size:16px;padding:12px 4px;border-bottom:1px solid var(--line)}
.mobile-menu nav a:hover{color:var(--brand-ink)}
.mobile-menu-bottom{flex:none;padding:8px 20px 12px;border-top:1px solid var(--line);background:var(--canvas)}
.mobile-favorites{border:0;justify-content:flex-start}
.mobile-favorites .icon:last-child{margin-left:auto}
body.mobile-navigation-open{overflow:hidden}
@media(max-width:800px){
 html:has(.site-header--fixed){--site-header-height:76px}
 .example-site .site-header--fixed .header-main{min-height:76px;justify-content:space-between}
 .site-header--fixed [data-menu],.site-header--fixed .search-form,.site-header--fixed .header-favorites,.site-header--fixed+.header-nav{display:none}
 .site-header--fixed .mobile-menu-trigger{display:inline-flex}
 .example-site .purchase-panel{max-height:none;overflow:hidden}
 .toc-island [data-toc-open]{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap}
 .toc-island:not(.toc-island--course) [data-toc-current]{text-align:right;line-height:1.4}
 .toc-island:not(.toc-island--course) [data-toc-open]>span:first-child{flex:none;line-height:1.4}
 .toc-island--course [data-toc-current]{text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Shared control geometry: the catalogue reference supplies spacing and search tokens. */
.example-site .dropdown-trigger{padding-inline:var(--control-inline)}
.example-site .quick-filter .dropdown-trigger{padding-inline:var(--control-inline)}
.course-search .search-box{background:var(--paper);height:var(--control-height);box-sizing:border-box}
.course-search .search-box input{height:100%;min-height:0;width:100%}
.course-search .search-submit-icon{width:var(--control-height);height:var(--control-height);min-width:var(--control-height);padding:0;border-radius:12px;flex:none}
.mobile-menu .course-search input{height:100%;min-height:0}
.mobile-menu-trigger{border-radius:var(--radius-control);gap:10px}
@media(max-width:520px){:root{--control-inline:12px}}

.entity-chips+.course-grid{margin-top:24px}

/* Compact school menu icons retain their original artwork and proportions. */
.example-site .school-card-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin-bottom:20px}
.example-site .school-card-top .eyebrow{margin:0;min-width:0}
.example-site .school-card-icon{display:block;flex:none;width:44px;height:44px;object-fit:contain}
.example-site .course-school{--school-label-height:24px;position:relative;display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0}
.example-site .course-school-icon{display:block;flex:none;width:var(--school-label-height);height:var(--school-label-height);object-fit:contain}
.example-site .course-school .school-label{height:var(--school-label-height);line-height:var(--school-label-height);padding:0 9px;max-width:none;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.example-site .detail-hero .entity-chip{min-height:40px}

/* Entity prose and relationship groups share the article spacing scale. */
.example-site .section-heading.section-heading--count{align-items:baseline;justify-content:flex-start;gap:16px;font-size:var(--section-heading-size);line-height:1.12}
.section-heading--count h2{min-width:0}
/* The wrapper shares the heading baseline and x-height. `middle` centres the
   badge on lowercase letters, rather than on the full line box or capitals. */
.section-heading-count{flex:none;white-space:nowrap}
.section-heading-count>.count-tag{vertical-align:middle;font-size:13px;line-height:1.4;white-space:nowrap}
/* A single native link covers each directory card, including its empty space. */
.entry-card--linked{position:relative}
.entry-card--linked .entry-link::after{content:"";position:absolute;inset:0;border-radius:20px}
.entry-card--linked .entry-link:focus-visible{outline:none}
.entry-card--linked:has(.entry-link:focus-visible){outline:3px solid var(--brand-ink);outline-offset:4px}
.entry-card--linked:hover{border-color:var(--brand-ink)}
.example-site .entity-relations,.example-site p+.relation-group{margin-top:var(--space-10)}
.example-site .entity-relations .relation-group h3{font-size:18px;line-height:1.4;margin:0 0 12px}
@media(max-width:800px){.example-site .entity-relations,.example-site p+.relation-group{margin-top:var(--space-8)}}

/* School overview: existing neutral cards, count tags and collection links. */
.school-identity{background:var(--lilac);border-radius:32px;padding:32px;display:grid;gap:28px;min-width:0}
.school-identity>div:first-child{display:flex;align-items:center;gap:16px}
.school-identity-icon{width:64px;height:64px;flex:none;object-fit:contain}
.school-identity-name{font-size:28px;font-weight:600;letter-spacing:-.03em}
.school-identity p{font-size:22px;line-height:1.35;margin:0}
.school-identity .count-tags{margin:0}
.school-direction-links a{gap:14px}
.school-direction-links a>span:first-child{flex:1;min-width:0}
.school-direction-links .count-tag{flex:none}
@media(max-width:520px){.school-identity{padding:24px;gap:20px}.school-direction-links a{font-size:18px;gap:8px}.school-direction-links .count-tag{font-size:12px}}

/* Compact course previews reuse cards and outline actions from the catalog. */
.example-site .course-preview-intro{margin:0 0 24px;max-width:880px}
.example-site .similar-courses .course-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(265px,calc((100% - 40px)/3))),1fr))}
.example-site .course-preview-actions{display:flex;justify-content:center;margin-top:28px}
.example-site .course-preview-actions .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.4}
@media(max-width:520px){.example-site .course-preview-actions .btn{width:100%}}

/* Thematic collections: shared specimen and pages, DS colors/radii/type. */
.collection-nav{margin-top:var(--space-6);flex-wrap:wrap}
.collection-intro{max-width:880px;font-size:18px;line-height:1.65;margin-bottom:var(--space-8)}
.collection-topics,.collection-criteria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.collection-topics article{border-top:1px solid var(--line);padding-top:var(--space-6)}
.collection-topics h3,.collection-criteria h3{font-size:23px;margin-bottom:var(--space-3)}
.collection-topics p,.collection-criteria p{color:var(--muted);line-height:1.6}
.collection-criteria article{padding:var(--space-8);border-radius:var(--radius-card);background:var(--canvas)}
.collection-courses{display:grid;gap:var(--space-6)}
/* Collection surface matches the approved reference home Marketing section. */
.example-site #collection-courses{background:var(--canvas);border-radius:var(--radius-section);padding:36px}
@media(max-width:1100px){.example-site #collection-courses{padding:26px}}
@media(max-width:520px){.example-site #collection-courses{padding:20px 16px;border-radius:24px}}
.course-card.course-card--horizontal{display:grid;grid-template-columns:190px minmax(0,1fr) 270px;gap:var(--space-8);padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:none;align-items:stretch}
.course-card--horizontal .course-art{min-height:220px;height:auto;border-radius:var(--radius-control);align-self:stretch}
.course-row-content{min-width:0;padding:var(--space-2) 0}
.course-row-skill{display:block;font-size:13px;color:var(--brand-ink);font-weight:600;margin-bottom:var(--space-3);overflow-wrap:anywhere}
.course-row-content h3{font-size:27px;line-height:1.22;letter-spacing:-.035em;margin:0 0 var(--space-4);overflow-wrap:anywhere}
.course-row-content h3 a:hover{color:var(--brand-ink)}
.course-row-content .meta{margin-bottom:var(--space-4);font-size:14px}
.course-row-content .course-description{font-size:15px;line-height:1.6;color:var(--muted);margin:0}
.course-row-offer{border-left:1px solid var(--line);padding-left:var(--space-8);display:flex;flex-direction:column;gap:var(--space-6);justify-content:space-between;min-width:0}
.course-row-offer .course-price{flex-wrap:wrap;gap:6px 12px;font-size:27px;line-height:1.2;margin:0 0 8px}
.course-row-offer .old-price{font-size:14px}
.course-row-offer .course-actions{margin:0;display:grid;gap:var(--space-3)}
.course-row-offer .btn{padding:12px 14px;font-size:14px;min-height:48px}
.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.collection-tile{min-width:0;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:var(--paper);transition:box-shadow .15s,border-color .15s}
.collection-tile:hover{border-color:var(--control-line);box-shadow:var(--shadow-hover)}
.collection-tile-link{display:flex;flex-direction:column;height:100%}
.collection-tile:has(.collection-tile-link:focus-visible){outline:2px solid var(--brand-ink);outline-offset:4px}
.collection-tile-link:focus-visible{outline:none}
.collection-cover{height:180px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sky)}
.collection-cover.peach{background:var(--peach)}.collection-cover.lilac{background:var(--lilac)}.collection-cover.lemon{background:var(--lemon)}
.collection-cover-sheet{position:absolute;inset:22px 19% -22px;border:1px solid var(--ink);border-radius:var(--radius-control);transform:rotate(-9deg);background:#FFFFFF70}
.collection-cover-symbol{position:relative;font-size:48px;font-weight:550;letter-spacing:-.06em;line-height:1;transform:rotate(-9deg)}
.collection-cover-arrow{position:absolute;right:22px;top:14px;font-size:30px}
.collection-tile-copy{padding:var(--space-6);display:flex;flex-direction:column;flex:1;gap:var(--space-4)}
.collection-label{font-size:13px;color:var(--muted)}
.collection-tile h3{font-size:25px;line-height:1.22;margin:0}
.collection-tile a:hover h3{color:var(--brand-ink)}
.collection-tile p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}
.collection-tile-bottom{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;margin-top:auto;padding-top:var(--space-4);font-size:12px}
.collection-tile-bottom .icon{width:16px;height:16px}
@media(max-width:1100px){.course-card.course-card--horizontal{grid-template-columns:150px minmax(0,1fr) 230px;gap:var(--space-6)}.course-row-offer{padding-left:var(--space-6)}.collection-grid{gap:var(--space-6)}.collection-tile-bottom{align-items:flex-start;flex-direction:column}}
@media(max-width:800px){.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-topics,.collection-criteria{grid-template-columns:1fr;gap:var(--space-6)}.collection-criteria article{padding:var(--space-6)}.course-card.course-card--horizontal{grid-template-columns:130px minmax(0,1fr);gap:var(--space-5);padding:var(--space-5)}.course-card--horizontal .course-art{min-height:180px}.course-row-offer{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:var(--space-5) 0 0;display:grid;grid-template-columns:1fr 1fr;align-items:end}.course-row-content h3{font-size:24px}.collection-intro{font-size:16px}}
@media(max-width:520px){.collection-grid{grid-template-columns:1fr}.collection-cover{height:170px}.collection-tile-bottom{flex-direction:row;align-items:center}.course-card.course-card--horizontal{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-4)}.course-card--horizontal .course-art{min-height:150px;width:100%}.course-row-content{padding:0}.course-row-content h3{font-size:24px}.course-row-offer{display:flex;align-items:stretch;gap:var(--space-5)}.course-row-offer .course-price{font-size:28px}.course-row-offer .btn{min-height:52px}.collection-nav{gap:8px 16px}.collection-nav a{font-size:13px}}

/* Scope the horizontal variant above the common card rules. */
/* Reserve independent rows for the action, artwork and school label. Rotated
   symbols stay in the central row instead of sharing the heart's corner. */
.example-site .course-card--horizontal .course-art{height:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px minmax(88px,1fr) auto;gap:var(--space-2);padding:var(--space-3)}
.example-site .course-card--horizontal .course-art .icon-btn{position:relative;top:auto;right:auto;grid-area:1/1;justify-self:end;align-self:start}
.example-site .course-card--horizontal .art-symbol{position:relative;top:auto;right:auto;grid-area:2/1;place-self:center;font-size:56px;letter-spacing:-.06em;transform:translateY(calc(-1 * var(--space-5))) rotate(-12deg)}
.example-site .course-card--horizontal .course-school{grid-area:3/1;justify-self:start}
.example-site .course-card--horizontal h3{font-size:27px;line-height:1.22}
.example-site .course-card--horizontal .course-price-box{border:0;padding:0;margin:0}
.example-site .course-card--horizontal .course-actions{margin:0;gap:12px}
.example-site .course-card--horizontal .btn{min-height:52px;font-size:14px}
.example-site .course-card--horizontal .old-price{font-size:14px}
@media(min-width:521px) and (max-width:800px){.example-site .course-card--horizontal .art-symbol{font-size:44px}}
@media(max-width:800px){.example-site .course-card--horizontal h3{font-size:24px}}
@media(max-width:800px){.example-site .course-card--horizontal .course-school-icon{display:none}}
@media(max-width:520px){.example-site .course-card--horizontal .course-art{height:200px;min-height:200px}.example-site .course-card--horizontal .course-price-box{padding:0}.example-site .course-card--horizontal .course-installment{min-height:0}}

/* Keep keyboard focus above the fixed mobile table of contents. */
@media(max-width:800px){html:has(.toc-island){scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom))}}