/* Calculus for Everyone's product pages (0.16.0, look "product_calculus", on product.css + product-owc.css +
   calculus.css): the line page's colours and type on the course kit's hero and buy box. Mirrors the canvas
   "Calculus Product Pages" (c4e.css there). */
.th-product_calculus{--ink:#1F2328;--ink2:#50555E;--ink3:#6B7079;--rule:#E6E2D8;--rule2:#D7D2C6;--paper:#fff;--tint:#F7F5F1;
  --cta:#F15B2D;--ctah:#D9481C;--link:#1F2328;--ok:#2F6B3A;
  --c4-or:#F15B2D;--c4-or2:#C4461F;--c4-or3:#A83A18;--c4-aqua:#CFEFF0;--c4-mint:#F3FBFB;--c4-mint2:#D5EEEF;--c4-teal:#114D65;--c4-teal2:#0B3A4D;--c4-sky:#BFDDE3;--c4-sand:#F7F5F1;--c4-gold:#FFD45E;
  --c4-disp:"Oswald","Arial Narrow","Helvetica Neue",sans-serif;--c4-read:"Libre Caslon Text",Georgia,"Times New Roman",serif;--c4-caps:"Montserrat",var(--sans);--c4-hand:"Patrick Hand","Comic Sans MS","Chalkboard SE",cursive;--c4-gap:clamp(56px,7vw,88px);
  --co-y:#F15B2D;--co-yink:#C4461F;--co-ytint:#FDEDE6;--co-yglow:#F6C2AE;
  --disp:var(--c4-disp);--co-serif:var(--c4-read);--sans:"Nunito Sans",system-ui,sans-serif}
.th-product_calculus body{font:17px/1.55 var(--co-serif);color:var(--ink);background:#fff}
.th-product_calculus main a:not(.pd-btn){color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
.th-product_calculus main a:not(.pd-btn):hover{color:var(--c4-or2)}
.th-product_calculus main h1,.th-product_calculus main h2,.th-product_calculus main h3,.th-product_calculus main h4{font-family:var(--disp);font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:.01em}
.th-product_calculus .band{padding-block:56px}
.th-product_calculus .sec.band + .sec.band.bg-white,.th-product_calculus .sec.band.bg-white + .sec.band.bg-white{border-top:0}
.th-product_calculus .bg-tint{background:var(--c4-mint)}
.th-product_calculus .bg-mint{background:var(--c4-mint);border-block:1px solid var(--c4-mint2)}
.th-product_calculus .bg-aqua{background:var(--c4-aqua)}
.th-product_calculus .bg-sand{background:var(--c4-sand);border-block:1px solid var(--rule)}
/* rhythm: the sections that carry no band padding (the hero, the course kit's, the line page's) stack with space above */
.th-product_calculus .sec.bg-white:not(.band){padding-top:var(--c4-gap)}
.th-product_calculus main > .sec-pd-rhero.bg-white:not(.band){padding-top:0}
.th-product_calculus main > .sec.bg-white:not(.band):last-child{padding-bottom:var(--c4-gap)}
.th-product_calculus .sec-c4-band{padding-top:clamp(48px,6vw,72px)}
/* type */
.th-product_calculus .co-kicker{font:700 12.5px/1.3 var(--c4-caps);letter-spacing:.3em;text-transform:uppercase;color:var(--c4-teal)}
.th-product_calculus .co-h1{font:600 clamp(34px,4vw,46px)/1.05 var(--disp);text-transform:uppercase;letter-spacing:.01em;margin:8px 0 4px}
.th-product_calculus .co-sub{font:italic 400 21px/1.3 var(--co-serif);color:var(--ink2);margin:0 0 6px}
.th-product_calculus .co-by{font:700 12px/1.4 var(--c4-caps);letter-spacing:.22em;text-transform:uppercase;color:var(--c4-or2);margin:0 0 18px}
.th-product_calculus .co-lede{font-size:18.5px}
.th-product_calculus .co-lede p + p{font-size:17px;color:var(--ink2)}
.th-product_calculus .co-h2{display:inline-block;font:600 clamp(28px,3.4vw,38px)/1.12 var(--disp);text-transform:uppercase;letter-spacing:.01em;padding-bottom:12px;border-bottom:3px solid var(--c4-or);margin:4px 0 22px}
.th-product_calculus .co-h3,.th-product_calculus .co-head-n,.th-product_calculus .co-part-n,.th-product_calculus .co-teacher-n{font-family:var(--disp);text-transform:uppercase;letter-spacing:.01em}
.th-product_calculus .co-head-n{font-size:19px}
.th-product_calculus .pd-h2,.th-product_calculus .pd-eyebrow + h2,.th-product_calculus .c4-h2{font-family:var(--disp)}
.th-product_calculus .pd-eyebrow,.th-product_calculus .pd-kicker{font:700 12.5px/1.3 var(--c4-caps);letter-spacing:.3em;text-transform:uppercase;color:var(--c4-teal)}
.th-product_calculus .pd-btn{font:800 16px/1.1 var(--sans);letter-spacing:.02em;border-radius:4px;min-height:52px}
.th-product_calculus .pd-btn.line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.th-product_calculus .pd-btn.line:hover{background:var(--tint)}
/* the hero picture: the cover on a wash, or a video that plays here */
.co-wash{position:relative;background:var(--c4-aqua);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:36px;min-height:400px;margin:26px 0 0;max-width:620px}
.co-wash .co-wash-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;border:0;background:none}
.co-wash .co-wash-cv{position:relative;width:48%;max-width:300px;height:auto;box-shadow:0 18px 40px rgba(17,77,101,.28)}
.co-pic-plain img{border:0;background:none}
.co-hero-play{margin:26px 0 0;max-width:620px}
.co-hero-play .vimg img{aspect-ratio:16/9;object-fit:cover}
/* the buy box */
.th-product_calculus .co-inc{background:var(--c4-mint)}
.th-product_calculus .co-inc li .co-inc-pr{margin-left:auto;padding-left:10px;font-weight:700;color:var(--ink3);white-space:nowrap}
.th-product_calculus .co-opt.on{background:var(--c4-mint)}
.th-product_calculus .co-opt input{accent-color:var(--c4-or2)}
.th-product_calculus .co-tag{color:var(--c4-or2);background:#FDEDE6;border-color:#F6C2AE}
.co-also{display:block;font:13px/1.5 var(--sans);color:var(--ink2);text-align:center;margin:10px 0 0}
.co-many input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.co-many{position:relative;cursor:default;flex-wrap:wrap}
.co-many .co-l{flex:1 1 100%}
.co-many .co-count{margin-left:0}
.co-many .co-pr{margin-left:auto}
.co-count{display:inline-flex;align-items:center;border:1px solid var(--rule2);border-radius:4px;overflow:hidden;font-family:var(--sans);flex:0 0 auto}
.co-count button{width:34px;height:34px;border:0;background:#fff;font-size:18px;cursor:pointer;color:var(--ink);line-height:1}
.co-count button:hover{background:var(--tint)}
.co-count output{width:34px;text-align:center;font-weight:800;font-size:15px;border-inline:1px solid var(--rule2);line-height:34px;display:inline-block}
/* captions on the videos: a dark strip, readable over a light still */
.th-product_calculus .co-play .co-cap{background:rgba(20,30,40,.55);padding:6px 10px;border-radius:3px;left:12px;right:12px;max-width:none;bottom:12px}
/* the drawings section with no drawings: the list follows the heading closely */
.th-product_calculus .c4-head + .c4-how-row{margin-top:8px}
/* the lessons */
.th-product_calculus .co-acc summary{font:600 19px/1.3 var(--disp);text-transform:uppercase;letter-spacing:.02em}
.co-side2{margin-top:26px}
.co-side2 .co-kicker{display:block;margin-bottom:12px}
.co-quote{margin:26px 0 0;padding:0}
.co-quote p{font:400 21px/1.4 var(--co-serif);margin:0;color:var(--ink)}
.co-quote cite{display:block;margin-top:8px;font:700 11px/1.4 var(--c4-caps);letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);font-style:normal}
.th-product_calculus .co-teacher .co-part-l{margin-top:4px}
/* the pieces (pd_set cards) */
.th-product_calculus .pd-card{border:1px solid var(--rule)}
/* the closing band on aqua */
.th-product_calculus .co-close-h{color:var(--ink);font:600 clamp(30px,3.6vw,44px)/1.05 var(--disp);text-transform:uppercase}
.th-product_calculus .co-close-h em,.th-product_calculus .co-close-h i{font:italic 400 .9em/1 var(--co-serif);text-transform:none;color:var(--c4-or2)}
.th-product_calculus .co-close-l{font:400 22px/1.2 var(--c4-hand);color:var(--c4-or2)}
.th-product_calculus .co-close-l a{color:var(--ink)}
@media (max-width:760px){
  .co-wash{min-height:300px;padding:24px}
  .co-wash .co-wash-cv{width:62%}
  .co-count button,.co-count output{width:30px}
}