/* 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,#browse{scroll-margin-top:0}
.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-left:14px;padding-right:32px;cursor:pointer;background-color:var(--sheet);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2369726e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;-webkit-appearance:none;appearance:none}
html.dark .pb-filters select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa29e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.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:none!important;box-shadow:0 0 0 3px var(--green-100)}   /* swarm R59 keys: one ring, the site field focus (green hairline + soft halo), was a border plus an outline 2px outside it */
.pb-search{grid-column:1/-1;display:flex;gap:10px;min-width:0}
.pb-search-in{flex:1;min-width:0}
.pb-search svg{position:absolute;left:15px;top:13px;width:18px;height:18px;color:var(--muted)}
.pb-clear{flex:none;height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--radius-m);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)}
.pb-clear:hover{background:var(--soft);border-color:var(--ink);color:var(--ink)}
.pb-clear:focus-visible{border-color:var(--green);outline:2px solid var(--green);outline-offset:2px}
.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{justify-content:space-between;flex-wrap:wrap;margin-top:40px}
.pb-empty-clear{flex:none}

/* ---------- 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 minmax(476px,1fr);gap:clamp(32px,5vw,64px)}}

/* ---------- 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 (SAT): 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}}

/* 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-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,.pb-clear{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)}

/* final pass 2026-10-22: at 1440 the auto-sized selects left the search 222 px wide and cut its placeholder
   ("Search courses, exa"); on wide screens the search now runs the full row and the five selects share the row below */
@media (min-width:1101px){.pb-filters{grid-template-columns:repeat(5,minmax(0,1fr))}.pb-filters .pb-search{grid-column:1/-1}}

/* 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's course stats (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 R29 home-marketing catalog: a long category label ("Competitive · Computer Science" on ACSL) wrapped to two
   lines and pushed that card's title below its row neighbours. Keep the label on one line with an ellipsis, and let the
   card body shrink so the nowrap text cannot widen it (same fix as /competitive-math/ in R28). */
.cc-body{min-width:0}
.cc-meta>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* swarm R31 home-marketing catalog (owner search standard; pattern: faceted search result bar with removable filter
   pills, as in the site palette): a "/" hint chip in the search field, a result line that is always present (so the
   grid does not jump when filters change) with removable pills and "Clear all", title matches marked in the palette's
   green tint, and popular searches in the empty state. */
.pb-kbd{position:absolute;right:12px;top:10px;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border:1px solid var(--line);border-radius:6px;background:var(--soft);box-shadow:inset 0 -1px 0 var(--line);font:500 12px/1 var(--font);color:var(--muted);pointer-events:none}
.pb-search-in input:focus~.pb-kbd,.pb-search-in input:not(:placeholder-shown)~.pb-kbd{display:none}
@media (pointer:coarse){.pb-kbd{display:none}}
.pb-filters input{padding-right:44px}
/* swarm R51 home-marketing: on touch the "/" chip is hidden and the clear button only shows once there is text, so an
   empty field gives the 44px back to the placeholder (it was cut to "Search courses, exa" at 375). A long placeholder
   on very narrow phones ends in an ellipsis instead of a hard cut */
.pb-filters input{text-overflow:ellipsis}
@media (pointer:coarse){.pb-filters input:placeholder-shown{padding-right:14px}}
.pb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:36px;margin-top:16px}
.pb-result{margin:0 6px 0 0;font:400 14.5px/1.4 var(--font);color:var(--muted)}
.pb-result b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.pb-pills{display:contents;list-style:none}
.pb-pills button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 14px;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)}
.pb-pills button:hover{background:var(--soft);border-color:var(--ink)}
.pb-pills svg{width:14px;height:14px;color:var(--muted)}
.pb-pills button:hover svg{color:var(--ink)}
.pb-bar .pb-clear{height:32px;padding:0 6px;border:0;border-radius:var(--radius-s);background:none;font:500 13.5px/1 var(--font);color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.pb-bar .pb-clear:hover{background:none;color:var(--ink);text-decoration-color:currentColor}
.pb-pills button:focus-visible,.pb-bar .pb-clear:focus-visible,.pb-sugg button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.pb-bar+.pb-groups .cg:first-child,.pb-bar~.pb-groups>.cg:first-child{margin-top:32px}
.cc h3 mark{padding:0 1px;border-radius:3px;background:var(--green-50);color:inherit;font-weight:inherit}
.pb-empty-q{color:var(--ink)}
.pb-dym{margin:6px 0 0;font:400 14.5px/1.4 var(--font);color:var(--muted)}
.pb-dym button{padding:0;border:0;background:none;font:500 14.5px/1.4 var(--font);color:var(--green);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.pb-dym button:hover{color:var(--ink)}
.pb-dym button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.pb-sugg{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pb-sugg button{height:36px;padding:0 14px;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)}
.pb-sugg button:hover{background:var(--soft);border-color:var(--ink)}
@media (max-width:1024px){.pb-pills button,.pb-sugg button{height:44px;min-height:44px}.pb-bar .pb-clear,.pb-empty-clear{height:44px;min-height:44px;display:inline-flex;align-items:center}}
@media (prefers-reduced-motion:reduce){.pb-pills button,.pb-sugg button{transition:none}}
/* swarm R32 home-marketing catalog (idle audit 2026-10-26 00:40, pattern: faceted search with a real clear control):
   a site clear button replaces the browser's search-cancel glyph, title matches get a visible green underline mark,
   and the six flagship cards sit in two full rows of three on desktop instead of 4 + 2. */
.pb-search{position:relative}
.pb-filters input::-webkit-search-cancel-button{display:none}
.pb-x{position:absolute;right:0;top:0;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-m);background:none;color:var(--muted);cursor:pointer;transition:color var(--dur-1) var(--ease)}
.pb-x[hidden]{display:none}
.pb-x svg{position:static;width:16px;height:16px;color:currentColor}
.pb-x:hover{color:var(--ink)}
.pb-x:focus-visible{outline:2px solid var(--green);outline-offset:-4px}
.cc h3 mark,.cc-desc mark{padding:0 1px;border-radius:2px;background:var(--green-100);box-shadow:inset 0 -2px 0 var(--green);color:inherit;font-weight:inherit}
@media (min-width:1101px){.cg-flag .cc-grid{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.pb-x{transition:none}}
/* swarm R33 home-marketing catalog (owner search standard; patterns: sticky filter bar on long lists and the phone
   "Filters" button that opens a bottom sheet with an Apply button, as on shop and travel catalogs): the search and
   filter row stays under the header while the 83-course list scrolls; on phones the four filters and the sort move
   into a sheet so the bar is one row (search + Filters with a count badge). */
.pb-filters{position:sticky;top:var(--pb-top,68px);z-index:20;margin-top:28px;padding:12px 0}
.pb-filters::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--band-shade);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)}
.pb-filters.is-stuck::before{opacity:1}
html.dark .pb-filters::before{box-shadow:0 1px 0 var(--line),0 12px 24px -18px rgba(0,0,0,.7)}
.pb-filters .pb-fsheet{display:contents}
.pb-fbtn,.pb-fs-head,.pb-fs-foot{display:none}
.pb-fs-label{display:none}
@media (min-width:721px) and (max-width:1100px){.pb-filters label:last-child{grid-column:auto}}
.pb-bar{margin-top:4px}
/* swarm R46 home-marketing catalog: the phone bar (search + "Filters" sheet) now runs up to 1100px, because on tablets
   the stuck bar with two rows of selects covered 176px, about a quarter of a 768x1024 screen. */
@media (max-width:1100px){
  .pb-filters{grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:24px;padding:10px 0}
  .pb-filters .pb-search{grid-column:auto}
  .pb-fbtn{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 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;transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
  .pb-fbtn svg{width:18px;height:18px;flex:none}
  .pb-fbtn:active{background:var(--soft)}
  .pb-fbtn:focus-visible{border-color:var(--green);outline:2px solid var(--green);outline-offset:2px}
  .pb-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)}
  .pb-fbadge[hidden]{display:none}
  .pb-filters .pb-fsheet:not([open]){display:none}
  .pb-filters .pb-fsheet[open]{position:fixed;inset:auto 0 0;display:flex;flex-direction:column;gap:14px;width:100%;max-width:none;max-height:min(88vh,640px);margin:0;padding:8px 20px calc(20px + env(safe-area-inset-bottom));overflow: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:pb-sheet-in var(--dur-2) var(--ease)}
  .pb-fsheet::backdrop{background:rgba(18,22,20,.36);animation:pb-fade-in var(--dur-2) var(--ease)}
  .pb-fsheet .pb-fs-head{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid var(--line)}
  .pb-fs-head h2{margin:0;font:500 19px/1.2 var(--font);letter-spacing:-.01em;color:var(--ink)}
  .pb-fs-x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;border-radius:var(--radius-m);background:none;color:var(--muted);cursor:pointer}
  .pb-fs-x svg{width:18px;height:18px}
  .pb-fs-x:focus-visible{outline:2px solid var(--green);outline-offset:-4px}
  .pb-fsheet>label{display:flex;flex-direction:column;gap:6px}
  .pb-fsheet>label>.pb-fs-label{display:block;font:500 13px/1.3 var(--font);color:var(--muted)}
  .pb-fsheet .pb-fs-foot{display:flex;flex-direction:column;gap:10px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
  .pb-fs-foot .btn{width:100%;justify-content:center}
  .pb-fs-go{gap:0}
  .pb-fs-go-text{display:inline}
}
@keyframes pb-sheet-in{from{transform:translateY(24px);opacity:0}}
@keyframes pb-fade-in{from{opacity:0}}
html.pb-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.pb-filters::before,.pb-fbtn{transition:none}.pb-filters .pb-fsheet[open],.pb-fsheet::backdrop{animation:none}}
@media (min-width:721px) and (max-width:1100px){.pb-filters .pb-fsheet[open]{width:min(560px,100%);margin:0 auto;padding-left:28px;padding-right:28px}.pb-fbtn:hover{border-color:var(--ink)}}
@media (max-width:1024px){.ticket a{display:inline-flex;align-items:center;min-height:44px}.pb-pills button,.pb-sugg button{height:44px;min-height:44px}.pb-bar .pb-clear,.pb-empty-clear{height:44px;min-height:44px;display:inline-flex;align-items:center}.nav .nav-cta .menu-btn,.sx-theme{width:44px;height:44px;min-width:44px;min-height:44px}}

/* swarm R57 catalog: a chosen value that is still too long ends in an ellipsis instead of being cut mid-word, and a
   popular search hidden because it equals an active filter really hides */
.pb-filters select{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.pb-sugg button[hidden]{display:none}

/* swarm R58 catalog (idle 1027-1721 #3): the search and the sheet's selects were 14.5px from 768 to 1024px, so iPads
   zoomed the page on tap. 16px up to 1024px, the hint one step smaller so it still fits. */
@media (max-width:1024px){.pb-filters input,.pb-filters select{font-size:16px}.pb-filters input::placeholder{font-size:15px}}