/* pages-b: courses, categories, competitive math and feature pages. Loads after /_home/rework.css and only adds
   what the home page does not already have. Same rules: Inter 400-500, near-black, greys, hairlines,
   green only for "included" checks. */

.pb-label{font:500 14px/1.4 var(--font);color:var(--muted)}
.pb-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.pb-ctas .btn{height:52px;padding:0 26px;font-size:16.5px}

/* ---------- centred hero (courses, categories) ---------- */
.pb-hero{padding:96px 0 40px;text-align:center}
.pb-hero h1{max-width:900px;margin:18px auto 0;font:400 clamp(40px,5.2vw,68px)/1.06 var(--font-h);letter-spacing:-.04em;color:var(--ink)}
.pb-lead{max-width:640px;margin:22px auto 0;font:400 18px/1.65 var(--font);color:var(--text)}
.pb-hero .pb-ctas{justify-content:center}

/* "Included" strip: the home stats card, with green checks for what is included */
.pb-incl{display:grid;grid-template-columns:220px 1fr;margin:72px auto 0;max-width:1000px;border:1px solid var(--line);border-radius:var(--radius-l);text-align:left;overflow:hidden}
.pb-incl-lead{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:24px 26px;border-right:1px solid var(--line)}
.pb-incl-lead b{font:500 17px/1.25 var(--font);color:var(--ink)}
.pb-incl-lead span{font:400 14px/1 var(--font);color:var(--muted)}
.pb-incl ul{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none}
.pb-incl li{display:flex;align-items:center;gap:12px;padding:24px 24px;font:500 15px/1.4 var(--font);color:var(--ink)}
.pb-incl li+li{border-left:1px solid var(--line)}
.pb-incl li svg,.pb-incl-list li svg{flex:none;width:18px;height:18px;color:var(--green)}

/* ---------- split hero (feature pages): the home feature sections ---------- */
.pb-fhero{padding:88px 0 40px;overflow-x:clip}
.pb-fhero .feat{grid-template-columns:510px 1fr;gap:48px}
.pb-fhero .pb-ctas .btn{padding:0 22px;font-size:16px}
.pb-fhero h1{margin-top:16px;font:400 clamp(44px,5vw,68px)/1.04 var(--font-h);letter-spacing:-.04em;color:var(--ink)}
.pb-fhero .lead{font-size:17.5px;max-width:460px}
.pb-incl-list{max-width:460px}
.pb-incl-list{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.pb-incl-list>span{font:400 14px/1 var(--font);color:var(--muted)}
.pb-incl-list ul{display:grid;gap:12px;margin:16px 0 0;padding:0;list-style:none}
.pb-incl-list li{display:flex;align-items:center;gap:12px;font:500 15px/1.35 var(--font);color:var(--ink)}
.pb-fhero .pb-ctas{margin-top:32px}
.pb-mock .stage{padding:48px;background:var(--soft)}
.pb-mock .app-body{padding:26px}
.pb-mock .app-bar{padding:16px 22px}
.pb-mock .stage.plain .card{background:var(--sheet)}
.pb-mock .stage.navy .tabs-mock{margin-bottom:16px}

/* ---------- three columns under a hairline ---------- */
.pb-why{padding-top:96px;padding-bottom:40px}
.pb-flow{padding-top:96px}
.pb-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:56px 0 0;padding:0;list-style:none}
.pb-cols li{padding-top:24px;border-top:1px solid var(--line-2)}
.pb-cols h3{font:500 21px/1.25 var(--font);letter-spacing:-.02em;color:var(--ink)}
.pb-cols p{margin-top:10px;font:400 15.5px/1.6 var(--font);color:var(--text);max-width:340px}
.pb-steps .step-n{margin-bottom:14px}

/* closing band: the home final section, smaller */
.pb-band{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:end;margin-top:96px;padding-top:48px;border-top:1px solid var(--line)}
.pb-band h3,.pb-band .pb-band-h{font:400 clamp(30px,3.4vw,44px)/1.1 var(--font-h);letter-spacing:-.032em;color:var(--ink);max-width:620px}
.pb-band p{font:400 17px/1.6 var(--font);color:var(--muted);max-width:440px}
.pb-band .pb-ctas{margin-top:24px}
.pb-band-top{margin:0 0 112px}

/* ---------- course library ---------- */
.pb-lib{background:var(--soft)}
.pb-lib .cstats span{text-transform:none}
.cc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:32px 0 0;padding:0;list-style:none}
.cc>a{display:flex;flex-direction:column;height:100%;background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;transition:border-color var(--dur-1) var(--ease),transform var(--dur-2) var(--ease),translate var(--dur-2) var(--ease),scale var(--dur-2) var(--ease),rotate var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.cc>a:hover{border-color:var(--line-2)}
.cc-img{display:block;aspect-ratio:16/7;background:var(--soft-2);border-bottom:1px solid var(--line);overflow:hidden}
.cc-img img{width:100%;height:100%;object-fit:cover}
.cc-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.cc-meta{display:flex;justify-content:space-between;gap:12px;font:400 13px/1.3 var(--font);color:var(--muted)}
.cc-status{flex:none}
.cc h3{margin-top:10px;font:500 16.5px/1.3 var(--font);letter-spacing:-.012em;color:var(--ink)}
.cc-desc{margin-top:8px;font:400 14px/1.55 var(--font);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-foot{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:16px;font:400 13.5px/1.3 var(--font);color:var(--muted)}
.cc-go{display:inline-flex;align-items:center;gap:6px;padding-top:12px;border-top:1px solid var(--line);font:500 14.5px/1.2 var(--font);color:var(--ink)}
.cc-go svg{width:15px;height:15px;transition:transform var(--dur-1) var(--ease),translate var(--dur-1) var(--ease),scale var(--dur-1) var(--ease),rotate var(--dur-1) var(--ease)}
.cc>a:hover .cc-go svg{translate:3px 0}

/* /courses: categories, filters, groups */
.pb-cats{padding-top:72px;padding-bottom:96px}
.pb-catl{display:grid;grid-template-columns:repeat(5,1fr);margin:48px 0 0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden}
.pb-catl li+li{border-left:1px solid var(--line)}
.pb-catl a{display:flex;flex-direction:column;justify-content:space-between;gap:28px;height:100%;padding:24px 22px;transition:background-color var(--dur-1) var(--ease)}
.pb-catl a:hover{background:var(--soft)}
.pb-catl b{font:500 17px/1.3 var(--font);color:var(--ink)}
.pb-catl .link-arrow{font:500 14.5px/1.2 var(--font);color:var(--muted)}
.pb-catl a:hover .link-arrow{color:var(--ink)}
.pb-filters{display:grid;grid-template-columns:minmax(240px,1.7fr) repeat(5,minmax(0,1fr));gap:10px;margin-top:40px}
.pb-filters label{position:relative;display:block;min-width:0}
.pb-filters input,.pb-filters select{width:100%;height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--radius-m);background:var(--sheet);font:400 14.5px/1 var(--font);color:var(--ink);outline:0;-webkit-appearance:none;appearance:none}
.pb-filters select{padding-right:16px;cursor:pointer;background:var(--sheet);-webkit-appearance:auto;appearance:auto}
.pb-filters input{padding-left:42px}
.pb-filters input::placeholder{color:var(--muted)}
.pb-filters input:focus,.pb-filters select:focus{border-color:var(--green);outline:2px solid var(--green);outline-offset:2px}
.pb-search svg{position:absolute;left:15px;top:13px;width:18px;height:18px;color:var(--muted)}
.cg{margin-top:56px}
.cg>h3{font:500 22px/1.2 var(--font);letter-spacing:-.02em;color:var(--ink)}
.cg>h3 span{margin-left:6px;font:400 15px/1 var(--font);letter-spacing:0;color:var(--muted)}
.cg>h3 span::before{content:"· "}
.cg .cc-grid{margin-top:20px}
.pb-empty{margin-top:40px}

/* ---------- keep exploring ---------- */
.pb-more{padding-top:104px}
.pb-more>.wrap>.h2{margin-top:14px}
.pb-links{display:grid;grid-template-columns:1fr 1fr;margin:40px 0 0;padding:0;list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pb-links li+li{border-left:1px solid var(--line)}
.pb-links a{display:flex;justify-content:space-between;align-items:center;gap:24px;height:100%;padding:28px 32px 28px 0}
.pb-links li+li a{padding-left:32px}
.pb-links b{display:block;font:500 21px/1.25 var(--font);letter-spacing:-.02em;color:var(--ink)}
.pb-links a>span>span{display:block;margin-top:6px;font:400 15.5px/1.5 var(--font);color:var(--muted)}
.pb-links svg{flex:none;width:20px;height:20px;color:var(--muted);transition:transform var(--dur-1) var(--ease),translate var(--dur-1) var(--ease),scale var(--dur-1) var(--ease),rotate var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.pb-links a:hover svg{translate:3px 0;color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .cc-grid{grid-template-columns:repeat(3,1fr)}
  .pb-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pb-search{grid-column:1/-1}
  .pb-catl{grid-template-columns:repeat(3,1fr)}
  .pb-catl li:nth-child(4){border-left:0}
  .pb-catl li:nth-child(n+4){border-top:1px solid var(--line)}
  .pb-fhero .feat{grid-template-columns:1fr;gap:48px}
  .pb-fhero .feat-copy{max-width:640px}
}
@media (max-width:900px){
  .cc-grid{grid-template-columns:repeat(2,1fr)}
  .pb-incl{grid-template-columns:1fr}
  .pb-incl-lead{border-right:0;border-bottom:1px solid var(--line)}
  .pb-cols{grid-template-columns:1fr;gap:28px;max-width:560px;margin-left:auto;margin-right:auto}
  .pb-band{grid-template-columns:1fr;gap:24px}
}
@media (max-width:720px){
  .pb-hero{padding:56px 0 24px}
  .pb-hero h1{font-size:clamp(34px,9.6vw,44px);line-height:1.1}
  .pb-fhero{padding:48px 0 24px}
  .pb-fhero h1{font-size:clamp(38px,11vw,52px)}
  .pb-ctas .btn{flex:1 1 100%;font-size:15.5px}
  .pb-incl{margin-top:48px}
  .pb-incl ul{grid-template-columns:1fr}
  .pb-incl li{padding:16px 22px}
  .pb-incl li+li{border-left:0;border-top:1px solid var(--line)}
  .pb-incl-lead{padding:18px 22px}
  .pb-mock .stage{padding:16px;border-radius:var(--radius-l)}
  .pb-mock .app-body{padding:18px}
  .pb-why,.pb-flow,.pb-more{padding-top:72px}
  .pb-band{margin-top:64px;padding-top:36px}
  .pb-band-top{margin-bottom:72px}
  .cc-grid{grid-template-columns:1fr}
  .pb-filters{grid-template-columns:1fr 1fr}
  .pb-catl{grid-template-columns:1fr}
  .pb-catl li+li{border-left:0;border-top:1px solid var(--line)}
  .pb-catl a{flex-direction:row;align-items:center;gap:16px;padding:18px 20px}
  .pb-links{grid-template-columns:1fr}
  .pb-links li+li{border-left:0;border-top:1px solid var(--line)}
  .pb-links li+li a{padding-left:0}
  .pb-links a{padding:22px 4px 22px 0}
  .cg{margin-top:44px}
}
.pb [hidden]{display:none!important}
.cc-grid>li{min-width:0}.cc-img img{max-width:none}
.pb-more-f{padding-top:8px}@media (max-width:720px){.pb-more-f{padding-top:0}}
.pb-catl .link-arrow{white-space:nowrap}

/* mock-up tabs and the question-type control stay on one line and scroll, like the app */
.pb-mock .tabs-mock{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.pb-mock .tabs-mock::-webkit-scrollbar{display:none}
.pb-mock .tabs-mock span{flex:none}
.pb-mock .seg{flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}
.pb-mock .seg span{flex:none;white-space:nowrap}
@media (max-width:720px){.pb-mock .seg span{padding:8px 6px;font-size:12px}}

/* workspace mock-up: folders on the left, the open folder on the right */
.ws-body{display:grid;grid-template-columns:196px 1fr}
.ws-folders{list-style:none;margin:0;padding:14px 10px;border-right:1px solid var(--line);display:grid;gap:2px;align-content:start}
.ws-folders li{display:flex;align-items:center;gap:10px;padding:9px 10px;white-space:nowrap;border-radius:var(--radius-s);font:500 13.5px/1.25 var(--font);color:var(--muted)}
.ws-folders li.on{background:var(--soft-2);color:var(--ink)}
.ws-folders svg,.ws-files svg{flex:none;width:18px;height:18px;color:var(--muted)}
.ws-files{padding:20px 22px}
.ws-path{margin:0 0 10px;font:400 13px/1.3 var(--font);color:var(--muted)}
.ws-files ul{list-style:none;margin:0;padding:0}
.ws-files li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.ws-files li span{display:grid;gap:3px;min-width:0}
.ws-files b{font:500 14.5px/1.3 var(--font);color:var(--ink)}
.ws-files small{font:400 12.5px/1.2 var(--font);color:var(--muted)}
.ws-files .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
@media (max-width:720px){
  .ws-body{grid-template-columns:1fr}
  .ws-folders{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px}
  .ws-folders li{flex:none}
  .ws-files{padding:16px 18px}
}
/* green hint (owner 2026-10-21): the home page's hand-drawn swash under one headline word, plus green arrows on the small "learn more" links */
.gsw{position:relative;padding-bottom:.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.gsw::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.2em;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C42 5.5 98 3.2 197 5.6' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C42 5.5 98 3.2 197 5.6' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.pb-links svg,.pb-catl .link-arrow svg{color:var(--green)}

/* final check: the scrolling mock-up tab row fades out at its right edge instead of cutting a label mid-word */
.pb-mock .tabs-mock{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
/* final check: on mobile a long category name squeezed the arrow to 0 px; keep the link and its arrow at full size */
.pb-catl .link-arrow,.pb-catl .link-arrow svg{flex:none}

/* closing section (home final3): wider button column so the two longer CTA labels sit side by side as on home */
@media (min-width:1025px){.final3{grid-template-columns:1fr 1fr}}

/* ---------- wave mktB (2026-10-22): check against the home page ---------- */
/* "Included" strip spans the full content width, like the home stats card, so no label breaks onto two lines */
.pb-incl{max-width:none}
/* search clear button: a quiet grey x instead of the browser's blue one */
.pb-filters input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:16px;height:16px;cursor:pointer;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
/* filters: the selects are wide enough for their longest option ("Standardized Tests", "Competitive Math"), search takes the rest */
@media (min-width:1101px){.pb-filters{grid-template-columns:minmax(220px,1fr) repeat(5,auto)}.pb-filters select{padding-left:15px;padding-right:32px;background-position:right 11px center}}
/* filters on mobile: the fifth select fills its row instead of leaving a gap */
@media (max-width:720px){.pb-filters label:last-child{grid-column:1/-1}}
/* a library of two courses: two wide cards with the photo on the left, instead of half an empty four-column row */
@media (min-width:901px){
  .pb-lib>.wrap>.cc-grid-pair{grid-template-columns:1fr 1fr;gap:20px}
  .pb-lib>.wrap>.cc-grid-pair .cc>a{flex-direction:row}
  .pb-lib>.wrap>.cc-grid-pair .cc-img{flex:none;width:42%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
  .pb-lib>.wrap>.cc-grid-pair .cc-body{padding:22px 24px 22px}
  .pb-lib>.wrap>.cc-grid-pair .cc h3{font-size:19px}
  .pb-lib>.wrap>.cc-grid-pair .cc-desc{-webkit-line-clamp:3}
}
/* closing buttons on mobile: when the two labels cannot share a row, both fill the width like the hero buttons */
@media (max-width:720px){.final3-ctas .btn{flex:1 1 auto;justify-content:center}}
/* /courses category links on tablets: five links in a three-column grid left a broken border and an empty cell; use the mobile list */
@media (min-width:721px) and (max-width:1100px){
  .pb-catl{grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto}
  .pb-catl li+li,.pb-catl li:nth-child(4){border-left:0}
  .pb-catl li+li{border-top:1px solid var(--line)}
  .pb-catl a{flex-direction:row;align-items:center;gap:16px;padding:20px 24px}
}
/* filters on tablets: three per row, the last select spans the two free cells */
@media (min-width:721px) and (max-width:1100px){.pb-filters label:last-child{grid-column:span 2}}
/* stats row: no boxes, centred numbers between hairlines (owner 2026-10-22) */
.cstats{gap:0!important;align-items:stretch}
.cstats div{background:none!important;box-shadow:none!important;border-radius:var(--radius-0)!important;padding:2px 28px!important;min-width:0!important;text-align:center;border-left:1px solid var(--line)}
.cstats div:first-child{border-left:0}
.cstats b{font:400 34px/1 var(--font)!important;letter-spacing:-.02em;color:var(--ink)}
.cstats span{margin-top:8px!important;font:400 13px/1 var(--font)!important;letter-spacing:0!important;color:var(--muted)!important}
@media (max-width:720px){.cstats div{flex:1;padding:2px 8px!important}.cstats b{font-size:28px!important}}

/* Polish wave: shared corner, paper, shadow and motion tokens. */
.pb-incl{background:var(--sheet);box-shadow:var(--shadow-rest)}
.pb-catl,.pb-band,.pb-links,.pb-cols li{border-radius:var(--radius-0);box-shadow:none}
.pb-catl{border-left:0;border-right:0}
.pb-band,.pb-links,.pb-cols li,.pb-incl-list{border-color:var(--rule-dash);border-top-style:dashed}
.pb-links{border-bottom-style:dashed}
.pb-lib{background:transparent}
.cc>a{box-shadow:var(--shadow-rest)}
.cc>a:hover{translate:0 var(--lift);box-shadow:var(--shadow-raised)}
.cc>a:active{transform:none;translate:none;scale:none;rotate:none}
.cc>a:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-color:var(--green)}
.cc-img{border-radius:var(--radius-0)}
.pb-filters input,.pb-filters select{transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
/* These previews inherit their layout from the home page. Keep their inner surfaces and text on theme tokens too. */
.pb-mock .stage{border-radius:var(--radius-l)}
.pb-mock .app{background:var(--sheet);border-color:var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-raised)}
.pb-mock .app:hover{box-shadow:var(--shadow-float)}
.pb-mock .opt,.pb-mock .note,.pb-mock .mini,.pb-mock .composer .in{border-radius:var(--radius-m)}
.pb-mock .composer .in{background:var(--soft-2)}
.pb-mock .seg span.on,.pb-mock .suggest span{background:var(--sheet)}
.pb-mock .seg{border-radius:var(--radius-m)}
.pb-mock .seg span,.pb-mock .qnav i,.pb-mock .opt .k,.pb-mock .note .x{border-radius:var(--radius-s)}
.pb-mock .composer .send,.pb-mock .nova-av,.pb-mock .suggest span,.pb-mock .fake{border-radius:var(--radius-pill)}
.pb-mock .dots3 i{background:var(--line-2);border-radius:var(--radius-pill)}
.pb-mock .tabs-mock span,.pb-mock .tabs-mock span.on{background:transparent;border-radius:var(--radius-0);color:var(--text)}
.pb-mock .tabs-mock span.on{color:var(--ink)}
.pb-mock .note{color:var(--text);background:var(--sky-50)}
.pb-mock .note svg,.pb-mock .note .x{color:var(--text)}
.pb-mock .nova-av{background:var(--soft-2);color:var(--text)}
.pb-mock .src-tag,.pb-mock .gen{color:var(--muted)}
.pb-mock .bubble{background:var(--soft-2);border-radius:var(--radius-l) var(--radius-l) var(--radius-l) var(--radius-s)}
.pb-mock .bubble.me{border-radius:var(--radius-l) var(--radius-l) var(--radius-s) var(--radius-l);background:var(--green);color:var(--btn-text)}
/* swarm R24 home-marketing: the mock-up Check Answer / Submit pill stays green as on the home page mock-ups (rework.css .fake.p), it was an ink pill here only */
.pb-mock .fake.g{background:var(--sheet);color:var(--ink)}
.pb-mock .exam-bar{background:var(--soft-2);color:var(--text)}
.pb-mock .exam-bar b{color:var(--ink)}
.pb-mock .timer{background:var(--sheet);color:var(--text);border-radius:var(--radius-s)}
.pb-mock .qnav i.c{background:var(--btn);color:var(--btn-text)}
.pb-mock .opt{background:var(--sheet)}
.pb-mock .opt.sel{background:var(--sky-50)}
.pb-mock .opt.sel .k{background:var(--sky-50);color:var(--ink);box-shadow:inset 0 0 0 1px var(--sky)}
.pb-mock .opt.right{background:var(--green-50);box-shadow:inset 0 0 0 1px var(--green)}
.pb-mock .opt.right .k{background:var(--green);color:var(--btn-text)}
@media (prefers-reduced-motion:reduce){
  .cc>a,.cc-go svg,.pb-links svg,.pb-catl a,.pb-filters input,.pb-filters select{transition:none}
  .cc>a:hover,.cc>a:active,.cc>a:hover .cc-go svg,.pb-links a:hover svg{transform:none;translate:none;scale:none;rotate:none}
}

/* The shared dark surface selector has table-level specificity. Keep underline tabs clear and answer states visible. */
html.dark .pb .pb-mock .tabs-mock span{background:transparent}
html.dark .pb .pb-mock .opt.sel{background:var(--sky-50)}
html.dark .pb .pb-mock .opt.right{background:var(--green-50)}

/* Small labels on inset surfaces need the text token for readable contrast in both themes. */
.pb-mock .seg span:not(.on),.pb-mock .opt .k,.pb-mock .amc-opts span small,.pb-mock .composer .in,.pb-mock .qnav i:not(.c):not(.d){color:var(--text)}

/* final pass 2026-10-22: in dark mode the selected answer letter took the shared dark "filled chip" ink (#0c1a12) on
   the dark sky tint and vanished; keep it readable on the tinted chip */
html.dark .pb .pb-mock .opt.sel .k{color:var(--ink)}

/* repropagation 2026-10-22 evening (notes/prop-marketing.md): today's home page system.
   Feature hero: the mock-up sits as a white pop-out sheet on a bleed panel (.sx-panel-bleed) with a Fig. caption. */
.pb-fhero .feat{align-items:center}
.pb-panel{min-width:0}
.pb-panel .pb-mock .stage{padding:0;background:none;border-radius:0;box-shadow:none}
.pb-panel .pb-mock .app,.pb-panel .pb-mock .stage.plain .card{background:var(--sheet);border:1px solid var(--sheet-edge);border-radius:var(--radius-l);
  box-shadow:var(--shadow-raised);transition:translate var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.pb-panel .pb-mock .app:hover,.pb-panel .pb-mock .stage.plain .card:hover{translate:0 var(--lift);box-shadow:var(--shadow-float)}
.pb-panel .pb-mock .stage.navy .tabs-mock{margin-bottom:16px}
.pb-panel .sx-fig-cap{margin-top:18px}
@media (max-width:720px){.pb-panel .pb-mock .stage{padding:0}}
@media (prefers-reduced-motion:reduce){.pb-panel .pb-mock .app,.pb-panel .pb-mock .stage.plain .card{transition:none}
  .pb-panel .pb-mock .app:hover,.pb-panel .pb-mock .stage.plain .card:hover{translate:none}}
/* Stats: unboxed centred numbers between hairlines (.sx-stats), not boxed tiles. */
.cstats.sx-stats{gap:0;flex-wrap:nowrap}
.cstats.sx-stats>div{min-width:0;flex:0 1 auto;padding:2px var(--stat-pad);background:none;box-shadow:none;border-radius:0}
.cstats.sx-stats b{font:400 var(--stat-num)/1 var(--font);letter-spacing:-.02em;color:var(--ink)}
.cstats.sx-stats span{margin-top:8px;font:400 13px/1.3 var(--font);letter-spacing:0;color:var(--muted)}
/* Phones: full-width row of equal centred cells, like the home page and /courses/ (swarm R9, not left-aligned) */
@media (max-width:720px){.cstats.sx-stats{width:100%}.cstats.sx-stats>div{flex:1 1 0;padding:2px var(--stat-pad)}}
/* Phones: course cards as compact rows (thumbnail left), so an 80-course list is not 37,000px of scrolling (swarm R4) */
@media (max-width:560px){
  .cc-grid{gap:12px}
  .cc>a{flex-direction:row}
  .cc-img{flex:none;width:96px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
  .cc-body{padding:12px 14px 12px}
  .cc-meta{font-size:12.5px}
  .cc h3{margin-top:6px;font-size:15.5px}
  .cc-desc{margin-top:4px;font-size:13.5px;line-height:1.45}
  .cc-foot{gap:6px;padding-top:10px;font-size:13px;white-space:nowrap}
  .cc-go{padding-top:0;border-top:0;font-size:14px}
}

/* swarm R5 home-marketing: purple cover photos are tamed like the course pages (.cp-tame), tagged at edit time by t/r5hm_tame.py */
/* swarm R9 home-marketing: saturate(.15) still left a violet or mauve cast (AMC 12, F=ma, Math Prize, USAMO), so tamed covers go fully neutral */
/* swarm R16 home-marketing: owner decision 2026-10-21 (DESIGN-PRINCIPLES.md): cover photos stay full colour, so the R9 grey filter is gone.
   The .cv-tame tags stay in the markup but no longer do anything. */

/* swarm R14 home-marketing: in the one-column list (901px down) the hairlines run 560px but the text stopped at 340px,
   leaving the right 40% of every item empty at 768. Let the text use the column. */
@media (max-width:900px){.pb-cols p{max-width:none}}

/* swarm R28 home-marketing (compmath): "Competitive · Computer Science" wrapped to two lines and pushed the ACSL
   title 17px below the other titles in its row. The category label stays on one line and ends in an ellipsis
   (full text stays in the DOM and in a title tooltip). */
.cc-meta>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-body{min-width:0}

/* swarm R29 home-marketing (compmath): the "Included" strip broke "Competitive Math Preparation" and
   "Proof and short-answer workflows" onto two lines at 1440 although the row has room for both. From 1200px the
   cells take their text width (the spare width is shared out), so every label sits on one line. */
@media (min-width:901px){
  .pb-incl{grid-template-columns:auto 1fr}
  .pb-incl ul{grid-template-columns:repeat(3,auto)}
}
/* "short-answer", "past-exam" and "Quasar-style" never split at the hyphen (seen at 768 and 375). On tablets the three cells are
   234px, so a little less side padding keeps "Proof and short-answer / workflows" to two lines. */
.pb .nw{white-space:nowrap}
@media (min-width:721px) and (max-width:1199px){.pb-incl li{gap:10px;padding-left:16px;padding-right:16px}}
/* no one-word last lines ("training", "structure", "repeat.") in the hero label, headings and leads */
.pb-hero .pb-label,.pb .sec-head .h2{text-wrap:balance}
.pb-lead,.pb .sec-head .lead,.pb-cols p{text-wrap:pretty}
/* swarm R34 home-marketing: sticky search & filter bar, mobile bottom sheet, active removable pills (OWNER-ISSUES 21:15) */
.cm-sentinel{height:1px;margin-top:-1px;pointer-events:none;visibility:hidden}
.cm-filter-wrap{position:sticky;top:var(--cm-top,68px);z-index:20;margin-top:24px;padding:8px 0 12px}
.cm-filter-wrap::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--paper);opacity:0;box-shadow:0 1px 0 var(--line),0 12px 24px -18px rgba(18,22,20,.28);transition:opacity var(--dur-1) var(--ease);pointer-events:none}
.cm-filter-wrap.is-stuck::before{opacity:1}
html.dark .cm-filter-wrap::before{box-shadow:0 1px 0 var(--line),0 12px 24px -18px rgba(0,0,0,.7)}
.cm-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cm-search{position:relative;flex:1 1 300px;max-width:440px;min-width:0;display:block}
.cm-search>svg{position:absolute;left:15px;top:13px;width:18px;height:18px;color:var(--muted);pointer-events:none}
.cm-search input{width:100%;height:44px;padding:0 44px 0 42px;border:1px solid var(--line-2);border-radius:var(--radius-m);background:var(--sheet);font:400 15px/1 var(--font);color:var(--ink);outline:0;-webkit-appearance:none;appearance:none;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.cm-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.cm-search input::placeholder{color:var(--muted)}
.cm-search input:hover{border-color:var(--muted)}
.cm-search input:focus-visible,.cm-search input:focus{border-color:var(--green);outline:2px solid var(--green);outline-offset:2px}
.cm-x{position:absolute;right:2px;top:2px;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--muted);cursor:pointer;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.cm-x::after{content:"";position:absolute;inset:-2px;pointer-events:auto}
.cm-x svg{width:16px;height:16px}
.cm-x:hover{background:var(--soft-2);color:var(--ink)}
.cm-x:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.cm-kbd{position:absolute;right:12px;top:11px;min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px;border:1px solid var(--line-2);border-radius:6px;background:var(--paper);font:500 12px/1 var(--font);color:var(--muted);pointer-events:none}
.cm-search input:focus ~ .cm-kbd,.cm-search input:not(:placeholder-shown) ~ .cm-kbd{display:none}
@media (pointer:coarse){.cm-kbd{display:none}}
/* swarm R51 home-marketing: at 360 and below the placeholder ran 2px past the field and was cut mid-letter */
.cm-search input{text-overflow:ellipsis}
.cm-fbtn{display:none}
.cm-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.cm-chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:var(--sheet);font:500 14px/1 var(--font);color:var(--text);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),translate var(--dur-1) var(--ease)}
.cm-chip:hover{border-color:var(--ink);color:var(--ink);translate:0 -1px}
.cm-chip:active{scale:.98}
.cm-chip:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.cm-chip .cm-c{min-width:30px;height:22px;display:inline-grid;place-items:center;padding:0 7px;border-radius:var(--radius-pill);background:var(--soft-2);font:500 12px/1 var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.cm-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.cm-chip[aria-pressed="true"] .cm-c{background:color-mix(in srgb,var(--sheet) 18%,transparent);color:var(--sheet)}
.cm-sep{width:1px;height:24px;background:var(--line-2);margin:0 4px}
.cm-sheet{display:none}
.cm-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:44px;margin-top:14px}
.cm-status{margin:0;font:400 14px/1.4 var(--font);color:var(--muted)}
.cm-pills{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.cm-pills li{display:inline-flex}
.cm-pills button{position:relative;display:inline-flex;align-items:center;gap:6px;height:44px;min-height:44px;padding:0 14px 0 16px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:var(--sheet);font:500 13.5px/1 var(--font);color:var(--ink);cursor:pointer;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.cm-pills button::after{content:"";position:absolute;inset:-2px 0;pointer-events:auto}
.cm-pills button:hover{background:var(--soft);border-color:var(--ink)}
.cm-pills svg{width:13px;height:13px;color:var(--muted)}
.cm-pills button:hover svg{color:var(--ink)}
.cm-pills button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.cm-clear{position:relative;height:44px;min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border:0;border-radius:var(--radius-pill);background:transparent;font:500 14px/1 var(--font);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:background-color var(--dur-1) var(--ease)}
.cm-clear::after{content:"";position:absolute;inset:-2px 0;pointer-events:auto}
.cm-clear:hover{background:var(--soft-2)}
.cm-clear:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media (max-width:1024px){
  .cm-pills button{height:44px;min-height:44px;padding:0 14px 0 16px;font-size:13.5px}
  .cm-clear{height:44px;min-height:44px;padding:0 14px}
}
.pb-lib .cm-filter-wrap+.cc-grid{margin-top:16px}
/* swarm R31 home-marketing (compmath): sort pill dropdown (search standard: "a sort control where lists are sortable"),
   a native select dressed as the site's outlined pill so keyboard and phone pickers keep working */
.cm-sort{position:relative;display:inline-flex;align-items:center;margin-left:auto;height:44px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:var(--sheet);color:var(--text);transition:border-color var(--dur-1) var(--ease)}
.cm-sort:hover{border-color:var(--ink)}
.cm-sort:focus-within{outline:2px solid var(--green);outline-offset:2px}
.cm-sort-l{padding-left:16px;font:400 14px/1 var(--font);color:var(--muted);pointer-events:none}
.cm-sort select{field-sizing:content;height:44px;padding:0 38px 0 6px;border:0;border-radius:var(--radius-pill);background:transparent;font:500 14px/1 var(--font);color:var(--ink);cursor:pointer;outline:0;-webkit-appearance:none;appearance:none}
.cm-sort select option{background:var(--sheet);color:var(--ink)}
.cm-sort>svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.cc-grid[hidden],.cc-grid>li[hidden],.cm-empty[hidden],.cm-x[hidden],.cm-clear[hidden],.cm-pills[hidden]{display:none!important}
.cc h3 mark,.cc-desc mark{padding:0 2px;border-radius:2px;background:var(--green-100);box-shadow:inset 0 -2px 0 var(--green);color:inherit;font-weight:inherit}
html.dark .cc h3 mark,html.dark .cc-desc mark{background:var(--green-100);box-shadow:inset 0 -2px 0 var(--green);color:inherit}
.cm-in>li{animation:cm-in var(--dur-2) var(--ease) backwards}
@keyframes cm-in{from{opacity:0;translate:0 8px}}
.cm-empty{margin-top:16px;padding:48px 32px;border:1px solid var(--sheet-edge);border-radius:var(--radius-l);background:var(--sheet);box-shadow:var(--shadow-rest);text-align:center}
.cm-empty-t{margin:0;font:500 22px/1.3 var(--font);letter-spacing:-.01em;color:var(--ink)}
.cm-empty-t b{font-weight:500}
.cm-empty-s{margin:10px 0 0;font:400 15px/1.5 var(--font);color:var(--muted)}
.cm-empty-a{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:24px}
.cm-sug{height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:var(--sheet);font:500 14px/1 var(--font);color:var(--text);cursor:pointer;transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.cm-sug:hover{border-color:var(--ink);color:var(--ink)}
.cm-sug:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.cm-empty .btn{height:44px;padding:0 20px}
@media (max-width:900px){.cm-search{flex-basis:100%;max-width:none}}
@media (max-width:720px){
  .cm-filter-wrap{margin-top:20px;padding:6px 0 10px}
  .cm-tools{gap:10px}
  .cm-search{flex:1 1 0;min-width:0;max-width:none}
  .cm-fbtn{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--radius-m);background:var(--sheet);font:500 14.5px/1 var(--font);color:var(--ink);cursor:pointer;white-space:nowrap;transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
  .cm-fbtn:hover{border-color:var(--ink)}
  .cm-fbtn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
  .cm-fbtn svg{width:18px;height:18px;color:var(--muted)}
  .cm-fbadge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--ink);font:600 12px/1 var(--font);color:var(--sheet)}
  .cm-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--wrap-pad,20px));padding:2px var(--wrap-pad,20px) 4px;width:calc(100% + 2*var(--wrap-pad,20px))}
  .cm-chips::-webkit-scrollbar{display:none}
  .cm-chips{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--wrap-pad,20px),#000 calc(100% - var(--wrap-pad,20px)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--wrap-pad,20px),#000 calc(100% - var(--wrap-pad,20px)),transparent)}
  .cm-chips .cm-chip,.cm-sheet .cm-chip{height:44px;padding:0 16px;font-size:14px}
  .cm-kbd{display:none}
  .cm-search input{padding-right:44px}
  .cm-search input:placeholder-shown{padding-right:12px}
  .cm-x{right:2px;top:2px;width:40px;height:40px}
  .cm-x::after{content:"";position:absolute;inset:-2px;pointer-events:auto}
  .cm-sort{display:none}
  .cm-bar{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;gap:6px 8px;margin-top:8px;min-height:0}
  .cm-status{grid-column:1/-1}
  .cm-pills{grid-column:1;display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0;gap:6px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .cm-pills::-webkit-scrollbar{display:none}
  .cm-pills li{flex:none}
  .cm-clear{grid-column:2;min-height:44px;display:inline-flex;align-items:center;padding:0 8px;white-space:nowrap}
  .cm-pills button{height:44px;padding:0 14px 0 16px;font-size:13.5px;position:relative}
  .cm-pills button::after{content:"";position:absolute;inset:-2px 0;pointer-events:auto}
  .cm-empty{padding:36px 20px}
  .cm-sheet:not([open]){display:none}
  .cm-sheet[open]{position:fixed;inset:auto 0 0;display:flex;flex-direction:column;gap:16px;width:100%;max-width:none;max-height:min(88vh,600px);margin:0;padding:8px 20px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-bottom:0;border-radius:var(--radius-l) var(--radius-l) 0 0;background:var(--sheet);color:var(--ink);box-shadow:var(--shadow-float);animation:cm-sheet-in var(--dur-2) var(--ease);z-index:90}
  .cm-sheet::backdrop{background:rgba(18,22,20,.36);animation:cm-fade-in var(--dur-2) var(--ease)}
  html.dark .cm-sheet::backdrop{background:rgba(0,0,0,.6)}
  .cm-sheet-handle{width:36px;height:4px;margin:4px auto 0;border-radius:var(--radius-pill);background:var(--line-2);flex:none}
  .cm-sheet-head{display:flex;align-items:center;justify-content:space-between;min-height:48px;border-bottom:1px solid var(--line)}
  .cm-sheet-head h2{margin:0;font:500 18px/1.3 var(--font);color:var(--ink)}
  .cm-sheet-x{display:grid;place-items:center;width:44px;height:44px;margin-right:-6px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
  .cm-sheet-x svg{width:18px;height:18px}
  .cm-sheet-x:hover{background:var(--soft-2);color:var(--ink)}
  .cm-sheet-x:focus-visible{outline:2px solid var(--green);outline-offset:2px}
  .cm-sheet-body{display:flex;flex-direction:column;gap:18px;padding:6px 0}
  .cm-sheet-group{display:flex;flex-direction:column;gap:8px}
  .cm-sheet-l{font:500 13px/1.3 var(--font);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
  .cm-sheet-chips{display:flex;flex-wrap:wrap;gap:8px}
  .cm-sheet-select-wrap{position:relative;display:flex;align-items:center}
  .cm-sheet-select{width:100%;height:44px;padding:0 36px 0 14px;border:1px solid var(--line-2);border-radius:var(--radius-m);background:var(--sheet);font:500 16px/1 var(--font);color:var(--ink);cursor:pointer;outline:0;-webkit-appearance:none;appearance:none}
  .cm-sheet-select:focus-visible{outline:2px solid var(--green);outline-offset:2px}
  .cm-sheet-select-wrap>svg{position:absolute;right:14px;pointer-events:none;width:16px;height:16px;color:var(--muted)}
  .cm-sheet-foot{display:flex;flex-direction:column;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
  .cm-sheet-foot .btn{width:100%;height:46px;justify-content:center;font-size:15px}
  .cm-sheet-clear:disabled{opacity:.4;pointer-events:none;cursor:default}
  @keyframes cm-sheet-in{from{transform:translateY(24px);opacity:0}}
  @keyframes cm-fade-in{from{opacity:0}}
  html.cm-lock,html.cm-lock body{overflow:hidden;touch-action:none}
}
@media (max-width:768px){
  .cm-search input,.cm-sort select,.cm-sheet-select{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.cm-in>li{animation:none}.cm-chip,.cm-sug,.cm-x,.cm-clear,.cm-search input,.cm-pills button,.cm-fbtn,.cm-filter-wrap::before{transition:none}.cm-sheet[open],.cm-sheet::backdrop{animation:none}}
/* swarm R49 home-marketing (compmath): on phones the row cards took their height from the cover photo once it
   lazy-loaded, so tall covers (F=ma, Math Prize, USAMO) grew their card 22 to 26px after load (a layout jump) and left
   an empty gap under the title. The photo now fills its frame without adding height of its own. */
.cc-img{position:relative}
.cc-img img{position:absolute;inset:0}
/* swarm R54 home-marketing (compmath): on phones the stuck filter bar was 154px tall (search, chip row, count), a
   fifth of the screen. While stuck it now shows only search and Filters (60px). The chips, pills and sort are all in the
   Filters sheet and the button's badge counts active filters. The hidden rows keep their space, so nothing below
   jumps, and clicks pass through to the cards. The status stays at opacity 0 so screen readers still hear it. */
@media (max-width:720px){
  .cm-filter-wrap.is-stuck::before{bottom:auto;height:60px}
  .cm-chips,.cm-bar>*{transition:opacity var(--dur-1) var(--ease),visibility var(--dur-1)}
  .cm-filter-wrap.is-stuck{pointer-events:none}
  .cm-filter-wrap.is-stuck .cm-search,.cm-filter-wrap.is-stuck .cm-fbtn,.cm-filter-wrap.is-stuck .cm-sheet{pointer-events:auto}
  .cm-filter-wrap.is-stuck .cm-chips,.cm-filter-wrap.is-stuck .cm-pills,.cm-filter-wrap.is-stuck .cm-clear{opacity:0;visibility:hidden}
  .cm-filter-wrap.is-stuck .cm-status{opacity:0}
}
@media (max-width:720px) and (prefers-reduced-motion:reduce){.cm-chips,.cm-bar>*{transition:none}}
/* swarm R55 home-marketing (compmath): on tablets (721 to 900) the stuck filter bar took three rows (search, chips,
   count and sort), 178px of a 1024px screen. The sort pill now sits beside the search on the first row, and while
   stuck only search, sort and the chip row stay on the band (116px). The count, pills and "Clear all" keep their space
   while hidden, so nothing below jumps, and the pressed chips still show the active filters. */
@media (min-width:721px) and (max-width:900px){
  .cm-search{flex:0 0 calc(100% - 232px)}
  .cm-sort{position:absolute;top:8px;right:0;width:220px;margin:0}
  .cm-sort select{flex:1 1 auto;min-width:0}
  .cm-filter-wrap.is-stuck::before{bottom:auto;height:116px}
  .cm-bar>*:not(.cm-sort){transition:opacity var(--dur-1) var(--ease),visibility var(--dur-1)}
  .cm-filter-wrap.is-stuck{pointer-events:none}
  .cm-filter-wrap.is-stuck .cm-tools,.cm-filter-wrap.is-stuck .cm-sort{pointer-events:auto}
  .cm-filter-wrap.is-stuck .cm-pills,.cm-filter-wrap.is-stuck .cm-clear{opacity:0;visibility:hidden}
  .cm-filter-wrap.is-stuck .cm-status{opacity:0}
}
@media (min-width:721px) and (max-width:900px) and (prefers-reduced-motion:reduce){.cm-bar>*{transition:none}}
/* fast-owner1710: owner "Cards are smaller than normal". Same 3-column grid as the /courses/ flagship group (.cg-flag), so cards match the catalog size. */
@media (min-width:1101px){.cg-flag .cc-grid{grid-template-columns:repeat(3,1fr)}}
/* swarm R59 home-marketing (compmath): on desktop the stuck filter bar was 122px tall (search and chips, then count
   and sort). The sort pill now ends the first row (fixed width, so changing it never resizes the search), and while
   stuck only that row stays on the band (60px). The count, pills and "Clear all" keep their space while hidden, so
   nothing below jumps, and the pressed chips and the search text still show the active filters. */
@media (min-width:1200px){
  .cm-tools{padding-right:222px}
  .cm-search{flex:1 1 0}
  .cm-sort{position:absolute;top:8px;right:0;width:210px;margin:0}
  .cm-sort select{flex:1 1 auto;min-width:0;text-overflow:ellipsis}
  .cm-filter-wrap.is-stuck::before{bottom:auto;height:60px}
  .cm-bar>*:not(.cm-sort){transition:opacity var(--dur-1) var(--ease),visibility var(--dur-1)}
  .cm-filter-wrap.is-stuck{pointer-events:none}
  .cm-filter-wrap.is-stuck .cm-tools,.cm-filter-wrap.is-stuck .cm-sort{pointer-events:auto}
  .cm-filter-wrap.is-stuck .cm-pills,.cm-filter-wrap.is-stuck .cm-clear{opacity:0;visibility:hidden}
  .cm-filter-wrap.is-stuck .cm-status{opacity:0}
}
@media (min-width:1200px) and (prefers-reduced-motion:reduce){.cm-bar>*{transition:none}}