/* Course page, October 2026 (Edison C1 to C12, C6 pending a Stripe payment link): what the lessons
   lead to, price and terms by the button, who teaches it, one button at the end, phone enrol bar.
   Loads after course-feedback.css. */

/* C2: the price line answers currency and "one-time" before the click. */
.course-page .course-access-note{font-size:15px;line-height:1.55}
.course-page .offer-hero .btn-main{min-width:260px;padding-inline:26px}
/* C1: the header's enrol button at 44px, 20px sides, 13px. */
.course-page #nav .nrow>.btn{min-height:44px;padding:10px 20px;font-size:13px}
/* C3: the subheadline at 18px, 1.55, 460px. */
.course-page .offer-hero-intro{max-width:460px;font-size:18px;line-height:1.55}

/* C4: outcomes before the syllabus. */
.course-page .cs-outcomes{margin-top:40px;text-align:left}
.course-page .cs-outcomes ul{max-width:760px}
.course-page .cs-outcomes h3{margin:0 0 16px;font-family:var(--font-display);font-size:clamp(26px,2.4vw,32px);font-weight:600;line-height:1.15;color:var(--ink)}
.course-page .cs-outcomes ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.course-page .cs-outcomes li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:18px;line-height:1.5;color:#3d3740}
.course-page .cs-outcomes li:before{content:'';width:18px;height:18px;margin-top:4px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8803c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.course-page .cs-outcomes .cs-inside{margin:44px 0 0;font-size:clamp(24px,2.1vw,28px)}

/* C5 (adapted) and C9: who teaches it. */
.course-page .cs-taught{max-width:44ch;margin-top:16px;font-size:16px;font-weight:500;line-height:1.6}
.course-page .cs-creds{font-size:16px;color:#555363}
/* C7: small print at 14px. C8: the teacher's portrait at 4:5. */
.course-page .offer-small{font-size:14px}
.course-page .offer-teacher img{aspect-ratio:4/5;object-fit:cover}
@media(min-width:1000px){.course-page .offer-teacher figure{max-width:396px}}
/* C10: the membership card at 28px / 16px. */
.course-page .course-mastermind-copy strong{font-size:28px}
.course-page .course-mastermind-copy>span{font-size:16px;line-height:1.6}
.course-page .cs-creds b{font-weight:600;color:#3d3740}

/* C11: one button, then a gentle free option. */
.course-page .offer-next .offer-actions{justify-content:center}
.course-page .offer-next .offer-actions .btn{width:auto;min-width:280px}
.course-page .cs-free{margin-top:16px;font-size:16px;line-height:1.6}
.course-page .cs-free a{text-decoration:underline;text-underline-offset:4px}

@media(max-width:699px){
 .course-page .cs-outcomes{margin-top:30px}
 .course-page .cs-outcomes li{font-size:16px}
 .course-page .course-access-note{font-size:14px}
 .course-page .offer-hero .btn-main{width:100%;min-width:0}
 .course-page .offer-hero-art{height:240px}
 .course-page .offer-hero .offer-title{font-size:40px}
 .course-page .offer-teacher figure{width:min(100%,321px)}
 .course-page .offer-hero-intro{font-size:16px}
 .course-page .course-mastermind-copy strong{font-size:24px}
 /* C12: a 64px navy enrol bar with a 44px button. */
 .course-page .ox-sticky{padding-block:10px calc(10px + env(safe-area-inset-bottom));background:rgba(23,35,55,.96);border-top-color:rgba(240,214,163,.35);box-shadow:0 -10px 26px -14px rgba(0,0,0,.5)}
 .course-page .ox-sticky p{color:#f3ece6}
 .course-page .ox-sticky .btn{min-height:44px;padding-block:9px}
 .course-page .offer-hero-art img{object-position:50% 18%}
 .course-page .offer-next .offer-actions .btn{width:100%;min-width:0}
}

/* Review fixes. The checkout script adds an (empty) status line inside each action row; keep it
   on its own full-width line so it never pushes the button off centre. */
.course-page .offer-actions .course-checkout-status{flex:0 0 100%;max-width:none;margin:0;text-align:center}
.course-page .offer-hero .offer-actions .course-checkout-status{text-align:left}
.course-page .cs-nw{white-space:nowrap}
.course-page .offer-price span{max-width:none;white-space:nowrap}
.course-page .offer-next .cs-free{max-width:none}
.course-page .cs-outcomes h3{text-wrap:balance}
.course-page .cs-outcomes .cs-inside{font-size:clamp(30px,3vw,40px)}
/* The product name follows the headline, as in the source order. */
@media(min-width:700px){.course-page .offer-product-name{order:0}}
/* The membership card's link is a quiet outline on the dark card; gold stays with enrolling. */
.course-page .course-mastermind-cta{background:transparent;border:1px solid rgba(255,255,255,.72);color:#fbf6ef}
.course-page .course-mastermind-link:hover .course-mastermind-cta{background:rgba(255,255,255,.08)}
@media(min-width:900px){
 .course-page .cs-outcomes{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:56px;align-items:start}
 .course-page .cs-outcomes .cs-inside{grid-column:1/-1}
}

/* Lesson groups: the title first, its lesson range under it (no labels above headings). */
.course-page .course-curriculum summary>span{display:flex;flex-direction:column}
.course-page .course-curriculum summary small{order:2;margin:6px 0 0}
/* The hero price line: the price, then the lessons and their running time, then the pace, one line each. */
.course-page .course-access-note .cs-line{display:block}
/* Refund terms sit directly under the price, worded as the refund policy states them. */
.course-page .offer-enquiry .offer-price{margin-bottom:8px}
.course-page .course-refund{margin:0 0 22px;font-size:14px;font-weight:500;line-height:1.5;color:#655b6b;text-wrap:pretty}
/* The help link in the checkout status line (the cancelled-checkout message) reads as a link on the dark hero. */
.course-page .course-checkout-status a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold,#d5b16f);text-decoration-thickness:1px;text-underline-offset:4px}
/* The optional purchase-sharing tick under each main enrol button: a native checkbox with its whole sentence as the label. */
.course-page .course-share{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:start;max-width:46ch;margin:14px 0 0;font:400 14px/1.5 Inter,Arial,sans-serif;text-align:left}
.course-page .course-share[hidden]{display:none}
.course-page .course-share input{width:18px;height:18px;margin:2px 0 0;accent-color:#684679;cursor:pointer}
.course-page .course-share input:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.course-page .course-share label{cursor:pointer;text-wrap:pretty}
.course-page .course-share a{grid-column:2;justify-self:start;display:inline-flex;align-items:center;min-height:24px;color:#684679;text-decoration:underline;text-underline-offset:3px}
.course-page .offer-actions .course-share{flex:0 0 100%;max-width:none;grid-template-columns:18px minmax(0,46ch)}
.course-page .offer-enquiry .course-share{color:#655b6b}
.course-page .offer-hero .course-share,.course-page .offer-next .course-share{color:#e7dfe9}
.course-page .offer-hero .course-share input,.course-page .offer-next .course-share input{accent-color:var(--gold,#d5b16f)}
.course-page .offer-hero .course-share a,.course-page .offer-next .course-share a{color:inherit;text-decoration-color:var(--gold,#d5b16f)}
.course-page .offer-next .course-share{justify-content:center}
/* Course page A/B test (course-ab.js). Version B adds the lesson excerpt and reading clips; version A never shows them. */
.course-page .cs-v2{display:none}
html[data-course-variant="b"] .course-page .cs-v2{display:block}
.course-page .cs-v2 .offer-heading{font-size:clamp(32px,3.6vw,46px);margin:0 0 14px;text-wrap:balance}
.course-page .cs-lesson-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4.5vw,64px);align-items:center}
.course-page .cs-lesson-copy p{margin:0;max-width:40ch;font-size:17px;line-height:1.65;color:#39424c;text-wrap:pretty}
.course-page .cs-lesson-play{position:relative;display:block;width:100%;padding:0;border:0;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#1a1626;cursor:pointer;box-shadow:0 22px 44px -30px rgba(38,30,22,.45),0 2px 8px rgba(38,30,22,.05)}
.course-page .cs-lesson-play img{display:block;width:100%;height:100%;object-fit:cover}
.course-page .cs-lesson-play .ox-play{left:50%;top:50%;bottom:auto;translate:-50% -50%;width:68px;height:68px;background:rgba(23,35,55,.8);transition:background .2s ease}
.course-page .cs-lesson-play .ox-play svg{width:24px;height:24px}
.course-page .cs-lesson-play:hover .ox-play{background:rgba(91,63,115,.92)}
.course-page .cs-lesson-play:focus-visible{outline:3px solid #5b3f73;outline-offset:4px}
.course-page .cs-lesson-chip{position:absolute;left:14px;bottom:14px;padding:6px 12px;border-radius:999px;background:rgba(23,35,55,.82);color:#fff;font-size:13px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}
.course-page .cs-proof-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:28px}
.course-page .cs-proof-head .offer-heading{margin:0}
.course-page .cs-proof-head p{margin:0;max-width:44ch;font-size:16px;line-height:1.6;color:#39424c;text-wrap:pretty}
@media(max-width:699px){
  .course-page .cs-lesson-grid{grid-template-columns:1fr;gap:22px}
  .course-page .cs-lesson-copy p{font-size:16px}
  .course-page .cs-proof-head{display:block;margin-bottom:20px}
  .course-page .cs-proof-head p{margin-top:12px;font-size:15px}
}
/* The reading-clip strip bleeds to the page edge by its gutter; on the course page that gutter is the offer .wrap padding, not the home page's 22px. */
.course-page .cs-proof .ox-clips{--ox-gutter:clamp(20px,5vw,40px)}
/* Email step before Stripe (20 Oct 2026): a native dialog shaped like the reading-clip player, on paper.
   Plum focus rings and the gold pill match the course page's own controls. */
.enroll-dialog{margin:auto;width:min(92vw,440px);max-height:92dvh;padding:0;border:0;border-radius:16px;background:var(--paper,#fffdfa);color:var(--ink,#172337);box-shadow:0 30px 70px -30px rgba(9,12,22,.6);overflow:auto}
.enroll-dialog::backdrop{background:rgba(9,12,22,.62)}
.enroll-form{display:grid;gap:12px;padding:18px 22px 22px}
.enroll-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.enroll-head h2{margin:0;font-family:var(--font-display);font-size:30px;font-weight:600;line-height:1.1;text-wrap:balance}
.enroll-close{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line,#ded5cb);border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.enroll-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.enroll-lead,.enroll-note,.enroll-error,.enroll-status{margin:0;text-wrap:pretty}
.enroll-lead,.enroll-note{color:var(--body,#39424c)}
.enroll-form label{margin-top:4px;font-size:15px;font-weight:600}
.enroll-form input{width:100%;min-height:50px;padding:12px 14px;border:1px solid #c9bba9;border-radius:10px;background:#fff;color:var(--ink,#172337);font:inherit;font-size:16px}
.enroll-form input[aria-invalid="true"]{border-color:#a3352b}
.enroll-error{color:#a3352b;font-size:14px}
.enroll-error:empty,.enroll-status:empty{display:none}
.enroll-continue{width:100%;margin-top:4px}
.enroll-note,.enroll-status{font-size:14px}
.enroll-close:focus-visible,.enroll-form input:focus-visible,.enroll-dialog .enroll-continue:focus-visible{outline:3px solid #684679;outline-offset:2px}