/* Dr.MVP V2 Courses Page 02 (/Intro) - derived from delivery 02_Courses/Backend_Handoff/..._v1.1_20260826/02_Page_Frontend/courses-integration.css
   SHA256 ec66ae2810e09a2bea70bb8804e7258622fe5cac32eb8762be0b20898382cf19 (Final Freeze v1.1 2026-08-26).
   Conversion: :root vars and body props moved onto .drmvpv2-courses; * box-sizing limited to the root; every selector prefixed;
   html rule removed; mobile body{padding-bottom:130px} removed (no global body selector - spec D08, see impl report);
   preview-shell selectors removed (site-header/header-inner/brand/desktop-nav/header-actions/menu-button/mobile-menu,
   site-footer/footer-inner/footer-logo/social/footer-bottom/footer-brand-copy) - shared GC header/footer provide them;
   .back-to-top removed (Ada D06: shared #backtotop is the only back-to-top);
   renames (Bootstrap 4 collisions): .container -> .drmvpv2-courses-container, .btn -> .drmvpv2-courses-btn, .lead -> .drmvpv2-courses-lead.
   Declarations, source order and breakpoints otherwise unchanged. Spec: docs/plans/20261007_DrMVP_V2_About_Page02_Spec_DRAFT_Luna403.md section 4.1. */
.drmvpv2-courses{--navy:#071b4d;--blue:#0d5bdd;--soft:#f2f7ff;--yellow:#ffc21a;--green:#06bd42;--line:#d8e4f3}
.drmvpv2-courses,.drmvpv2-courses *{box-sizing:border-box}
.drmvpv2-courses{margin:0;color:var(--navy);font-family:"Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;line-height:1.7}
.drmvpv2-courses a{color:inherit}
.drmvpv2-courses .drmvpv2-courses-container{width:min(1280px,calc(100% - 64px));margin:auto}
.drmvpv2-courses .section{padding:104px 0}
.drmvpv2-courses .soft{background:var(--soft)}
.drmvpv2-courses h1{margin:.15em 0;font-size:clamp(42px,4.4vw,68px);line-height:1.16;letter-spacing:-.04em}
.drmvpv2-courses h2{margin:0 0 18px;font-size:clamp(30px,3vw,46px);line-height:1.25}
.drmvpv2-courses h3{font-size:24px}
.drmvpv2-courses .drmvpv2-courses-lead,.drmvpv2-courses .section-lead{max-width:760px;color:#536c94;font-size:20px}
.drmvpv2-courses .section-no,.drmvpv2-courses .eyebrow{color:var(--blue);font-weight:900;letter-spacing:.08em}
.drmvpv2-courses .drmvpv2-courses-btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 23px;border-radius:10px;border:0;text-decoration:none;font-weight:900;font:inherit;cursor:pointer}
.drmvpv2-courses .yellow{background:var(--yellow)}
.drmvpv2-courses .outline{border:2px solid var(--blue);color:var(--blue);background:#fff}
.drmvpv2-courses .line{background:var(--green)!important;color:#fff!important}
.drmvpv2-courses .hero{background:linear-gradient(135deg,#fff 20%,#edf5ff)}
.drmvpv2-courses .hero-grid,.drmvpv2-courses .split,.drmvpv2-courses .form-layout{display:grid;grid-template-columns:5fr 7fr;gap:70px;align-items:center}
.drmvpv2-courses .tags,.drmvpv2-courses .topics{display:flex;flex-wrap:wrap;gap:12px;padding:0;list-style:none}
.drmvpv2-courses .tags li,.drmvpv2-courses .pill{padding:8px 16px;border-radius:999px;background:#e7f1ff;color:var(--blue);font-weight:800}
.drmvpv2-courses .trust{color:#344e75}
.drmvpv2-courses .actions{display:flex;gap:14px;margin-top:28px}
.drmvpv2-courses .asset-placeholder,.drmvpv2-courses .mini-placeholder{min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #8fb4e8;border-radius:34px;background:linear-gradient(135deg,#e8f2ff,#fff);color:#54749f;text-align:center}
.drmvpv2-courses .asset-placeholder strong{font-size:24px}
.drmvpv2-courses .asset-placeholder span{margin-top:8px}
.drmvpv2-courses .compact{min-height:330px}
.drmvpv2-courses .need-tabs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:38px 0 22px}
.drmvpv2-courses .need-tabs button{min-height:76px;border:1px solid #a9c5ed;border-radius:18px;background:#fff;color:var(--navy);font:inherit;font-size:19px;font-weight:900;cursor:pointer}
.drmvpv2-courses .need-tabs [aria-selected=true]{background:var(--blue);color:#fff}
.drmvpv2-courses .need-panel{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:center;padding:34px;border-radius:24px;background:#fff;box-shadow:0 12px 40px #0b3d8014}
.drmvpv2-courses .mini-placeholder{min-height:190px;border-radius:18px}
.drmvpv2-courses .times,.drmvpv2-courses .steps{list-style:none;padding:0}
.drmvpv2-courses .times li{display:grid;grid-template-columns:145px 1fr;padding:19px 0;border-bottom:1px solid var(--line)}
.drmvpv2-courses .times span,.drmvpv2-courses .note{color:#617697}
.drmvpv2-courses .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:44px 0}
.drmvpv2-courses .steps li{min-height:150px;padding:26px;border-radius:20px;background:#fff;font-size:18px;font-weight:900}
.drmvpv2-courses .steps span{display:block;margin-bottom:16px;color:var(--blue);font-size:28px}
.drmvpv2-courses .approved-combo{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.drmvpv2-courses .approved-combo span{padding:11px 18px;border-radius:12px;background:#e5effe}
.drmvpv2-courses .topics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px}
.drmvpv2-courses .topics li{padding:28px;border:1px solid var(--line);border-radius:18px;font-size:19px;font-weight:900}
.drmvpv2-courses .form-section{background:#0b2c68;color:#fff}
.drmvpv2-courses .form-layout{grid-template-columns:1fr 1fr}
.drmvpv2-courses .form-section .section-no{color:#7eb4ff}
.drmvpv2-courses .form-section form{padding:34px;border-radius:24px;background:#fff;color:var(--navy)}
.drmvpv2-courses .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.drmvpv2-courses .form-grid label{display:grid;gap:7px;font-weight:800}
.drmvpv2-courses .form-grid .full{grid-column:1/-1}
.drmvpv2-courses input,.drmvpv2-courses select{width:100%;min-height:50px;border:1px solid #aebdd2;border-radius:9px;padding:10px;font:inherit}
.drmvpv2-courses .consent{display:block;margin:20px 0}
.drmvpv2-courses .consent input{width:auto;min-height:auto}
.drmvpv2-courses .submit{width:100%}
.drmvpv2-courses .form-note{color:#657a98;font-size:14px}
.drmvpv2-courses .faq details{border-bottom:1px solid var(--line)}
.drmvpv2-courses .faq summary{padding:25px 0;font-size:19px;font-weight:900;cursor:pointer}
.drmvpv2-courses .faq details p{padding:0 0 22px;color:#526b90}
.drmvpv2-courses .final{text-align:center;background:#edf5ff}
.drmvpv2-courses .final p{font-size:19px}
.drmvpv2-courses .center{justify-content:center}
.drmvpv2-courses .floating{position:fixed;right:24px;bottom:24px;z-index:10;display:grid;gap:8px}
.drmvpv2-courses .floating a{padding:15px 20px;border-radius:10px;background:var(--yellow);text-decoration:none;font-weight:900}
.drmvpv2-courses .mobile-cta,.drmvpv2-courses .bottom-nav{display:none}
.drmvpv2-courses .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:1439px) and (min-width:768px){.drmvpv2-courses .drmvpv2-courses-container{width:calc(100% - 64px)}.drmvpv2-courses .section{padding:82px 0}.drmvpv2-courses .hero-grid{grid-template-columns:1fr 1fr;gap:38px}.drmvpv2-courses .steps{grid-template-columns:1fr 1fr}.drmvpv2-courses .topics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.drmvpv2-courses .drmvpv2-courses-container{width:calc(100% - 32px)}.drmvpv2-courses .section{padding:62px 0}.drmvpv2-courses .hero-grid,.drmvpv2-courses .split,.drmvpv2-courses .form-layout,.drmvpv2-courses .need-panel{grid-template-columns:1fr;gap:30px}.drmvpv2-courses .asset-placeholder{min-height:300px}.drmvpv2-courses .compact{min-height:220px}.drmvpv2-courses .need-tabs{display:flex;overflow:auto}.drmvpv2-courses .need-tabs button{min-width:230px}.drmvpv2-courses .steps{grid-template-columns:1fr}.drmvpv2-courses .steps li{min-height:auto}.drmvpv2-courses .topics{grid-template-columns:1fr 1fr}.drmvpv2-courses .form-grid{grid-template-columns:1fr}.drmvpv2-courses .form-grid .full{grid-column:auto}.drmvpv2-courses .floating{display:none}.drmvpv2-courses .mobile-cta{position:fixed;left:0;right:0;bottom:64px;z-index:30;display:grid;grid-template-columns:2fr 1fr;height:56px}.drmvpv2-courses .mobile-cta a{display:grid;place-items:center;background:var(--yellow);text-decoration:none;font-weight:900}.drmvpv2-courses .mobile-cta a:last-child{background:var(--green);color:#fff}.drmvpv2-courses .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;height:64px;display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--line)}.drmvpv2-courses .bottom-nav a{display:grid;place-items:center;text-decoration:none;text-align:center;font-size:11px}.drmvpv2-courses .bottom-nav [aria-current]{color:var(--blue);font-weight:900}}
@media(max-width:374px){.drmvpv2-courses .drmvpv2-courses-container{width:calc(100% - 24px)}.drmvpv2-courses .topics{grid-template-columns:1fr}.drmvpv2-courses .actions{display:grid}.drmvpv2-courses .tags{gap:7px}.drmvpv2-courses .tags li{font-size:13px}}
.drmvpv2-courses .course-photo{display:block;min-width:0;max-width:100%;height:auto;object-fit:contain;border-radius:30px}
.drmvpv2-courses .hero-photo{width:90%;aspect-ratio:auto;justify-self:end}
.drmvpv2-courses .flex-photo{width:88%;aspect-ratio:auto;justify-self:start}
.drmvpv2-courses .square-photo{width:min(100%,300px);aspect-ratio:auto;justify-self:end;border-radius:18px}
.drmvpv2-courses .need-panel>div,.drmvpv2-courses .split>div{min-width:0}
@media(max-width:767px){.drmvpv2-courses .hero-photo,.drmvpv2-courses .flex-photo,.drmvpv2-courses .square-photo{width:100%;justify-self:stretch}}
.drmvpv2-courses .need-panel[hidden]{display:none!important}
@media(min-width:768px){.drmvpv2-courses .need-tabs{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 22px}.drmvpv2-courses .need-tabs button{width:auto;min-height:54px;padding:0 26px;border-radius:999px;font-size:17px}.drmvpv2-courses .topics{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.drmvpv2-courses .topics li{width:auto;min-width:108px;padding:11px 18px;border-radius:999px;text-align:center;font-size:17px;line-height:1.5}}
@media(min-width:768px){.drmvpv2-courses .topics{display:grid;grid-template-columns:repeat(4,max-content);justify-content:start;gap:14px 16px}}
.drmvpv2-courses .trial-success{padding:34px;border-radius:24px;background:#fff;color:var(--navy)}
.drmvpv2-courses .trial-success[hidden]{display:none!important}
.drmvpv2-courses .hero-line{display:block}
.drmvpv2-courses .hero h1 .hero-line,.drmvpv2-courses .hero .drmvpv2-courses-lead .hero-line{white-space:nowrap}
.drmvpv2-courses .hero h1{font-size:clamp(42px,4vw,58px)}
@media(max-width:767px){.drmvpv2-courses .hero h1 .hero-line,.drmvpv2-courses .hero .drmvpv2-courses-lead .hero-line{white-space:normal}}
.drmvpv2-courses .semantic-copy span{display:block;white-space:nowrap}
.drmvpv2-courses .steps{display:flex;flex-wrap:wrap;gap:14px;margin:36px 0}
.drmvpv2-courses .steps li{width:auto;min-height:0;display:inline-flex;align-items:center;gap:12px;padding:11px 18px 11px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:17px;white-space:nowrap}
.drmvpv2-courses .steps span{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;margin:0;border-radius:50%;background:var(--blue);color:#fff;font-size:15px}
@media(max-width:767px){.drmvpv2-courses .semantic-copy span{white-space:normal}.drmvpv2-courses .steps{gap:10px}.drmvpv2-courses .steps li{font-size:16px}}
@media(min-width:768px){.drmvpv2-courses .split{grid-template-columns:1fr 1fr;gap:64px}.drmvpv2-courses .flex-photo{width:100%;justify-self:stretch}}
@media(min-width:768px) and (max-width:1439px){.drmvpv2-courses .steps{display:grid;grid-template-columns:repeat(2,max-content);gap:14px}}
@media(min-width:1440px){.drmvpv2-courses .steps{display:flex}}
.drmvpv2-courses .topics{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.drmvpv2-courses .topics li{width:auto;min-width:0;padding:9px 16px;border-radius:999px;text-align:center;font-size:16px;line-height:1.45;white-space:nowrap}
@media(min-width:768px){.drmvpv2-courses .topics{display:grid;grid-template-columns:repeat(4,max-content);justify-content:start;gap:12px 14px}}
.drmvpv2-courses .hero .eyebrow{margin:0 0 18px;font-size:clamp(20px,1.7vw,26px);font-weight:900;letter-spacing:.055em;line-height:1.35}
@media(max-width:767px){.drmvpv2-courses .hero .eyebrow{margin-bottom:14px;font-size:20px}}
@media(min-width:768px){.drmvpv2-courses .steps{display:grid;grid-template-columns:repeat(2,max-content);justify-content:start;gap:14px}}
@media(max-width:767px){.drmvpv2-courses .steps{display:flex;flex-direction:column;align-items:flex-start}}
.drmvpv2-courses .course-mode-card:first-child .course-mode-face::before{background-position:center top}
.drmvpv2-courses .course-mode-card{scroll-margin-top:120px}
.drmvpv2-courses .course-mode-card.is-deep-linked{outline:4px solid rgba(255,194,26,.82);outline-offset:5px;box-shadow:0 0 0 10px rgba(255,194,26,.16);transition:outline-color .25s ease,box-shadow .25s ease}
.drmvpv2-courses .flex-section .split{align-items:stretch}
.drmvpv2-courses .flex-section .flex-photo{width:100%;height:100%;min-height:440px;object-fit:cover;object-position:28% center;border-radius:30px}
@media(min-width:768px) and (max-width:1199px){.drmvpv2-courses .flex-section .flex-photo{min-height:390px;object-position:24% center}}
@media(max-width:767px){.drmvpv2-courses .flex-section .split{align-items:start}.drmvpv2-courses .flex-section .flex-photo{height:auto;min-height:0;aspect-ratio:16/10;object-fit:cover;object-position:center}}
.drmvpv2-courses .course-mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:38px;perspective:1200px}
.drmvpv2-courses .course-mode-card{min-width:0;height:340px;padding:0;border:0;border-radius:22px;background:none;color:#fff;text-align:left;font:inherit;cursor:pointer;perspective:1200px}
.drmvpv2-courses .course-mode-card:focus-visible{outline:4px solid rgba(13,91,221,.3);outline-offset:4px}
.drmvpv2-courses .course-mode-card-inner{position:relative;display:block;width:100%;height:100%;transition:transform .55s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.drmvpv2-courses .course-mode-card.is-flipped .course-mode-card-inner{transform:rotateY(180deg)}
.drmvpv2-courses .course-mode-face{position:absolute;inset:0;display:flex;flex-direction:column;padding:24px 22px;border-radius:22px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 14px 34px rgba(7,27,77,.16)}
.drmvpv2-courses .course-mode-face::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(180deg,rgba(4,20,52,.12) 12%,rgba(4,20,52,.92) 82%),var(--mode-image);background-position:center;background-size:cover}
.drmvpv2-courses .course-mode-face::after{content:"";position:absolute;inset:0;z-index:-1;border:1px solid rgba(255,255,255,.28);border-radius:inherit}
.drmvpv2-courses .course-mode-front{justify-content:space-between}
.drmvpv2-courses .course-mode-back{transform:rotateY(180deg);background:#071b4d}
.drmvpv2-courses .course-mode-back::before{filter:saturate(.55);background-image:linear-gradient(135deg,rgba(7,27,77,.96),rgba(13,91,221,.88)),var(--mode-image)}
.drmvpv2-courses .course-mode-type{align-self:flex-start;display:inline-flex;align-items:center;min-height:30px;padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--blue);font-size:13px;font-weight:900;letter-spacing:.05em}
.drmvpv2-courses .course-mode-copy{display:block}
.drmvpv2-courses .course-mode-copy>strong,.drmvpv2-courses .course-mode-back>strong{display:block;font-size:27px;line-height:1.3}
.drmvpv2-courses .course-mode-summary{display:block;margin-top:10px;font-size:14px;line-height:1.7;color:#fff}
.drmvpv2-courses .course-mode-summary>span{display:block;white-space:nowrap}
.drmvpv2-courses .course-mode-more{display:block;margin-top:13px;color:#9ec5ff;font-size:14px;font-weight:900}
.drmvpv2-courses .course-mode-back>strong{margin-top:18px;font-size:22px}
.drmvpv2-courses .course-mode-back ul{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.drmvpv2-courses .course-mode-back li{position:relative;padding-left:17px;font-size:14px;line-height:1.55}
.drmvpv2-courses .course-mode-back li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:7px;border-radius:50%;background:#ffc21a}
.drmvpv2-courses .course-mode-back .course-mode-more{margin-top:auto}
@media(min-width:768px) and (max-width:1199px){.drmvpv2-courses .course-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.drmvpv2-courses .course-mode-card{height:320px}.drmvpv2-courses .course-mode-summary{font-size:16px}}
@media(max-width:767px){.drmvpv2-courses .course-mode-grid{grid-template-columns:1fr;gap:14px;margin-top:28px}.drmvpv2-courses .course-mode-card{height:320px}.drmvpv2-courses .course-mode-face{padding:22px 20px}.drmvpv2-courses .course-mode-summary{font-size:15px}.drmvpv2-courses .course-mode-summary>span{white-space:normal}.drmvpv2-courses .course-mode-copy>strong{font-size:26px}.drmvpv2-courses .course-mode-back>strong{font-size:21px}}
/* ---- Integration additions (not in delivery) ----
   1) Native section anchors (#course-needs from the Hero, #learning-topics from the bottom nav, #experience): the sticky shared GC header
      (97/93/71px at 1440/1024/390; logged-in tablet min-height 112px) would cover the heading. Course cards keep the delivered 120px. */
.drmvpv2-courses #course-needs,.drmvpv2-courses #flexible-learning,.drmvpv2-courses #personalized-plan,.drmvpv2-courses #learning-topics,.drmvpv2-courses #experience{scroll-margin-top:117px}
@media(max-width:1439px) and (min-width:768px){.drmvpv2-courses #course-needs,.drmvpv2-courses #flexible-learning,.drmvpv2-courses #personalized-plan,.drmvpv2-courses #learning-topics,.drmvpv2-courses #experience{scroll-margin-top:132px}}
@media(max-width:767px){.drmvpv2-courses #course-needs,.drmvpv2-courses #flexible-learning,.drmvpv2-courses #personalized-plan,.drmvpv2-courses #learning-topics,.drmvpv2-courses #experience{scroll-margin-top:91px}}
/* 2) 04_Integration_Docs/05_RESPONSIVE_ACCESSIBILITY_SEO.md:20 asks to respect prefers-reduced-motion; the delivery has no override.
      Only the flip and deep-link highlight animations are stopped; flipping itself still works. */
@media(prefers-reduced-motion:reduce){.drmvpv2-courses .course-mode-card-inner,.drmvpv2-courses .course-mode-card.is-deep-linked{transition:none}}
/* 3) Bootstrap 4.4.1 reboot sets button:focus{outline:5px auto} (bootstrap.css:229), so a mouse click on a course card draws a focus ring the
      preview (UA :focus-visible) does not; keyboard focus keeps the delivered :focus-visible outline. */
.drmvpv2-courses .course-mode-card:focus:not(:focus-visible){outline:0}
/* 4) QA F3 (2026-10-08, docs/plans/20261008_DrMVP_V2_Home_About_Courses_BetaQA.md 4.2): the delivered preview relies on browser defaults,
      but this site loads Bootstrap 4.4.1 reboot (body text-align left, p and h1-h6 margin-top 0, small 80% weight 400,
      blockquote 0 0 1rem, img vertical-align middle) and Site.css:28-33 (ul,ol margin/padding 0, list-style none).
      Put the browser defaults back inside this page only. :where() keeps these at (0,1,0): above Bootstrap/Site.css element rules,
      below every delivered rule (all delivered selectors are .drmvpv2-courses + something, i.e. at least (0,1,1)).
      line-height is not reset here: the delivered body{line-height:1.7} already sits on .drmvpv2-courses. */
.drmvpv2-courses{text-align:start}
.drmvpv2-courses :where(p){margin-top:1em;margin-bottom:1em}
.drmvpv2-courses :where(h1){margin-top:.67em;margin-bottom:.67em;font-size:2em}
.drmvpv2-courses :where(h2){margin-top:.83em;margin-bottom:.83em;font-size:1.5em}
.drmvpv2-courses :where(h3){margin-top:1em;margin-bottom:1em;font-size:1.17em}
.drmvpv2-courses :where(h4){margin-top:1.33em;margin-bottom:1.33em;font-size:1em}
.drmvpv2-courses :where(h5){margin-top:1.67em;margin-bottom:1.67em;font-size:.83em}
.drmvpv2-courses :where(h6){margin-top:2.33em;margin-bottom:2.33em;font-size:.67em}
.drmvpv2-courses :where(ul,ol){margin-top:1em;margin-bottom:1em;padding-left:40px}
.drmvpv2-courses :where(ul){list-style-type:disc}
.drmvpv2-courses :where(ol){list-style-type:decimal}
.drmvpv2-courses :where(small){font-size:smaller;font-weight:inherit}
.drmvpv2-courses :where(blockquote){margin:1em 40px}
.drmvpv2-courses :where(img){vertical-align:baseline}
/* Bootstrap also sets *::before,*::after{box-sizing:border-box} (bootstrap.css:39-42); the preview's * rule never covered pseudo-elements,
   so its ::before/::after are content-box (e.g. the "依需求選擇" pill on .section-no / .feature-kicker: 46px tall here vs 50px in the preview).
   (0,1,1): no delivered rule sets box-sizing on a pseudo-element. */
.drmvpv2-courses :where(*)::before,.drmvpv2-courses :where(*)::after{box-sizing:content-box}
/* 5) Designer formal reply 2026-10-08 (relayed by CEO) items 10 and 11 + QA F2.
      body.drmvpv2-courses-page is added by Scripts/drmvpv2/courses/courses-integration.js on this page only.
      a) Mobile fixed bars keep their delivered sizes (bottom-nav 64px, mobile-cta 56px) and now sit above the safe area
         instead of losing it from the nav (delivered: height 64 incl. padding-bottom env(safe-area-inset-bottom), border-box).
      b) Bottom space = bar heights (64 + 56) + safe area, instead of the preview's fixed body padding 130px, so the last footer line
         is never under the bars even when IntersectionObserver is missing (then nothing is hidden).
      c) With IntersectionObserver the bottom nav is hidden while the footer is on screen (mobile-cta/floating already were).
      d) Shared #backtotop (_Footer.cshtml: fixed, right .25rem, bottom .25rem) is lifted above the floating CTA stack
         (desktop/tablet: bottom 24px + two 57px links + 8px gap = top edge ~146px) and above the mobile bars (120px + safe area),
         same offsets as the delivered page back-to-top (158px / 140px) that Ada D06 removed. Only on this page.
      e) Designer supplement 2026-10-08 item 10 (replaces c): the bottom nav stays at the footer (safe distance kept), only the CTA bar
         collapses. With IntersectionObserver running (body.drmvpv2-courses-io, courses-cta-visibility.js) the CTA bar is always
         hidden while the footer is on screen, so the bottom space is the nav only (64px + safe area) and is fully covered by the
         nav -> no white strip under the footer. Fixed for the whole visit (set once at load): no height change while scrolling.
         Without the observer nothing is hidden, so the 120px + safe area space of b) stays. */
body.drmvpv2-courses-page #backtotop{bottom:158px}
@media(max-width:767px){
body.drmvpv2-courses-page{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
body.drmvpv2-courses-page.drmvpv2-courses-io{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.drmvpv2-courses .bottom-nav{height:calc(64px + env(safe-area-inset-bottom))}
.drmvpv2-courses .mobile-cta{bottom:calc(64px + env(safe-area-inset-bottom))}
body.drmvpv2-courses-page #backtotop{bottom:calc(140px + env(safe-area-inset-bottom))}
}