/* 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:10px 10px;font-size:12px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center}
  .pb-mock .tabs-mock span{height:44px;display:inline-flex;align-items:center}
}

/* 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:10px 12px;min-height:44px;box-sizing:border-box;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:10px 8px;border-top:1px solid var(--line);border-radius:var(--radius-s);cursor:default}
.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:8px 32px 8px 10px;gap:6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
  .ws-folders::-webkit-scrollbar{display:none}
  .ws-folders.at-end{-webkit-mask-image:none;mask-image:none}
  .ws-folders.is-scrolled{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
  .ws-folders.is-scrolled.at-end{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px);mask-image:linear-gradient(to right,transparent,#000 40px)}
  .ws-folders li{flex:none;min-height:44px;padding:10px 14px}
  .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)}
.pb-mock .tabs-mock.at-end{-webkit-mask-image:none;mask-image:none}
.pb-mock .tabs-mock.is-scrolled{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.pb-mock .tabs-mock.is-scrolled.at-end{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px);mask-image:linear-gradient(to right,transparent,#000 40px)}
/* 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 mktC (2026-10-22): rhythm checked against the home page */
/* the lead sat 16px under the green swash; give it the same air the home hero leaves under its swash */
.pb-fhero h1+.lead{margin-top:26px}
/* the home .feat-copy .btn margin stacked on top of the CTA row gap (60px above the buttons, 38px between them on mobile) */
.pb-fhero .pb-ctas{margin-top:36px;gap:12px}
.pb-fhero .pb-ctas .btn{margin-top:0}
/* centred section titles break evenly instead of leaving one word on the last line */
.pb-why .h2,.pb-flow .h2{text-wrap:balance}
.pb-why .lead{text-wrap:pretty}
@media (max-width:720px){
  .pb-fhero h1+.lead{margin-top:20px}
  /* R22: the home hero now stacks its two buttons full width on phones; the feature hero does the same */
  .pb-fhero .pb-ctas .btn{flex:1 1 100%}
  .pb-fhero .pb-ctas{margin-top:32px}
  .final3-ctas .btn{flex:1 1 100%;width:100%}
}

/* 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(--btn);color:var(--btn-text);box-shadow:none}
.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(--btn-text)}

/* 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)}
@media (max-width:720px){.cstats.sx-stats{width:auto}.cstats.sx-stats>div{flex:0 1 auto;padding:2px var(--stat-pad)}}

/* 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-features: prevent mobile tab click from scrolling .stage and clipping .app, and theme .stack layers */
.pb-panel .pb-mock .stage{overflow:visible}
.pb-panel .pb-mock .tabs-mock{margin-right:0;padding-right:0}
@media (min-width:721px) and (max-width:1100px){
  .pb-panel .pb-mock .tabs-mock{-webkit-mask-image:none;mask-image:none}
}
@media (min-width:1101px){
  .pb-panel .pb-mock .tabs-mock{margin-right:calc(-1 * min(var(--sx-bleed), 96px));padding-right:16px;-webkit-mask-image:none;mask-image:none}
}
/* swarm R49 home-marketing-features: at 1101px up the tab row ran ~100px past the card and the content column
   (lessons, exams at 1440), so its hairline and last tabs hung off the sheet. Keep it at the card's width and let
   the overflow scroll behind the same edge fade the narrower widths use (mocktabs.js sets .at-end/.is-scrolled). */
@media (min-width:1101px){
  .pb-panel .pb-mock .tabs-mock{margin-right:0;padding-right:0;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
  .pb-panel .pb-mock .tabs-mock.at-end{-webkit-mask-image:none;mask-image:none}
  .pb-panel .pb-mock .tabs-mock.is-scrolled{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
  .pb-panel .pb-mock .tabs-mock.is-scrolled.at-end{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px);mask-image:linear-gradient(to right,transparent,#000 40px)}
}
/* swarm R49 home-marketing-features: _home/rework.css paints every .stage with var(--panel)!important, which beat the
   background:none above and drew a square box behind the tab row and card inside the rounded panel (plain to see in
   dark: #171c1a on the #1e2221 panel). Inside the bleed panel the stage is only a layout wrapper. */
.pb-panel .pb-mock .stage{background:none!important}
.pb-mock .stack::before,.pb-mock .stack::after{background:var(--sheet);border:1px solid var(--sheet-edge);border-top:0;border-radius:0 0 var(--radius-l) var(--radius-l);box-shadow:var(--shadow-rest)}

/* swarm R29 home-marketing-features: on /feature/exams/ each exam tab has its own card height (R24), so beside the
   vertically centred copy the H1 and buttons jumped up to 126px each time a tab was clicked at 1101px and up.
   The copy now holds the place it takes beside the first (calculus) card and stays there. */
@media (min-width:1101px){
  .pb-fhero .feat.pb-feat-hold{align-items:start}
  .pb-feat-hold>.feat-copy{margin-top:124px}
}

/* swarm R31 home-marketing-features: in dark mode rework.css (html.dark .nova-av/.src-tag/.gen) turned the Nova avatar,
   "Using content from Stellar Lesson" and "New AI question each time" teal (#4cc2b6), a leftover of the old accent.
   Keep them the same neutral ink/muted as in light mode. */
html.dark .pb-mock .nova-av{background:var(--soft-2);color:var(--text)}
html.dark .pb-mock .src-tag,html.dark .pb-mock .gen{color:var(--muted)}

/* swarm R30 home-marketing-features: collapse inactive lesson cards so tabs 2 to 5 do not leave a 139px to 223px blank band above FIG. 1, hold the desktop lesson copy in place, clear the "p" descender in "Workspace", balance closing headlines and leads, and add 44px invisible hit areas to mock-up tabs */
.pb-panel .mock-panels.mt-on>.app:not(.is-on){display:none}
@media (min-width:1101px){
  .pb-feat-hold.pb-feat-hold-lessons>.feat-copy{margin-top:104px}
}
.pb-fhero h1>.gsw:only-child::after{bottom:-.14em}
.final3 h2,.pb-more .h2,.pb-why .lead,.pb-fhero .lead{text-wrap:balance}
.final3-side p{text-wrap:pretty}
.pb-mock .seg span,.pb-mock .tabs-mock span,.pb-mock .seg [role=tab],.pb-mock .tabs-mock [role=tab]{position:relative}
.pb-mock .seg span::before,.pb-mock .seg [role=tab]::before,.pb-mock .tabs-mock span::before,.pb-mock .tabs-mock [role=tab]::before{content:"";position:absolute;inset:-4px}

/* swarm R34/R45 home-marketing-features: interactive lesson vocabulary terms and workspace folder hover affordances */
.mk-term{padding:1px 4px;border-radius:3px;box-shadow:inset 0 -2px 0 var(--line-2);cursor:help;transition:background .15s ease,box-shadow .15s ease}
.mk-term:hover,.mk-term:focus-visible{background:var(--soft-2);box-shadow:inset 0 -2px 0 var(--ink)}
.mk-term:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.ws-folders li{cursor:pointer;transition:background .15s ease,color .15s ease}
.ws-folders li:hover:not(.on){background:var(--soft);color:var(--ink)}
.ws-folders li:focus-visible{outline:2px solid var(--green);outline-offset:-2px}


/* swarm R36 home-marketing features: mock-up question numbers (Practice Exams) and answer letters (Quasar) were
   11.5px, below the site's 12px floor for labels. Lift them to the small-label size with room around them. */
.pb-mock .qnav{gap:8px}
.pb-mock .qnav i{width:30px;height:30px;font-size:13px}
.pb-mock .amc-opts span small{font-size:12.5px;letter-spacing:.02em}

/* swarm R37/R39/R40/R42/R45 home-marketing-features: mock-up tab touch and click target heights */
.pb-mock .seg span,.pb-mock .tabs-mock span{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* R37 verifier: the cursor:pointer and hover states on the static mock parts (.opt, .qnav i, .amc-opts span, .suggest span, .mk-audio .pl, .fake) were removed. Those parts do nothing on click (mocktabs.js only drives [role=tab]), so they must not look clickable */

/* swarm R43 home-marketing-features: active state highlights for current feature page in dropdown and mobile menus, and code preview styling */
.dd-item[aria-current=page]{background:var(--soft)}
@media (max-width:899px){.mm-sub a[aria-current=page]{color:var(--ink)}}
.mk-code.mk-pseudo{font-family:var(--font);letter-spacing:0}
html.dark .mk-code{background:var(--soft-2);border-color:var(--line-2)}
/* swarm R50 features: the AMC question sat 14px lower than every other mock card's first line (40px under the card bar against 26px at the foot, 32/18 on phones), so the body padding alone sets the gap, as on the other cards */
.pb-mock .amc .app-body>.qtext:first-child{margin-top:0}
/* swarm R52 features: on /feature/workspace/ each folder tab showed a panel of its own height (AMC 8 is 19px taller)
   and the Macroeconomics caption ran to two lines where the others take one, so beside the vertically centred copy
   the H1 and buttons moved 9 to 10px on every folder click. The panels now share one grid cell (the card keeps the
   tallest height) and the caption holds the room of its longest text (sizers added by the page script). */
.ws-folders{grid-row:1;grid-column:1}
.ws-files{grid-row:1;grid-column:2;min-width:0}
.pb .ws-files[hidden]{display:block!important;visibility:hidden}
@media (max-width:720px){.ws-files{grid-row:2;grid-column:1}}
.ws-cap{display:grid;min-width:0}
.ws-cap>*{grid-area:1/1}
.ws-cap>.ws-cap-size{visibility:hidden}

/* swarm R55 home-marketing-features: the glossary terms in the /feature/lessons/ mock (whose note says "Hover over
   the highlighted terms") only had the native title tooltip: dark, slow, mouse only, nothing on keyboard focus or tap.
   They now open the site's light tooltip (white sheet, hairline, float shadow, 10px corners, Inter 500 13px), placed
   by the page script above the term and kept inside the viewport. One tooltip only (title removed). */
.mk-tip{position:fixed;left:0;top:0;z-index:60;max-width:min(260px,calc(100vw - 24px));padding:7px 11px;border-radius:var(--radius-m);background:var(--sheet);color:var(--ink);border:1px solid var(--line);box-shadow:0 6px 20px -8px rgba(18,22,20,.14),0 1px 2px rgba(18,22,20,.05);font:500 13px/1.45 var(--font);letter-spacing:0;text-align:left;pointer-events:none;opacity:0;translate:0 4px;transition:opacity var(--dur-1) var(--ease),translate var(--dur-1) var(--ease)}
.mk-tip.on{opacity:1;translate:0 0}
html.dark .mk-tip{box-shadow:0 6px 20px -8px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.mk-tip{transition:none;translate:none}}

/* swarm R56 home-marketing-features: the lesson and exam card area glides between tab heights (page script). While it
   moves, scroll anchoring is paused so the page does not chase the changing height, and the clip leaves room for the
   card's shadow. */
html.mk-hglide{overflow-anchor:none}
.pb-panel .mock-panels{overflow-clip-margin:24px}

/* swarm R57 home-marketing-features: in "Explore related resources" the text sits at the top of each row, so the two
   titles share one line when only one description wraps (workspace at 768). The arrow stays centred. */
.pb-links a>span{align-self:flex-start}

/* owner 1712 "Bad padding": My Space figure (FIG. 1) uses one 20px scale (16px on phones).
   Both columns start 20px below the bar, the selected folder is an inset pill with equal
   space on both sides, list rows share the left edge of the breadcrumb and the button,
   and the button sits 20px above the bottom edge. */
.ws-app .ws-body{grid-template-columns:216px 1fr}
.ws-app .ws-folders{padding:20px 12px;gap:4px}
.ws-app .ws-folders li{padding:10px 12px;border-radius:999px}
.ws-app .ws-files{padding:20px 24px;display:flex;flex-direction:column}
.ws-app .ws-path{margin:0 0 12px;min-height:20px;display:flex;align-items:center}
.ws-app .ws-files li{padding:12px 0;border-radius:0}
.ws-app .ws-files .actions{margin-top:auto;padding-top:20px}
@media (max-width:720px){
  .ws-app .ws-body{grid-template-columns:1fr}
  .ws-app .ws-folders{padding:12px 32px 12px 16px;gap:4px}
  .ws-app .ws-folders li{padding:10px 14px}
  .ws-app .ws-files{padding:16px}
  .ws-app .ws-files .actions{padding-top:16px}
}

/* swarm R58 home-marketing-features (idle-1027-1804 #1 on these pages): a Tab stop inside a block that is still
   waiting for its scroll reveal showed at opacity .6 or less, and the smooth page scroll let focus run ahead of the
   view. A block that takes focus is shown at once, and focus scrolls jump straight to it. The only in-page link here
   is the skip link to #main. */
html{scroll-behavior:auto}
.sx-rv:focus-within,.stage .app.sx-rv:focus-within{opacity:1;transform:none;transition:none}