/* adv-sales.css - the Advanced course sales page (includes/music/adv-sales.php mu_adv_sales). Serious and calm: square
   full-width bands, generous space, the heading face at a lighter weight, no chips; one accent per family (data-fam:
   orch gold, comp pink, tech teal) on ink; both themes; nothing scrolls sideways at 320; every target 44 px or more. */
.adv{--adv-acc:#f2b84b;--adv-ink:#0e1f36;--adv-ink-2:#13294a}
.adv[data-fam="comp"]{--adv-acc:#f07ab5}.adv[data-fam="tech"]{--adv-acc:#43c9d3}
.adv-wrap{max-width:1160px;margin:0 auto;padding:0 20px}
@media (max-width:420px){.adv-wrap{padding:0 16px}}

/* the hero: ink, the cover beside the title */
.adv-hero{background:var(--adv-ink);color:#e8eef7;padding:64px 0 72px}
:root[data-theme="dark"] .adv-hero{background:#081426}
.adv-hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
@media (max-width:860px){.adv-hero-in{grid-template-columns:1fr;gap:32px}.adv-hero-art{order:-1}}
.adv-eyebrow{margin:0 0 14px;font:600 13px/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:#9fb3cd}
.adv-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.adv-badge{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:700 13px/1.2 var(--f-body);letter-spacing:0;text-transform:none}
.adv-h1{margin:0;font:600 clamp(36px,5vw,60px)/1.05 var(--f-display);letter-spacing:-.01em;color:#fff}
.adv-promise{margin:16px 0 0;max-width:34em;font:400 19px/1.5 var(--f-body);color:#c9d5e6}
.adv-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px 28px;margin:30px 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.adv-facts dt{font:600 13px/1.3 var(--f-body);letter-spacing:.05em;text-transform:uppercase;color:#8fa6c4}
.adv-facts dd{margin:4px 0 0;font:400 16px/1.45 var(--f-body);color:#e8eef7}
.adv-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:32px}
.adv-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;background:#fff;color:var(--adv-ink);font:700 16px/1 var(--f-body);text-decoration:none}
.adv-btn:hover{background:#eef3fb}.adv-btn:focus-visible,.adv-link:focus-visible{outline:3px solid var(--adv-acc);outline-offset:3px}
.adv-link{display:inline-flex;align-items:center;min-height:44px;font:650 16px/1.3 var(--f-body);color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--adv-acc)}
.adv-hero-art .mh-cover{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.35)}

/* the sections: paper and a quieter alternate, the heading face at 600 */
.adv-sec{padding:64px 0;background:var(--paper)}
.adv-alt{background:var(--surface)}
.adv-h2{margin:0 0 28px;font:600 clamp(26px,3.4vw,38px)/1.15 var(--f-display);letter-spacing:-.005em;color:var(--ink)}
/* what you'll be able to do: two columns, one on a phone; each row its marker then its text, the text on one left edge
   with its first line level with the marker's middle, one even gap between rows (owner, 13 Oct: every row its own
   picture or every row a tick, never a mix: learn/outcome-list.php) */
.adv-can{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px;align-items:start}
@media (max-width:760px){.adv-can{grid-template-columns:1fr;gap:18px}}
.adv-can li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start;font:400 17px/1.5 var(--f-body);color:var(--ink)}
.adv-can-t{padding-top:7px;text-wrap:pretty}
.adv-can-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--adv-ink);color:var(--adv-acc)}
.adv-can-ic svg{width:22px;height:22px}

/* three proof points under the hero, then the longer case folded (owner, 12 Oct): icon, a short title, one line */
.adv-proof-sec{padding:48px 0 8px}
.adv-proof{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px 32px}
.adv-proof li{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:start}
.adv-proof-ic{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--adv-ink);color:var(--adv-acc)}
.adv-proof-ic svg{width:24px;height:24px}
.adv-proof b{font:650 18px/1.3 var(--f-body);color:var(--ink)}
.adv-proof li > span:last-child{font:400 16px/1.5 var(--f-body);color:var(--ink-2)}
.adv-about{margin-top:28px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.adv-about summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font:650 17px/1.3 var(--f-body);color:var(--ink);cursor:pointer;list-style:none}
.adv-about summary::-webkit-details-marker{display:none}
.adv-about summary:focus-visible{outline:3px solid var(--study);outline-offset:2px;border-radius:8px}
.adv-about-chev{flex:none;width:20px;height:20px;color:var(--ink-3);transition:transform .18s}
.adv-about[open] .adv-about-chev{transform:rotate(180deg)}
.adv-about p{max-width:40em;margin:0 0 16px;font:400 17px/1.6 var(--f-body);color:var(--ink-2)}

/* the curriculum: one disclosure per module, the count beside it */
.adv-mods{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.adv-mod{border-radius:12px;background:var(--paper);box-shadow:var(--shadow)}
.adv-alt .adv-mod{background:var(--paper)}
.adv-mod summary,.adv-mod-row{display:flex;align-items:center;gap:16px;min-height:64px;padding:10px 18px;list-style:none}
.adv-mod summary{cursor:pointer}
.adv-mod summary::-webkit-details-marker{display:none}
.adv-mod summary:focus-visible{outline:3px solid var(--study);outline-offset:2px;border-radius:12px}
.adv-mod-n{flex:none;width:32px;font:600 22px/1 var(--f-display);color:var(--ink-3)}
.adv-mod-t{flex:1;min-width:0}.adv-mod-t b{display:block;font:600 18px/1.3 var(--f-body);color:var(--ink)}.adv-mod-t small{display:block;margin-top:2px;font:400 15px/1.4 var(--f-body);color:var(--ink-2)}
.adv-chev{flex:none;color:var(--ink-3);transition:transform .2s}.adv-mod[open] .adv-chev{transform:rotate(180deg)}
.adv-les{margin:0;padding:0 18px 18px 66px;columns:2 260px;column-gap:28px}
.adv-les a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;display:inline-flex;min-height:44px;align-items:center}
.adv-pre-link{min-height:44px;color:#fff}
.adv-les li{margin:0 0 2px;font:400 16px/1.45 var(--f-body);color:var(--ink-2);break-inside:avoid}
@media (max-width:520px){.adv-les{padding-inline-start:52px;columns:1}}

/* how it works: four, with a small picture each */
.adv-how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
@media (max-width:980px){.adv-how{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.adv-how{grid-template-columns:1fr}}
.adv-how li{display:flex;flex-direction:column;gap:8px}
.adv-how-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--adv-ink);color:var(--adv-acc)}
.adv-how b{font:600 18px/1.3 var(--f-body);color:var(--ink)}.adv-how li>span:last-child{font:400 16px/1.5 var(--f-body);color:var(--ink-2)}

/* the sample lesson */
.adv-sample{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow);color:var(--ink);text-decoration:none}
@media (max-width:760px){.adv-sample{grid-template-columns:1fr}}
.adv-sample-art .mh-cover{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.adv-sample-tx{display:flex;flex-direction:column;gap:8px;padding:26px 28px}
.adv-sample-tx small{font:600 13px/1.3 var(--f-body);letter-spacing:.05em;text-transform:uppercase;color:var(--free)}   /* "Free": the free colour (owner, 13 Oct) */
.adv-sample-tx b{font:600 24px/1.2 var(--f-display)}.adv-sample-tx>span{font:400 16px/1.5 var(--f-body);color:var(--ink-2)}
.adv-sample:focus-visible{outline:3px solid var(--study);outline-offset:3px}

/* the tools: screenshots */
.adv-shots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px}
.adv-shots figure{margin:0}.adv-shots img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:var(--shadow)}
.adv-shots figcaption{margin-top:10px;font:400 15px/1.45 var(--f-body);color:var(--ink-2)}

/* the recommended route: a line of steps, this course marked; a column on a phone */
.adv-route{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:0}
.adv-route li{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:12px 22px;margin:0 34px 12px 0;border-radius:12px;background:var(--surface);box-shadow:var(--shadow);font:600 16px/1.3 var(--f-body);color:var(--ink)}
.adv-route li:not(:last-child)::after{content:"";position:absolute;inset-inline-end:-26px;top:50%;width:18px;height:2px;background:var(--ink-3)}
.adv-route li.here{background:var(--adv-ink);color:#fff}
.adv-route li small{margin-top:2px;font:400 13px/1.3 var(--f-body);color:#c9d5e6}
.adv-route a{color:inherit;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:640px){.adv-route{flex-direction:column}.adv-route li{margin:0 0 26px}.adv-route li:not(:last-child)::after{inset-inline-end:auto;inset-inline-start:30px;top:auto;bottom:-20px;width:2px;height:14px}}

/* questions and "Why not a degree?" */
.adv-faq details{border-radius:12px;background:var(--paper);box-shadow:var(--shadow);margin:0 0 10px}
.adv-faq summary{display:flex;align-items:center;min-height:56px;padding:0 18px;cursor:pointer;font:600 17px/1.35 var(--f-body);color:var(--ink)}
.adv-faq p{margin:0;padding:0 18px 18px;font:400 16px/1.55 var(--f-body);color:var(--ink-2)}
.adv .mu-why{margin:28px 0 0;border-radius:12px;background:var(--paper);box-shadow:var(--shadow)}
.adv .mu-why summary{display:flex;align-items:center;min-height:56px;padding:0 18px;cursor:pointer;font:600 17px/1.35 var(--f-body);color:var(--ink)}
.adv .mu-why-b{padding:0 18px 16px}.adv .mu-why-b p{margin:0 0 10px;font:400 16px/1.55 var(--f-body);color:var(--ink-2)}
.adv .mu-why-v,.adv .mu-why-n{color:var(--ink-3)!important;font-size:15px!important}
.adv .mu-why-s a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* the end: ink again, the plan and the button */
.adv-end{background:var(--adv-ink);color:#e8eef7;padding:64px 0 72px}
:root[data-theme="dark"] .adv-end{background:#081426}
.adv-end .adv-h2{color:#fff;margin-bottom:10px}
.adv-end-p{margin:0;font:400 17px/1.5 var(--f-body);color:#c9d5e6}
.adv-once{margin:18px 0 0}
.adv-btn-o{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}.adv-btn-o:hover{background:rgba(255,255,255,.08);border-color:#fff}
.adv-price{margin:0 0 14px;font:600 15px/1.4 var(--f-body);color:var(--adv-acc)}
@media (prefers-reduced-motion:reduce){.adv-chev,.adv-about-chev{transition:none}}
/* who made it: "By Brainlag", the mark and a verified tick under the title (official courses in the Shop, 14 Oct) */
.adv-by{display:flex;align-items:center;gap:8px;margin:14px 0 0;font:600 15px/1.3 var(--f-body);color:inherit}
.adv-by img{width:20px;height:20px;border-radius:6px;flex:none}
.adv-by .bl-by-ok{flex:none;color:var(--adv-acc)}
.adv-by .bl-by-ok path:last-child{stroke:var(--adv-ink)}