/* =====================================================================
   STORE & CONTENT (SC-534): ported from Luke's vision file (store-showcase.css, plus the FAQ accordion, .em-inc
   columns and .rs-checks it borrows), brand teal, corrected to what the product does. Motion: scripts/page-store-and-content.js.
   ===================================================================== */
/* ---- shared mock pieces ---- */
  .st-tag{display:inline-block; padding:4px 9px; border-radius:100px; background:#0b1a24; color:#fff; font-size:8.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;}
  .st-tag.y{border-radius:3px; background:#ffc43d; color:#0b1a24;}
  .st-art{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden;
    background:radial-gradient(60% 80% at 80% 10%, rgba(0,188,183,.55), transparent 60%), linear-gradient(140deg, #0b1a24, #0e3640);}
  .st-art::before{content:""; position:absolute; width:120%; aspect-ratio:1; border-radius:50%; border:2px solid rgba(95,224,218,.5); left:-10%; top:-10%;}
  .st-art i{position:relative; display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:#007a76; color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.3);}
  .st-art i svg{width:18px; height:18px; margin-left:2px;}
  .st-meta{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:8px; font-size:11px; color:#5b6b78;}
  .st-meta span + span{position:relative;}
  .st-lib-ic{flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:#fff4dc; color:#9d6000;}
  .st-lib-ic.v{background:#e9f8f6; color:#00726f;}
  .st-lib-ic svg{width:15px; height:15px;}
  .st-lib-r{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #f0f2f4;}
  .st-lib-r > span:nth-child(2){flex:1; min-width:0;}
  .st-lib-r b{display:block; font-size:11.5px; font-weight:800; color:#0b1a24; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .st-lib-r small{display:block; font-size:10px; color:#62707c;}
  .st-lib-r em{display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:100px; background:#0b1a24; color:#fff; font-style:normal; font-size:10px; font-weight:800;}
  .st-lib-r em svg{width:10px; height:10px;}
  .st-f{display:block; margin-bottom:10px;}
  .st-f small,.st-type small,.st-files small,.st-amt small,.st-cat small,.st-choice small{display:block; margin-bottom:5px; font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#62707c;}
  .st-f i{display:block; padding:8px 10px; border:1px solid #dfe5e9; border-radius:6px; background:#fff; font-style:normal; font-size:11.5px; color:#0b1a24;}
  .st-f.on i{border-color:#007a76; box-shadow:0 0 0 3px rgba(0,188,183,.12);}
  .st-g2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}

/* ---- hero ---- */
  .sth{position:relative; padding:0 70px 70px 0;}
  @media (min-width:961px){ .sth{width:calc(100% + 100px); margin-left:-30px;} }
  .st-browser{background:#fff; border:1px solid #cfd8de; border-radius:8px; overflow:hidden; box-shadow:0 30px 60px rgba(11,26,36,.16);}
  .st-chrome{display:flex; align-items:center; gap:5px; padding:8px 10px; border-bottom:1px solid #dde3e8; background:#f6f7f9;}
  .st-chrome i{width:7px; height:7px; border-radius:50%; background:#d5dce1;}
  .st-chrome span{margin:0 auto; padding:4px 16px; border-radius:100px; background:#fff; border:1px solid #e3e8ec; font-size:10px; color:#62707c;}
  .st-page{padding:22px 22px 20px;}
  .st-eye{display:block; font-size:10px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:#d39a00;}
  .st-h{display:block; margin-top:4px; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:30px; line-height:1.02; text-transform:uppercase; color:#14473a;}
  .st-access{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding:10px 12px; border-radius:8px; background:#eef2f1; font-size:11px; color:#1d4a3e;}
  .st-access em{flex:0 0 auto; padding:6px 12px; border-radius:100px; background:#fff; border:1px solid #dfe5e9; font-style:normal; font-weight:800; color:#0b1a24;}
  .st-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
  .st-course{border:1px solid #e3e8ec; border-radius:8px; overflow:hidden;}
  .st-cover{position:relative; height:150px; background:#0b1a24;}
  .st-cover img{display:block; width:100%; height:100%; object-fit:cover;}
  .st-cover .st-tag{position:absolute; left:8px; bottom:8px;}
  .st-cbody{padding:13px 14px 14px;}
  .st-cbody > b{display:block; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:17px; text-transform:uppercase; color:#14473a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .st-cbody > small{display:block; margin-top:4px; font-size:11.5px; line-height:1.4; color:#5b6b78;}
  .st-buy{display:flex; justify-content:space-between; align-items:center; margin-top:9px; padding-top:9px; border-top:1px solid #f0f2f4;}
  .st-buy b{font-size:18px; font-weight:800; color:#0b1a24;}
  .st-buy em{padding:7px 14px; border-radius:100px; background:#14473a; color:#fff; font-style:normal; font-size:11.5px; font-weight:800;}
  /* Purchase complete card */
  .st-float{position:absolute; z-index:2; right:0; bottom:0; width:290px; padding:16px 18px 10px; background:#fff; border:1px solid #e3e8ec; border-radius:10px;
    box-shadow:0 30px 60px rgba(11,26,36,.22);}
  .st-float-h{display:flex; align-items:center; gap:10px; padding-bottom:12px;}
  .st-float-h > i{display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#1f9d57; color:#fff;}
  .st-float-h > i svg{width:14px; height:14px;}
  .st-float-h b{display:block; font-size:13px; font-weight:800; color:#0b1a24;}
  .st-float-h small{display:block; font-size:10.5px; color:#62707c;}
  .st-lib > small,.st-open > small{display:block; padding:8px 0 4px; border-top:1px solid #eef1f3; font-size:8.5px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:#00726f;}
  .st-lib .st-lib-r:first-of-type{border-top:0;}
  .st-fly.is-in .st-browser{animation:ppRise .95s cubic-bezier(.2,.8,.2,1) .1s both;}
  .st-fly.is-in .st-float{animation:ppSwoop .9s cubic-bezier(.2,.8,.2,1) .6s both;}
  @media (prefers-reduced-motion:reduce){ .st-fly.is-in .st-browser,.st-fly.is-in .st-float{animation:none;} }
  @media (max-width:960px){ .sth{padding-right:44px;} }
  @media (max-width:620px){ .sth{padding:0 16px 150px 0;} .st-cover{height:84px;} .st-h{font-size:22px;} .st-cbody > b{font-size:14px;} .st-float{width:240px;} .st-buy b{font-size:15px;} .st-buy em{padding:5px 9px; font-size:10px; white-space:nowrap;} .st-cbody{padding:10px;} .st-access span{display:none;} .st-meta{display:none;} .st-float{width:230px;} }

/* ---- 1. courses: create → buy → open ---- */
  .st-s1{background:#fff;}
  .st-s1-in{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(36px,6vw,80px); align-items:center; margin-top:48px;}
  .st-steps{padding-left:16px;}
  .st-steps .rs-item{margin-bottom:30px;}
  .st-prog{display:block; width:100%; max-width:380px; height:2px; margin-top:14px; background:#e3e8ec; overflow:hidden;}
  .st-steps .rs-item:not(.on) .st-prog{visibility:hidden;}
  .st-prog i{display:block; height:100%; width:0; background:#007a76; animation:biFill 6s linear forwards;}
  .st-steps.paused .st-prog i{animation-play-state:paused;}
  .st-steps.still .st-prog i{animation:none; width:100%;}
  /* Framed panel like the blog page's use-case cards */
  .st-frame{height:540px; padding:6px; background:#fff; border:1px solid #e6ebef; border-radius:10px; box-shadow:0 1px 2px rgba(11,26,36,.04), 0 24px 48px rgba(11,26,36,.07);}
  .st-frame-in{position:relative; height:100%; overflow:hidden; border-radius:6px; background:#f1f5f7;}
  .st-frame-in::before{content:""; position:absolute; inset:-20%; pointer-events:none;
    background:radial-gradient(45% 45% at 22% 18%, rgba(0,188,183,.34), transparent 70%), radial-gradient(40% 45% at 88% 80%, rgba(255,196,61,.22), transparent 70%);}
  .st-card{position:absolute; left:8%; right:8%; top:36px; bottom:36px; padding:22px; background:#fff; border:1px solid #e3e8ec; border-radius:10px;
    box-shadow:0 24px 50px rgba(11,26,36,.10);}
  .st-panes{position:relative; height:100%;}
  .st-pane{position:absolute; inset:0; opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .5s ease; pointer-events:none;}
  .st-pane.on{opacity:1; transform:none; transition:opacity .55s ease .15s, transform .7s cubic-bezier(.2,.8,.2,1) .15s;}
  .st-pane-h{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid #eef1f3;}
  .st-pane-h b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:18px; text-transform:uppercase; color:#0b1a24;}
  .st-pane-h small{font-size:10.5px; color:#62707c;}
  .st-type{margin-bottom:10px;}
  .st-type span{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .st-type i{display:flex; align-items:center; gap:7px; padding:9px 10px; border:1px solid #dfe5e9; border-radius:7px; font-style:normal; font-size:11.5px; font-weight:700; color:#5b6b78;}
  .st-type i svg{width:14px; height:14px;}
  .st-type i.on{border-color:#007a76; background:#f1fbfa; color:#00726f; box-shadow:inset 0 0 0 1px #007a76;}
  .st-files{margin-bottom:10px;}
  .st-file{display:flex; justify-content:space-between; align-items:center; padding:8px 10px; margin-bottom:6px; border:1px dashed #cfd8de; border-radius:7px; font-size:11px; color:#0b1a24;}
  .st-file span{display:inline-flex; align-items:center; gap:6px;}
  .st-file span svg{width:13px; height:13px; color:#9d6000;}
  .st-file em{display:inline-flex; align-items:center; gap:4px; font-style:normal; font-size:10px; font-weight:800; color:#127c4c;}
  .st-file em svg{width:10px; height:10px;}
  .st-pane-f{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:flex-end; gap:8px;}
  .st-pane-f span,.st-pane-f em{padding:8px 16px; border-radius:100px; font-style:normal; font-size:11.5px; font-weight:800;}
  .st-pane-f span{border:1px solid #dfe5e9; color:#0b1a24;}
  .st-pane-f em{background:#007a76; color:#fff;}
  /* course page */
  .st-detail-h{display:grid; grid-template-columns:1fr 128px; gap:14px; align-items:start; padding-bottom:14px; border-bottom:1px solid #eef1f3;}
  .st-detail-h b{display:block; margin-top:8px; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:26px; line-height:1; text-transform:uppercase; color:#14473a;}
  .st-detail-h small{display:block; margin-top:6px; font-size:11px; line-height:1.45; color:#5b6b78;}
  .st-detail-h img{width:100%; height:96px; object-fit:cover; border-radius:8px;}
  .st-inc{display:block; margin:14px 0 8px; font-size:9px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; color:#5b6b78;}
  .st-files2{border:1px solid #e3e8ec; border-radius:8px; overflow:hidden;}
  .st-files2 div{display:flex; align-items:center; gap:10px; padding:10px 12px; font-size:11.5px; font-weight:700; color:#14473a;}
  .st-files2 div + div{border-top:1px solid #f0f2f4;}
  .st-files2 i{display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#eef1f3; font-style:normal; font-size:9.5px; color:#5b6b78;}
  .st-files2 span{flex:1;}
  .st-files2 svg{width:13px; height:13px; color:#62707c;}
  .st-cta{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-radius:8px; background:#f6f9fa;}
  .st-cta b{display:block; font-size:20px; font-weight:800; color:#0b1a24;}
  .st-cta small{display:block; font-size:10px; color:#62707c;}
  .st-cta em{padding:9px 18px; border-radius:100px; background:#14473a; color:#fff; font-style:normal; font-size:12px; font-weight:800;}
  /* library code */
  .st-mailbar{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; background:#f1fbfa; border:1px solid #bfe9e5; color:#00726f;}
  .st-mailbar svg{width:16px; height:16px;}
  .st-mailbar b{display:block; font-size:11.5px; font-weight:800; color:#0b1a24;}
  .st-mailbar small{display:block; font-size:10px; color:#5b6b78;}
  .st-code-h{display:block; margin-top:16px; font-size:16px; font-weight:800; color:#0b1a24;}
  .st-code-s{display:block; margin-top:3px; font-size:11px; color:#5b6b78;}
  .st-digits{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:12px;}
  .st-digits i{display:flex; align-items:center; justify-content:center; height:42px; border:1px solid #dfe5e9; border-radius:8px; font-style:normal; font-size:18px; font-weight:800;
    color:#0b1a24; opacity:0; transform:translateY(4px);}
  .st-pane.on .st-digits i{animation:stDigit .35s ease forwards; animation-delay:calc(.5s + var(--d) * .18s);}
  @keyframes stDigit{to{opacity:1; transform:none; border-color:#007a76;}}
  .st-open{margin-top:16px; opacity:0;}
  .st-pane.on .st-open{animation:stShow .5s ease 1.8s forwards;}
  @keyframes stShow{to{opacity:1;}}
  @media (max-width:960px){ .st-s1-in{grid-template-columns:1fr;} }
  @media (max-width:560px){ .st-frame{height:560px;} .st-card{left:4%; right:4%; top:18px; bottom:18px; padding:16px;} .st-detail-h{grid-template-columns:1fr;} .st-detail-h img{display:none;} }
  @media (prefers-reduced-motion:reduce){ .st-pane,.st-pane.on{transition:none;} .st-digits i,.st-open{opacity:1; transform:none; animation:none !important;} }

/* ---- 2. formats ---- */
  .st-s2{background:#f6f9fa;}
  .st-duo{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px;}
  .st-fmt{padding:24px; background:#fff; border:1px solid #e3e8ec; border-radius:12px; box-shadow:0 1px 2px rgba(11,26,36,.04), 0 24px 50px rgba(11,26,36,.07);}
  .st-fmt-h{display:flex; align-items:center; gap:12px;}
  .st-fmt-h .st-lib-ic{width:40px; height:40px; border-radius:10px;}
  .st-fmt-h .st-lib-ic svg{width:19px; height:19px;}
  .st-fmt-h b{display:block; font-size:18px; font-weight:800; color:#0b1a24;}
  .st-fmt-h small{display:block; font-size:13px; color:#5b6b78;}
  .st-player{position:relative; height:180px; margin-top:20px; border-radius:10px; overflow:hidden;}
  /* The player stays a quiet light gray so it doesn't compete with the playlist */
  .st-player{border:1px solid #e3e8ec;}
  .st-player .st-art{background:#eef1f4;}
  .st-player .st-art::before{display:none;}
  .st-player .st-art i{box-shadow:0 6px 14px rgba(0,188,183,.25);}
  .st-bar{position:absolute; left:14px; right:14px; bottom:12px; height:4px; border-radius:100px; background:#d9dfe4;}
  .st-bar i{display:block; width:38%; height:100%; border-radius:100px; background:#007a76;}
  .st-lessons{margin-top:14px;}
  .st-lessons div{display:flex; align-items:center; gap:12px; padding:10px 6px; border-bottom:1px solid #f0f2f4; font-size:13px; color:#3b4a57;}
  .st-lessons div:last-child{border-bottom:0;}
  .st-lessons div.on{background:#f1fbfa; border-radius:6px; color:#0b1a24; font-weight:700;}
  .st-lessons i{flex:0 0 22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#eef1f3; font-style:normal; font-size:10.5px; font-weight:800; color:#5b6b78;}
  .st-lessons div.on i{background:#007a76; color:#fff;}
  .st-lessons span{flex:1;}
  .st-lessons em{margin-left:8px; padding:2px 8px; border-radius:100px; background:#e7f6ee; color:#127c4c; font-style:normal; font-size:10.5px; font-weight:800;}
  .st-lessons small{font-size:12px; color:#62707c; font-variant-numeric:tabular-nums;}
  .st-pdf{position:relative; height:180px; margin-top:20px; border-radius:10px; overflow:hidden; background:linear-gradient(160deg, #fff8e6, #fdeccc);}
  .st-sheet{position:absolute; top:22px; width:150px; height:190px; padding:16px 14px; background:#fff; border-radius:4px; box-shadow:0 14px 30px rgba(120,80,0,.18);}
  .st-sheet.b{left:calc(50% - 50px); transform:rotate(7deg);}
  .st-sheet.a{left:calc(50% - 100px); transform:rotate(-4deg);}
  .st-sheet b{display:block; margin-bottom:10px; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:13px; text-transform:uppercase; color:#14473a;}
  .st-sheet i{display:block; height:5px; margin-bottom:7px; border-radius:100px; background:#e6ebef;}
  .st-sheet i.s{width:60%;}
  .st-sheet span{display:block; height:36px; margin:4px 0 10px; border-radius:4px; background:#ffc43d; opacity:.55;}
  .st-pdf-l{margin-top:14px;}
  .st-pdf-l div{display:flex; align-items:center; gap:12px; padding:10px 6px; border-bottom:1px solid #f0f2f4; font-size:13px; color:#0b1a24;}
  .st-pdf-l div:last-child{border-bottom:0;}
  .st-pdf-l span{flex:1; display:flex; align-items:center; gap:8px; font-weight:700;}
  .st-pdf-l span svg{width:15px; height:15px; color:#9d6000;}
  .st-pdf-l small{font-size:12px; color:#62707c;}
  .st-pdf-l em{display:flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:7px; border:1px solid #dfe5e9; color:#0b1a24;}
  .st-pdf-l em svg{width:13px; height:13px;}
  @media (max-width:860px){ .st-duo{grid-template-columns:1fr;} }

/* ---- 3. portal ---- */
  .st-s3{background:#fff;}
  .st-win{margin-top:48px; background:#f6f7f9; border:1px solid #dde3e8; border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(11,26,36,.04), 0 30px 70px rgba(11,26,36,.10);}
  .st-win-h{display:flex; align-items:baseline; gap:12px; padding:16px 22px; background:#fff; border-bottom:1px solid #e9eef1;}
  .st-dots{display:flex; gap:6px; margin-right:6px; align-self:center;}
  .st-dots i{width:9px; height:9px; border-radius:50%; background:#dde3e8;}
  .st-win-h b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:20px; text-transform:uppercase; color:#262d36;}
  .st-win-h small{font-size:12px; color:#62707c;}
  .st-win-b{padding:20px 22px 24px;}
  .st-tabs{display:inline-flex; gap:4px; padding:5px; border-radius:10px; background:#fff; box-shadow:0 1px 3px rgba(11,26,36,.08);}
  .st-tabs span{padding:7px 14px; border-radius:7px; font-size:12.5px; font-weight:700; color:#3b4a57;}
  .st-tabs span.on{background:#007a76; color:#fff;}
  .st-lib-head{display:flex; justify-content:space-between; align-items:center; margin-top:20px;}
  .st-lib-head b{position:relative; padding-left:12px; font-size:16px; font-weight:800; color:#0b1a24;}
  .st-lib-head b::before{content:""; position:absolute; left:0; top:2px; bottom:2px; width:3px; border-radius:2px; background:#007a76;}
  .st-lib-head em{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:100px; background:#1f9d57; color:#fff; font-style:normal; font-size:12px; font-weight:800;}
  .st-lib-head em svg{width:12px; height:12px;}
  .st-note{display:flex; align-items:center; gap:9px; margin-top:14px; padding:10px 14px; border-radius:8px; background:#ecfaf9; border:1px solid #bfe9e5; font-size:12px; color:#00726f;}
  .st-note svg{flex:0 0 14px; width:14px; height:14px;}
  .st-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
  .st-cc{padding:16px 18px 14px; background:#fff; border:1px solid #e6ebef; border-radius:10px;}
  .st-cc-h{display:flex; align-items:center; gap:10px;}
  .st-cc-h .st-lib-ic{width:36px; height:36px;}
  .st-cc-h > span:nth-child(2){flex:1; min-width:0;}
  .st-cc-h b{display:block; font-size:14px; font-weight:800; color:#0b1a24; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .st-cc-h small{display:block; font-size:11.5px; color:#62707c;}
  .st-cc-h em{padding:3px 10px; border-radius:100px; background:#ecfaf9; border:1px solid #bfe9e5; color:#00726f; font-style:normal; font-size:10.5px; font-weight:800;}
  .st-cc p{margin:10px 0 0; font-size:12px; color:#5b6b78;}
  .st-stats{display:grid; grid-template-columns:repeat(3,1fr); margin-top:12px; padding:12px 0; border-top:1px solid #eef1f3; border-bottom:1px solid #eef1f3; text-align:center;}
  .st-stats b{display:block; font-size:15px; font-weight:800; color:#0b1a24; font-variant-numeric:tabular-nums;}
  .st-stats small{display:block; font-size:10.5px; color:#62707c;}
  .st-stats span.bump b{animation:stBump .5s ease;}
  @keyframes stBump{40%{color:#1f9d57; transform:scale(1.15);} 100%{transform:none;}}
  .st-cc-f{display:flex; gap:14px; margin-top:10px; font-size:12px; font-weight:800; color:#00726f;}
  .st-cc-f .del{color:#d12f3f;}
  .em-inc-grid.st-three{grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(56px,7vw,80px);}
  @media (max-width:960px){
    .em-inc-grid.st-three{grid-template-columns:1fr; row-gap:36px;} .st-three .em-inc-col{padding-left:0;} .st-three .em-inc-col::before{display:none;}
    .st-three .em-inc-col b::before{left:-14px;}
  }
  @media (max-width:700px){ .st-cards{grid-template-columns:1fr;} .st-cards .st-cc:nth-child(n+3){display:none;} .st-win-h small{display:none;} .st-win-b{padding:16px 14px;}
    .st-tabs span:nth-child(n+3){display:none;} .st-note{display:none;} }
  @media (prefers-reduced-motion:reduce){ .st-stats span.bump b{animation:none;} }

/* ---- 4. add-ons ---- */
  .st-s4{background:#f6f9fa;}
  .st-s4-top{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:end;}
  .st-s4-top .rs-checks{margin:0 0 8px;}
  .st-pair{display:grid; grid-template-columns:minmax(0,1.15fr) 40px minmax(0,.85fr); align-items:center; margin-top:48px;}
  .st-join{display:flex; justify-content:center; color:#9fb0bc;}
  .st-join svg{width:18px; height:18px;}
  .st-ed{padding:20px 22px 12px; background:#faf8f3; border:1px solid #ece6d8; border-left:4px solid #f0900c; border-radius:10px; box-shadow:0 24px 50px rgba(11,26,36,.08);}
  .st-ed-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;}
  .st-ed-h b{font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#d27b00;}
  .st-ed-h small{font-size:11px; color:#62707c;}
  .st-amt,.st-cat,.st-choice{margin-bottom:12px;}
  .st-seg{display:inline-flex; gap:4px;}
  .st-seg i{padding:6px 12px; border-radius:100px; border:1px solid #dfe5e9; background:#fff; font-style:normal; font-size:11px; font-weight:800; color:#0b1a24;}
  .st-seg i.on{background:#007a76; border-color:#007a76; color:#fff;}
  .st-money{display:flex; align-items:center; gap:6px; width:160px; margin-top:8px; padding:8px 10px; border:1px solid #dfe5e9; border-radius:6px; background:#fff; font-size:11px; color:#62707c;}
  .st-money b{font-size:12px; color:#0b1a24;}
  .st-sel{display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border:1px solid #dfe5e9; border-radius:6px; background:#fff; font-size:12px; font-weight:800; color:#0b1a24;}
  .st-sel svg{width:12px; height:12px; color:#5b6b78;}
  .st-opts{margin-top:4px; padding:4px; border-radius:8px; background:#fff; box-shadow:0 10px 24px rgba(11,26,36,.12);}
  .st-opts span{display:block; padding:7px 10px; border-radius:6px; font-size:11.5px; font-weight:700; color:#0b1a24;}
  .st-opts span.on{background:#007a76; color:#fff;}
  .st-cat p{margin:6px 0 0; font-size:10.5px; color:#62707c;}
  .st-sizes{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
  .st-sizes i{padding:4px 10px; border-radius:6px; border:1px solid #dfe5e9; background:#fff; font-style:normal; font-size:11px; font-weight:800; color:#0b1a24;}
  .st-co{padding:20px 20px 18px; background:#fff; border:1px solid #e3e8ec; border-radius:12px; box-shadow:0 1px 2px rgba(11,26,36,.04), 0 30px 60px rgba(11,26,36,.12);}
  .st-co-h{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:12px; border-bottom:1px solid #eef1f3;}
  .st-co-h b{font-size:16px; font-weight:800; color:#0b1a24;}
  .st-co-h small{font-size:11px; color:#62707c;}
  .st-co-camp{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid #eef1f3;}
  .st-co-camp b{display:block; font-size:13px; font-weight:800; color:#0b1a24;}
  .st-co-camp small{display:block; font-size:11px; color:#62707c;}
  .st-co-k{display:block; margin:12px 0 6px; font-size:9.5px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:#00726f;}
  .st-ao{display:flex; align-items:center; gap:10px; margin-bottom:6px; padding:10px 12px; border:1px solid #e6ebef; border-radius:8px; transition:background .3s, border-color .3s;}
  .st-ao > span{flex:1;}
  .st-ao b{display:block; font-size:12.5px; font-weight:800; color:#0b1a24;}
  .st-ao small{display:block; font-size:10.5px; color:#62707c;}
  .st-ao em{font-style:normal; font-size:12.5px; font-weight:800; color:#0b1a24;}
  .st-box{flex:0 0 16px; height:16px; display:flex; align-items:center; justify-content:center; border:1.5px solid #c9d2d9; border-radius:4px; background:#fff; color:#fff; transition:background .25s, border-color .25s;}
  .st-box svg{width:10px; height:10px; opacity:0; transition:opacity .2s;}
  .st-ao.on{background:#f1fbfa; border-color:#9fe0dc;}
  .st-ao.on .st-box{background:#007a76; border-color:#007a76;}
  .st-ao.on .st-box svg{opacity:1;}
  .st-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; padding-top:12px; border-top:1px solid #eef1f3; font-size:13px; font-weight:700; color:#5b6b78;}
  .st-total b{font-size:22px; font-weight:800; color:#0b1a24; font-variant-numeric:tabular-nums;}
  .st-pay{display:block; margin-top:12px; padding:11px; border-radius:100px; background:#0b1a24; color:#fff; text-align:center; font-size:12.5px; font-weight:800;}
  @media (max-width:960px){ .st-s4-top{grid-template-columns:1fr; gap:20px;} .st-pair{grid-template-columns:1fr;} .st-join{padding:8px 0; transform:rotate(90deg);} }
  @media (max-width:560px){ .st-ed{padding:16px 14px 8px;} .st-ed-h small{display:none;} .st-seg i{padding:6px 9px; font-size:10px;} }

/* shared */
  .sk-faq{background:#fff;}
  .sk-faq-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.9fr); gap:clamp(32px,5vw,64px); align-items:start;}
  .sk-faq-h{margin:0; font-size:clamp(24px,2.3vw,30px); font-weight:500; line-height:1.25; letter-spacing:-.02em; color:#7a8a97;}
  .sk-faq-h b{display:block; font-weight:700; color:#0b1a24;}
  .sk-faq-list{border-top:1px solid #e6ebef;}
  .sk-qa{border-bottom:1px solid #e6ebef;}
  .sk-qa button:hover span{color:#00726f;}
  .sk-qa button:focus-visible{outline:2px solid #007a76; outline-offset:4px; border-radius:6px;}
  .sk-qa button span{transition:color .2s;}
  .sk-qa button i svg{width:14px; height:14px;}
  .sk-qa button i .v{transform-origin:center; transition:transform .3s cubic-bezier(.2,.8,.2,1);}
  .sk-qa.open button i{background:#007a76; color:#fff;}
  .sk-qa.open button i .v{transform:scaleY(0);}
  .sk-qa-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1);}
  .sk-qa-a > div{overflow:hidden;}
  .sk-qa-a p{margin:0; padding:0 56px 24px 0; font-size:16px; line-height:1.65; color:#5b6b78;}
  .sk-qa.open .sk-qa-a{grid-template-rows:1fr;}
  @media (max-width:860px){ .sk-faq-in{grid-template-columns:1fr; gap:28px;} .sk-qa-a p{padding-right:0;} }
  @media (prefers-reduced-motion:reduce){ .sk-qa-a,.sk-qa button i .v{transition:none;} }
  .em-inc{background:#fff;}
  .em-inc-grid{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:48px;}
  .em-inc-col{position:relative; padding:0 26px 8px 0;}
  .em-inc-col + .em-inc-col{padding-left:26px;}
  .em-inc-col + .em-inc-col::before{content:""; position:absolute; left:0; top:-24px; bottom:-24px; border-left:1px dashed #dfe5ea;}
  .em-inc-ic svg{display:block; width:22px; height:22px;}
  .em-inc-col b{position:relative; display:block; font-size:16.5px; font-weight:800; line-height:1.35; color:#0b1a24;}
  .em-inc-col b::before{content:""; position:absolute; left:-27px; top:3px; width:2px; height:18px; background:#007a76;}
  .em-inc-col:first-child b::before{left:-14px;}
  .em-inc-col p{margin-top:10px; font-size:15px; line-height:1.65; color:var(--sc-muted);}
    .em-inc-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
    .em-inc-col:nth-child(3){padding-left:0;} .em-inc-col:nth-child(3)::before{display:none;}
    .em-inc-grid{grid-template-columns:1fr;}
    .em-inc-col + .em-inc-col{padding-left:0;} .em-inc-col + .em-inc-col::before{display:none;}
    .em-inc-col b::before{left:-14px;}
  .rs{border-top:1px solid var(--border,#e5e7eb);}
  .rs .pc-sh,.ws-section .pc-sh{max-width:900px; margin-top:12px; font-size:clamp(26px,2.9vw,38px); font-weight:500; line-height:1.22; letter-spacing:-.02em; color:#7a8a97;}
  .rs .pc-sh b,.ws-section .pc-sh b{font-weight:700; color:#0b1a24;}
  .rs .pc-sh.c,.ws-section .pc-sh.c{margin-left:auto; margin-right:auto; text-align:center;}
  .rs-two .rs-checks{margin-top:26px;}
  .rs-two .rs-checks li{font-size:15.5px;}
  .rs-checks{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
  .rs-checks li{display:flex; align-items:center; gap:10px; font-size:14.5px; color:#3b4a57;}
  .rs-checks svg{flex:0 0 18px; width:18px; height:18px; padding:3px; border-radius:50%; background:rgba(0,188,183,.16); color:var(--sc-teal-ink);}
.st-link{display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:#00726f; text-decoration:none;}
.st-link:hover{color:#00605d;}
.pc-arr{width:10px; height:10px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.pc-arr-l{opacity:0; transition:opacity .15s;} .pc-arr-h{transition:transform .15s;}
.st-link:hover .pc-arr-l{opacity:1;} .st-link:hover .pc-arr-h{transform:translateX(3px);}
.st-hero .st-link svg.pc-arr{width:10px !important; height:10px !important;}
#features-store .sk-qa-a{display:grid !important; grid-template-rows:0fr !important;}
#features-store .sk-qa.open .sk-qa-a{grid-template-rows:1fr !important;}
#features-store .sk-qa-a > div{overflow:hidden; min-height:0;}
/* FAQ buttons (the shared accordion's multi-line rules were not carried over) */
#features-store .sk-qa button{display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:22px 0; border:0; background:none; font:inherit; font-size:17px; font-weight:600; color:var(--pc-ink); text-align:left; cursor:pointer;}
#features-store .sk-qa button:hover span{color:#00726f;}
#features-store .sk-qa button i{flex:0 0 30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#eef6f5; color:#007a76; font-style:normal;}
#features-store .sk-qa button i svg{width:14px; height:14px;}
#features-store .sk-qa.open button i{background:#007a76; color:#fff;}
#features-store .sk-qa button:focus-visible{outline:2px solid #007a76; outline-offset:4px; border-radius:6px;}

/* ==== hero: a shelf of course covers drifting in three columns ==== */
.sh2-hero{overflow:hidden;}
.sh2-hero .pc-hero-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important; align-items:center;}
.sh2{position:relative; height:620px; margin:-40px 0 -40px;}
.sh2::before{content:""; position:absolute; inset:6% -10% 6% 0; z-index:0; border-radius:50%; filter:blur(50px); opacity:.55;
  background:radial-gradient(45% 50% at 35% 45%, rgba(20,163,155,.35), transparent 70%), radial-gradient(40% 45% at 70% 60%, rgba(140,124,240,.28), transparent 70%), radial-gradient(35% 40% at 55% 20%, rgba(242,166,90,.22), transparent 70%);}
.sh2-tilt{position:absolute; inset:-60px -140px -60px 20px; display:grid; grid-template-columns:repeat(3,236px); gap:18px; justify-content:start; transform:rotate(-9deg) skewX(4deg); transform-origin:40% 50%;
  -webkit-mask:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent); mask:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);}
.sh2-col{overflow:visible;} .sh2-col.k1{margin-top:-120px;} .sh2-col.k2{margin-top:-40px;}
.sh2-tr{display:flex; flex-direction:column; gap:18px;}
@media (prefers-reduced-motion:no-preference){
  .sh2-col.k0 .sh2-tr{animation:sh2-up 46s linear infinite;} .sh2-col.k1 .sh2-tr{animation:sh2-up 58s linear infinite reverse;} .sh2-col.k2 .sh2-tr{animation:sh2-up 52s linear infinite;}
}
@keyframes sh2-up{from{transform:translateY(0);} to{transform:translateY(calc(-50% - 9px));}}
.sh2-c{border-radius:12px; background:#fff; overflow:hidden; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 18px 36px -22px rgba(13,27,42,.35);}
.sh2-c .cv{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#0b1a24;}
.sh2-c .cv img{width:100%; height:100%; object-fit:cover; display:block;}
.sh2-c .pl{position:absolute; left:50%; top:50%; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.92); color:#0b1a24; box-shadow:0 6px 16px rgba(0,0,0,.25);}
.sh2-c .pl svg{width:16px; height:16px; margin-left:2px;}
.sh2-c .vid.t1{background:radial-gradient(80% 90% at 20% 10%,#2bb3a9,transparent 60%),linear-gradient(135deg,#0b3b44,#0b1a24);}
.sh2-c .vid.t2{background:radial-gradient(80% 90% at 80% 20%,#f2a65a,transparent 60%),linear-gradient(135deg,#3b2a5c,#0b1a24);}
.sh2-c .vid.t3{background:radial-gradient(80% 90% at 30% 90%,#7c8cf0,transparent 60%),linear-gradient(135deg,#123a5a,#0b1a24);}
.sh2-c .pdf{display:grid; place-items:center;} .sh2-c .pdf.p1{background:#fbf3e3;} .sh2-c .pdf.p2{background:#eaf4f3;} .sh2-c .pdf.p3{background:#f1effb;}
.sh2-c .pg{display:block; width:46%; aspect-ratio:3/4; padding:10px 9px; border-radius:3px; background:#fff; box-shadow:0 10px 20px -8px rgba(13,27,42,.3); transform:rotate(-4deg) translateY(8px);}
.sh2-c .pg b{display:block; margin-bottom:6px; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:9px; line-height:1.1; color:#00605d; text-transform:uppercase;}
.sh2-c .pg s{display:block; height:3px; margin-top:4px; border-radius:2px; background:#e3e8ee;} .sh2-c .pg s.h{height:10px; background:#fde3b4;}
.sh2-b{padding:11px 13px 12px;}
.sh2-b .tg{display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#00726f;}
.sh2-b b{display:block; margin-top:3px; font-size:13.5px; font-weight:600; color:#0b1a24; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sh2-b small{display:block; margin-top:2px; font-size:11px; color:#62707c;}
.sh2-p{display:flex; justify-content:space-between; align-items:center; margin-top:10px;}
.sh2-p span{font-size:14px; font-weight:600; color:#0b1a24;} .sh2-p em{font-style:normal; padding:5px 10px; border-radius:7px; background:#0b1a24; color:#fff; font-size:10.5px; font-weight:600;}
/* the purchase lands */
.sh2-buy{position:absolute !important; left:auto !important; right:6% !important; top:auto !important; bottom:9% !important; z-index:3; width:280px !important; transform:none;}
@media (prefers-reduced-motion:no-preference){ .sh2-buy{animation:sh2-buy 9s cubic-bezier(.2,.8,.2,1) infinite;} }
@keyframes sh2-buy{0%,8%{opacity:0; transform:translateY(18px) scale(.98);} 16%,82%{opacity:1; transform:none;} 92%,100%{opacity:0; transform:translateY(-8px);}}
@media (max-width:1000px){ .sh2-hero .pc-hero-in{grid-template-columns:minmax(0,1fr) !important;} .sh2{height:460px; margin:10px -20px -40px;} .sh2-tilt{inset:-80px -200px -60px -40px; grid-template-columns:repeat(3,200px);} .sh2-buy{right:16px !important; bottom:24px !important; width:250px !important;} }
@media (max-width:560px){ .sh2{height:400px;} .sh2-tilt{grid-template-columns:repeat(3,170px); gap:12px;} .sh2-tr{gap:12px;} .sh2-b b{font-size:12px;} }
/* the hero keeps a quiet ground: no diagonal slab (Camp Day has the band) */
.sh2-hero{background:linear-gradient(180deg,#fbfcfe,#f5f8fb) !important;}
.sh2-hero::before, .sh2-hero::after{display:none !important;}

/* ==== courses: big words, and a deck of the three screens ==== */
.st-s1{background:#fff !important;}
.st-s1 .st-steps{padding-left:0;}
.st-s1 .rs-item{display:block; width:100%; margin:0 0 6px !important; padding:6px 0 14px; border:0 !important; background:none !important; text-align:left; box-shadow:none !important; cursor:pointer;}
.st-s1 .rs-item::before, .st-s1 .rs-item::after{display:none !important;}
.st-s1 .rs-item b{display:block; font-size:clamp(46px,5.4vw,72px); font-weight:300; line-height:1.02; letter-spacing:-.035em; color:#748ba0; transition:color .5s ease;}
.st-s1 .rs-item.on b, .st-s1 .rs-item:hover b{color:#0b1a24;}
.st-s1 .rs-item.on b{background:linear-gradient(90deg,#0b1a24,#00605d); -webkit-background-clip:text; background-clip:text; color:transparent;}
.st-s1 .rs-item p{display:grid; grid-template-rows:0fr; margin:0; max-width:380px; font-size:15px; line-height:1.55; color:#56677a; opacity:0; transition:opacity .4s ease, margin .4s ease;}
.st-s1 .rs-item.on p{opacity:1; margin-top:10px;}
.st-s1 .rs-item:not(.on) p{height:0; overflow:hidden;}
.st-s1 .st-prog{display:block; height:2px; max-width:380px; margin-top:14px; background:#eef1f4; border-radius:2px; overflow:hidden;}
.st-s1 .st-prog i{display:block; height:100%; background:#007a76;}
/* the deck */
.st-s1 .st-frame{height:560px; padding:0; background:none; border:0; box-shadow:none;}
.st-s1 .st-frame-in{background:none; overflow:visible;}
.st-s1 .st-frame-in::before{display:none;}
.st-s1 .st-card{left:4%; right:4%; top:96px; bottom:8px; padding:0; background:none; border:0; box-shadow:none;}
.st-s1 .st-panes{height:100%;}
.st-s1 .st-pane{--d:1; opacity:1 !important; pointer-events:none; padding:24px 24px 22px; border-radius:16px; background:#fff;
  box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 30px 60px -30px rgba(13,27,42,.35);
  transform:translateY(calc(var(--d) * -44px)) scale(calc(1 - var(--d) * .06)); transform-origin:50% 0; z-index:calc(3 - var(--d));
  filter:saturate(calc(1 - var(--d) * .35)); transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .6s ease, box-shadow .6s ease !important;}
.st-s1 .st-pane > *{transition:opacity .4s ease;}
.st-s1 .st-pane:not(.on) > *:not(.st-pane-h){opacity:.25;}
.st-s1 .st-pane:not(.on) .st-pane-h{opacity:.7;}
.st-s1 .st-pane.on{box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 40px 80px -30px rgba(13,27,42,.4);}
.st-s1 .st-pane-f{left:24px; right:24px; bottom:22px;}
.st-s1 .st-frame::after{content:""; position:absolute; left:10%; right:10%; bottom:-14px; height:40px; border-radius:50%; background:radial-gradient(closest-side, rgba(13,27,42,.14), transparent); z-index:-1;}
.st-s1 .st-frame{position:relative;}
@media (max-width:900px){ .st-s1 .st-s1-in{grid-template-columns:minmax(0,1fr) !important;} .st-s1 .rs-item b{font-size:48px;} .st-s1 .st-frame{height:600px;} }
@media (max-width:560px){ .st-s1 .st-frame{height:620px;} .st-s1 .st-card{left:0; right:0; top:84px;} .st-s1 .st-pane{padding:18px 16px;} .st-s1 .st-pane-f{left:16px; right:16px; bottom:16px;} .st-s1 .rs-item b{font-size:42px;} }
.st-s1 .rs-item b::before, .st-s1 .rs-item b::after, .st-s1 .rs-item::before, .st-s1 .rs-item::after{display:none !important; content:none !important;}

/* ==== formats: chaptered player + transcript; a PDF whose pages turn ==== */
.st-s2{background:#f6f9fc !important;}
.fm2{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr); gap:28px; margin-top:52px; align-items:stretch;}
.fm2-v, .fm2-p{padding:20px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 24px 48px -32px rgba(13,27,42,.3);}
.fm2-hd{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.fm2-hd .ic{display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:#fff4dc; color:#9d6000;} .fm2-hd .ic.v{background:#e9f8f6; color:#00726f;}
.fm2-hd .ic svg{width:17px; height:17px;}
.fm2-hd b{display:block; font-size:15px; font-weight:600; color:#0b1a24;} .fm2-hd small{display:block; font-size:12px; color:#62707c;}
.fm2-pl{position:relative; aspect-ratio:16/8.4; border-radius:12px; overflow:hidden; background:#0b1a24;}
.fm2-pl img{width:100%; height:100%; object-fit:cover; display:block; object-position:50% 35%;}
.fm2-pl .sh{position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,14,20,0) 45%,rgba(8,14,20,.72));}
.fm2-now{position:absolute; left:16px; bottom:40px; color:#fff;}
.fm2-now small{display:block; font-size:11px; color:rgba(255,255,255,.75);} .fm2-now small b{color:#fff;}
.fm2-now > b{display:block; font-size:17px; font-weight:600; transition:opacity .3s;}
.fm2-sc{position:absolute; left:16px; right:96px; bottom:18px; display:flex; gap:4px;}
.fm2-sc > i{position:relative; height:4px; border-radius:3px; background:rgba(255,255,255,.3); overflow:hidden;}
.fm2-sc > i > i{position:absolute; inset:0 auto 0 0; width:0; background:#fff;}
.fm2-tm{position:absolute; right:16px; bottom:12px; font-size:11px; color:rgba(255,255,255,.85); font-variant-numeric:tabular-nums;}
.fm2-low{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:16px; margin-top:16px;}
.fm2-ls .r{display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 8px; border-radius:8px; font-size:12.5px; color:#56677a; transition:background-color .4s;}
.fm2-ls .r i{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#f1f4f7; font-style:normal; font-size:10px; font-weight:600;}
.fm2-ls .r span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fm2-ls .r em{margin-left:6px; padding:1px 7px; border-radius:20px; background:#eaf7ef; color:#1a874b; font-style:normal; font-size:10px; font-weight:600;}
.fm2-ls .r small{font-size:11px; color:#62707c; font-variant-numeric:tabular-nums;}
.fm2-ls .r.on{background:#f0f8f7; color:#0b1a24;} .fm2-ls .r.on i{background:#007a76; color:#fff;}
.fm2-tx{padding:12px 14px; border-radius:10px; background:#f6f9fc;}
.fm2-tx small{display:block; margin-bottom:8px; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#62707c;}
.fm2-tx .ln p{margin:0 0 6px; font-size:12.5px; line-height:1.5; color:#62707c; transition:color .35s ease;}
.fm2-tx .ln p.on{color:#0b1a24;}
.fm2-tx .ln p.on::before{content:""; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:2px; background:#007a76; vertical-align:1px;}
/* the PDF */
.fm2-p{display:flex; flex-direction:column;}
.fm2-st{position:relative; flex:1; min-height:250px; margin:4px 0 16px; border-radius:12px; background:#fbf3e3; perspective:900px;}
.fm2-st .pg{position:absolute; left:50%; top:50%; width:48%; aspect-ratio:3/4; margin:0; padding:14px 12px; border-radius:4px; background:#fff;
  box-shadow:0 14px 28px -12px rgba(13,27,42,.35); transform-origin:0 50%; transition:transform .9s cubic-bezier(.4,.1,.2,1), opacity .5s ease;
  transform:translate(-50%,-50%) translate(calc(var(--k,0) * 10px), calc(var(--k,0) * -8px)) rotate(calc(-3deg + var(--k,0) * 4deg)); z-index:calc(5 - var(--k,0));}
.fm2-st .pg.turn{transform:translate(-50%,-50%) rotateY(-110deg); opacity:0;}
.fm2-st .pg b{display:block; margin-bottom:8px; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:12px; line-height:1.1; text-transform:uppercase; color:#00605d;}
.fm2-st .pg s{display:block; height:4px; margin-top:6px; border-radius:2px; background:#e3e8ee;} .fm2-st .pg s.h{height:16px; background:#fde3b4;} .fm2-st .pg s.w{width:60%;}
.fm2-st .pg span{position:absolute; right:10px; bottom:8px; font-size:9px; color:#62707c;}
.fm2-fl .r{display:grid; grid-template-columns:minmax(0,1fr) auto 28px; align-items:center; gap:10px; padding:9px 4px; border-top:1px solid #eef1f4; font-size:12.5px; color:#0b1a24;}
.fm2-fl .r span{display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden;} .fm2-fl .r span svg{flex:none; width:14px; height:14px; color:#c0344d;}
.fm2-fl .r small{font-size:11px; color:#62707c;}
.fm2-fl .r em{display:grid; place-items:center; width:28px; height:28px; border-radius:7px; box-shadow:inset 0 0 0 1px #e3e8ee; color:#56677a; transition:background-color .3s, color .3s;}
.fm2-fl .r em svg{width:13px; height:13px;} .fm2-fl .r.on em{background:#007a76; color:#fff; box-shadow:none;}
@media (max-width:960px){ .fm2{grid-template-columns:minmax(0,1fr);} }
@media (max-width:560px){ .fm2-v, .fm2-p{padding:14px;} .fm2-low{grid-template-columns:minmax(0,1fr);} .fm2-pl{aspect-ratio:16/10;} .fm2-now > b{font-size:15px;} }

/* ==== management: the library with its sales ledger laid over the corner ==== */
.st-s3{background:#fff !important;}
.mg2{position:relative; margin-top:48px; padding:0 0 70px;}
.mg2 .st-win{margin:0 14% 0 0 !important; box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 30px 60px -36px rgba(13,27,42,.3) !important;}
.mg2-led{position:absolute; right:0; bottom:0; z-index:2; width:min(520px,52%); padding:16px 18px 10px; border-radius:14px; background:#fff;
  box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 36px 70px -26px rgba(13,27,42,.42);}
.mg2-led .h{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:10px;}
.mg2-led .h b{font-size:14px; font-weight:600; color:#0b1a24;} .mg2-led .h small{font-size:11.5px; color:#62707c;}
.mg2-led .r{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 70px 58px; gap:10px; align-items:center; padding:9px 0; border-top:1px solid #eef1f4; font-size:12px; color:#3b4a57;}
.mg2-led .r span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .mg2-led .r span:nth-child(3){font-variant-numeric:tabular-nums; color:#0b1a24; font-weight:500;}
.mg2-led .r.hd{padding:7px 0; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#62707c;}
.mg2-led .r i{font-style:normal; padding:2px 8px; border-radius:6px; background:#eaf7ef; color:#1a874b; font-size:11px; font-weight:500;}
.mg2-led .rows{display:flex; flex-direction:column;}
.mg2-led .rows .r.new{animation:mg2-in .7s cubic-bezier(.2,.8,.2,1);}
.mg2-led .rows .r.new span:first-child{color:#0b1a24; font-weight:600;}
@keyframes mg2-in{from{opacity:0; transform:translateY(-10px); background:#f0f8f7;} 40%{background:#f0f8f7;} to{opacity:1; transform:none; background:transparent;}}
/* the three points: plain rows with a teal tick, no icon tiles */
.st-s3 .st-three{margin-top:44px !important;}
.st-s3 .st-three .em-inc-ic{display:none !important;}
.st-s3 .st-three .em-inc-col{position:relative; padding-left:16px !important; border:0 !important; background:none !important; box-shadow:none !important;}
.st-s3 .st-three .em-inc-col::before{content:""; position:absolute; left:0; top:4px; width:1px; height:17px; background:#007a76;}
.st-s3 .st-three .em-inc-col b::before, .st-s3 .st-three .em-inc-col b::after{display:none !important;}
@media (max-width:900px){ .mg2 .st-win{margin:0 !important;} .mg2{padding-bottom:0;} .mg2-led{position:relative; width:auto; margin:-40px 12px 0;} }
@media (max-width:560px){ .mg2-led .r{grid-template-columns:minmax(0,1.4fr) 62px 52px;} .mg2-led .r span:nth-child(2){display:none;} }
.st-s3 .st-three .em-inc-col::before{content:"" !important; display:block !important; position:absolute !important; left:0; top:4px; width:1px !important; height:17px !important; background:#007a76 !important; border:0 !important;}
.st-s3 .st-three .em-inc-col{display:block !important;}
.st-s3 .st-three .em-inc-col b{display:block !important; margin-bottom:4px;}
@media (max-width:900px){ .mg2{display:flex; flex-direction:column;} .mg2 .st-win{order:1;} .mg2-led{order:2; margin:-30px 10px 0;} .st-s3 .st-three{display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:20px !important;} }

/* ==== add-ons: tiles fly into the checkout ==== */
.st-s4{background:#f6f9fc !important;}
.ad2.st-pair{position:relative; grid-template-columns:220px minmax(0,1fr) minmax(0,.95fr) !important; gap:clamp(24px,3.5vw,48px); align-items:start;}
.ad2 .st-join{display:none !important;}
.ad2 .ad2-t{order:1; display:flex; flex-direction:column; gap:12px; padding-top:30px;}
.ad2 .st-co{order:2; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 36px 70px -30px rgba(13,27,42,.35) !important; border:0 !important;}
.ad2 .st-ed{order:3; transform:rotate(1.2deg); transform-origin:0 0; margin-top:40px; box-shadow:0 0 0 1px rgba(13,27,42,.05), 0 20px 40px -26px rgba(13,27,42,.3) !important;}
.ad2-c{position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; align-items:center; padding:12px 14px; border-radius:12px; background:#fff;
  box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 10px 24px -16px rgba(13,27,42,.3); transition:opacity .4s ease, transform .4s ease;}
.ad2-c .ic{grid-row:1/3; display:grid; place-items:center; width:40px; height:40px; border-radius:10px;}
.ad2-c .ic svg{width:22px; height:22px;}
.ad2-c.a .ic{background:#eaf2ff; color:#2f54eb;} .ad2-c.b .ic{background:#fff3e0; color:#b4610e;} .ad2-c.c .ic{background:#e6f2f1; color:#00726f;}
.ad2-c b{font-size:13px; font-weight:600; color:#0b1a24;} .ad2-c small{font-size:10.5px; color:#62707c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ad2-c em{position:absolute; right:12px; top:12px; font-style:normal; font-size:12px; font-weight:600; color:#0b1a24;}
.ad2-c .ok{position:absolute; right:-7px; top:-7px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#007a76; color:#fff; opacity:0; transform:scale(.6); transition:opacity .3s ease, transform .3s ease;}
.ad2-c .ok svg{width:11px; height:11px;}
.ad2-c.used{opacity:.5; transform:translateX(-4px);} .ad2-c.used .ok{opacity:1; transform:none;}
/* the checkout grows a line for each add-on as it lands */
.ad2 .st-ao{display:grid !important; grid-template-columns:auto minmax(0,1fr) auto; max-height:0; margin:0 !important; padding:0 12px !important; opacity:0; overflow:hidden; border-width:0 !important;
  transition:max-height .5s cubic-bezier(.4,0,.2,1), padding .5s, margin .5s, opacity .4s ease .15s !important;}
.ad2 .st-ao.on{max-height:60px; margin:0 0 6px !important; padding:10px 12px !important; opacity:1; border-width:1px !important;}
.ad2 .st-ao .st-box{display:none;}
.ad2-fly{position:absolute; z-index:5; left:0; top:0; display:flex; align-items:center; gap:8px; padding:7px 12px 7px 7px; border-radius:100px; background:#0b1a24; color:#fff; font-size:12px; font-weight:600; white-space:nowrap;
  box-shadow:0 14px 28px -10px rgba(13,27,42,.5); pointer-events:none; transition:transform .75s cubic-bezier(.6,0,.2,1), opacity .25s ease;}
.ad2-fly .ic{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.14);} .ad2-fly .ic svg{width:14px; height:14px;}
@media (max-width:1100px){ .ad2.st-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;} .ad2 .ad2-t{grid-column:1/-1; flex-direction:row; padding-top:0;} .ad2-c{flex:1;} .ad2 .st-ed{margin-top:0;} }
@media (max-width:760px){ .ad2.st-pair{grid-template-columns:minmax(0,1fr) !important;} .ad2 .ad2-t{flex-direction:column;} .ad2 .st-ed{transform:none;} }
.ad2 .st-ao{grid-template-columns:minmax(0,1fr) auto !important; align-items:center;}
.ad2 .st-ed .st-g2{display:none;}
.ad2 .st-ed{transform:rotate(1.2deg) scale(.9); transform-origin:0 0;}
@media (max-width:760px){ .ad2 .st-ed{transform:none;} }

/* ==== Mehul 2026-10-20: the library window smaller, so it fits on one screen ==== */
.mg2{max-width:1000px; margin-left:auto; margin-right:auto; padding-bottom:60px;}
.mg2 .st-win{margin:0 18% 0 0 !important;}
.mg2 .st-win .st-note{display:none;}
.mg2 .st-win .st-cc:nth-child(n+3){display:none;}
.mg2 .st-win-b{padding:16px 18px 18px !important;}
.mg2-led{width:min(470px,56%);}
@media (max-width:900px){ .mg2 .st-win{margin:0 !important;} .mg2 .st-win .st-cc:nth-child(n+2){display:none;} }

/* ==== animated grounds on two sections (the page read too white) ==== */
/* formats: soft projector light sweeping slowly across the band, like a film being shown */
.st-s2{position:relative; isolation:isolate; overflow:hidden;}
.st-s2::before{content:""; position:absolute; z-index:-1; left:-20%; top:-60%; width:140%; height:200%; pointer-events:none;
  background:conic-gradient(from 200deg at 12% 0%, transparent 0deg, rgba(0,150,140,.16) 14deg, transparent 30deg, rgba(242,166,90,.16) 52deg, transparent 70deg, rgba(120,104,230,.13) 92deg, transparent 112deg, rgba(0,150,140,.12) 136deg, transparent 160deg);
  filter:blur(28px); transform-origin:12% 30%;}
.st-s2::after{content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(246,249,252,0) 55%, #f6f9fc 100%);}
@media (prefers-reduced-motion:no-preference){ .st-s2::before{animation:fm2-sweep 18s ease-in-out infinite alternate;} }
@keyframes fm2-sweep{from{transform:rotate(-6deg);} to{transform:rotate(8deg);}}
/* add-ons: a slanted band of moving colour behind the checkout, the way a receipt glows */
.st-s4{position:relative; isolation:isolate; overflow:hidden;}
.st-s4::before{content:""; position:absolute; z-index:-1; left:-10%; right:-10%; top:52%; height:56%; transform:skewY(-7deg); pointer-events:none;
  background:linear-gradient(100deg, #bfe8e3, #d9d3fb, #fde0bf, #bfe8e3, #d9d3fb); background-size:300% 100%; opacity:.75;
  -webkit-mask:linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent); mask:linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);}
@media (prefers-reduced-motion:no-preference){ .st-s4::before{animation:ad2-flow 16s linear infinite;} }
@keyframes ad2-flow{from{background-position:0% 50%;} to{background-position:-150% 50%;}}
@media (max-width:760px){ .st-s4::before{top:58%; height:44%;} }
@media (max-width:900px){ .mg2-led{width:auto !important;} }
.st-s2::before{left:-30%; top:-40%; width:160%; height:180%; filter:blur(18px);
  background:conic-gradient(from 150deg at 50% 0%, transparent 0deg, rgba(0,150,140,.32) 10deg, transparent 22deg, rgba(242,166,90,.30) 38deg, transparent 52deg, rgba(120,104,230,.26) 66deg, transparent 80deg, rgba(0,150,140,.24) 94deg, transparent 108deg);
  transform-origin:50% 0%;}
@keyframes fm2-sweep{from{transform:rotate(-10deg);} to{transform:rotate(10deg);}}

/* hero background (Mehul 2026-10-21, third try: like the first glow, but in this page's own colours, not the
   site's teal): soft violet, peach and rose light, drifting slowly behind the shelf like light off a screen */
.sh2-hero{isolation:isolate; background:#fbfafd !important;}
.stg{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
.stg i{position:absolute; border-radius:50%; filter:blur(80px);}
.stg i:nth-child(1){width:46vw; height:46vw; left:-14vw; bottom:-26vw; background:radial-gradient(circle,rgba(139,108,240,.42),transparent 68%);}
.stg i:nth-child(2){width:42vw; height:42vw; left:34vw; top:-20vw; background:radial-gradient(circle,rgba(255,180,140,.40),transparent 68%);}
.stg i:nth-child(3){width:34vw; height:34vw; right:-10vw; bottom:-14vw; background:radial-gradient(circle,rgba(240,130,170,.30),transparent 68%);}
.stg i:nth-child(4){width:26vw; height:26vw; left:22vw; top:30%; background:radial-gradient(circle,rgba(180,160,255,.22),transparent 68%);}
@media (prefers-reduced-motion:no-preference){
  .stg i{animation:stg-drift 18s ease-in-out infinite alternate;}
  .stg i:nth-child(2){animation-duration:22s; animation-delay:-7s;}
  .stg i:nth-child(3){animation-duration:20s; animation-delay:-4s;}
  .stg i:nth-child(4){animation-duration:26s; animation-delay:-11s;}
}
@keyframes stg-drift{to{transform:translate(4vw,-3vw) scale(1.15); opacity:.7;}}
@media (max-width:1000px){
  .stg i:nth-child(1){width:100vw; height:100vw; left:-40vw; bottom:auto; top:25%;}
  .stg i:nth-child(2){width:90vw; height:90vw; left:30vw; top:-40vw;}
}

/* phones (Mehul 2026-10-21: the words sat above and the screen kept changing below): each step is followed by its own
   screen, all three shown at once, so nothing swaps out of sight. The deck's wrappers step aside (display:contents)
   so the three screens can take their place between the words. */
@media (max-width:760px){
  .st-s1 .st-s1-in{display:flex !important; flex-direction:column; gap:0;}
  .st-s1 .st-steps,.st-s1 .st-frame,.st-s1 .st-frame-in,.st-s1 .st-card,.st-s1 .st-panes{display:contents;}
  .st-s1 .st-frame::after{display:none;}
  .st-s1 .rs-item[data-st-step="0"]{order:0;} .st-s1 .st-pane:nth-child(1){order:1;}
  .st-s1 .rs-item[data-st-step="1"]{order:2;} .st-s1 .st-pane:nth-child(2){order:3;}
  .st-s1 .rs-item[data-st-step="2"]{order:4;} .st-s1 .st-pane:nth-child(3){order:5;}
  .st-s1 .rs-item{margin-top:28px; pointer-events:none; color:var(--ink,#0d1b2a) !important;}
  .st-s1 .rs-item:first-child{margin-top:8px;}
  .st-s1 .rs-item b{color:#0d1b2a !important; opacity:1 !important; font-size:40px !important;}
  .st-s1 .rs-item p{display:block !important; max-height:none !important; opacity:1 !important; margin-top:6px;}
  .st-s1 .st-prog{display:none !important;}
  .st-s1 .st-pane{position:relative !important; inset:auto !important; transform:none !important; opacity:1 !important; margin-top:16px;
    min-height:360px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 30px 60px -36px rgba(13,27,42,.4) !important;}
  .st-s1 .st-pane *{animation-play-state:running;}
  .st-s1 .st-pane-f{position:static !important; margin-top:16px; display:flex; justify-content:flex-end; gap:10px;}
}

/* add-ons on phones (Mehul 2026-10-21: it ran off the screen): the three add-ons sit in one row of small tiles, the
   checkout keeps a fixed height (each add-on's line is reserved and lights up as it lands, so nothing below jumps),
   and the coach's add-on editor, which is detail, is left to the desktop. All of it fits on one phone screen. */
@media (max-width:760px){
  .ad2 .st-ed{display:none !important;}
  .ad2 .ad2-t{flex-direction:row !important; gap:8px; padding-top:0;}
  .ad2-c{flex:1; min-width:0; grid-template-columns:1fr; grid-template-rows:auto; justify-items:center; row-gap:6px; padding:12px 6px 10px; text-align:center;}
  .ad2-c .ic{grid-row:auto; width:34px; height:34px;}
  .ad2-c b{font-size:11.5px; line-height:1.25;}
  .ad2-c small{display:none;}
  .ad2-c em{position:static; font-size:12px;}
  .ad2-c.used{transform:none;}
  .ad2 .st-ao{max-height:none !important; margin:0 0 6px !important; padding:10px 12px !important; border-width:1px !important; border-style:dashed !important; opacity:.4;}
  .ad2 .st-ao.on{border-style:solid !important; opacity:1;}
}

/* hero glow, in our colours (Mehul 2026-10-21): teal, aqua, sea-green and a little sky blue, gathered behind the course
   wall on the right and fading out gently toward the heading */
.stg{-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 22%,rgba(0,0,0,.18) 36%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.88) 62%,#000 74%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 22%,rgba(0,0,0,.18) 36%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.88) 62%,#000 74%);}
.stg i:nth-child(1){width:44vw; height:44vw; left:auto; right:6vw; bottom:-22vw; top:auto; background:radial-gradient(circle,rgba(0,122,118,.46),transparent 68%);}
.stg i:nth-child(2){width:40vw; height:40vw; left:auto; right:-8vw; top:-16vw; background:radial-gradient(circle,rgba(95,216,212,.7),transparent 68%);}
.stg i:nth-child(3){width:30vw; height:30vw; right:-6vw; bottom:-8vw; background:radial-gradient(circle,rgba(124,198,245,.45),transparent 68%);}
.stg i:nth-child(4){width:34vw; height:34vw; left:auto; right:18vw; top:12%; background:radial-gradient(circle,rgba(18,165,143,.4),transparent 68%);}
@media (max-width:900px){
  .stg{-webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 30%,rgba(0,0,0,.5) 50%,#000 70%); mask-image:linear-gradient(180deg,transparent 0%,transparent 30%,rgba(0,0,0,.5) 50%,#000 70%);}
  .stg i:nth-child(1){width:100vw; height:100vw; right:-30vw; top:auto; bottom:-30vw;}
  .stg i:nth-child(2){width:90vw; height:90vw; right:-30vw; top:45%;}
}

/* PDF covers are page previews (tools/art_docs.py): show the top of the page, not the middle */
.sh2-c .cv.ph img[src*="/art/docs/"]{object-position:50% 0;}

/* the PDF stack shows real pages (tools/art_docs.py, Mehul 2026-10-21), on a brand tint instead of beige */
.fm2-st{background:radial-gradient(70% 80% at 60% 40%, rgba(95,216,212,.22), transparent 70%), #eef5f5;}
.fm2-st .pg.pgx{padding:0; overflow:hidden; border-radius:3px; box-shadow:0 1px 0 rgba(13,27,42,.06), 0 18px 34px -14px rgba(13,27,42,.38);}
.fm2-st .pg.pgx img{display:block; width:100%; height:100%; object-fit:cover; object-position:top;}
.fm2-st .pg.pgx{width:60%;}
@media (max-width:760px){ .fm2-st .pg.pgx{width:56%;} }

/* lesson drawings: one per lesson, cross-fading as the series plays (Mehul 2026-10-21) */
.fm2-pl .fm2-im{position:absolute; inset:0; opacity:0; transform:scale(1.03); transition:opacity .8s ease, transform 6s ease;}
.fm2-pl .fm2-im.on{opacity:1; transform:none;}
/* the section's light sweep, in our colours and a little softer (Mehul 2026-10-21) */
.st-s2::before{background:conic-gradient(from 150deg at 50% 0%, transparent 0deg, rgba(0,122,118,.18) 10deg, transparent 22deg, rgba(95,216,212,.22) 38deg, transparent 52deg, rgba(124,198,245,.16) 66deg, transparent 80deg, rgba(18,165,143,.16) 94deg, transparent 108deg);}
/* hero on phones (2026-10-28): the tilted wall of course cards reached up over "See how it works" and took the tap.
   The wall is decoration, so it never takes taps, and the hero copy sits above it. */
.sh2-tilt,.sh2-tilt *{pointer-events:none;}
.st-hero .pc-hero-copy{position:relative; z-index:3;}