/* 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-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 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{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 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}
@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}}