/* Dr.MVP v2 Home (batch 4) - Views/Home/Index_v2.cshtml only. Every selector starts with .drmvpv2-home.
   Sources:
   A) delivery 01_Home/04_Implementation/home-v2-integration.css (SHA256 eee1c11e...) - new slide, pain points, course teaser cards, journey.
      Differences: :root vars moved to .drmvpv2-home; body font/color moved to the new sections only; preview-only rules
      (preview-state, auth-in/out, carousel-dots, protected-scope, footer-social, gc-*, visual--pending, back-to-top, delta-card,
      old course-card, h1 alignment) not taken; prefers-reduced-motion limited to .drmvpv2-home;
      journey: delivery line 10 ".journey ol{repeat(3,1fr)}" sits after the mobile rule and would make phones 3 columns,
      while 02_Mobile/P01_Home_v2_Section05_Mobile_Delta.png is single column -> the 1-column phone rule is re-applied after it.
   B) Content/drmvp-home.css (legacy home, unchanged) - only the rules the kept sections still use (world map, testimonials,
      videos heading), scoped. Legacy h1.title -> h2.title with Bootstrap's h1 size 2.5rem so the look does not change.
   C) Integration (not in either source, marked below): new slide CTA, slide inside the Bootstrap carousel, indicator/control
      contrast on the light slide, video grid columns.
   2026-10-22 case 417 (designer gap review §4 items 1/2/5 and §7 "plan B"): the hero is the single new slide (old slides 1/3/4,
      dots, arrows and auto-advance removed) -> the indicator/arrow rules and the old-banner box/crop rules are gone; the hero title is
      the page's only H1 (".home-hero h2" rules -> h1, same values; the delivered preview itself uses ".home-hero h1");
      journey ol margin 1em auto; video section padding/width aligned with the course section (.home-videos-inner).
   2026-10-28 case 419 F07: the legacy big-photo testimonial cards (B section) are replaced by the three compact cards of the designer's
      final 04_UI_References/03_Home_Testimonials_Teaser.html -> section G at the end; the old .recommendation / .card-recommendation rules are gone. */

.drmvpv2-home{--home-navy:#082a66;--home-blue:#0b55d9;--home-soft:#f3f7fd;--home-border:#c9daf4;
  --drmvp-primary:#0F4C81;--drmvp-primary-light:#2A6B9E;--drmvp-secondary:#FF8F00;--drmvp-text:#333333;--drmvp-bg-light:#F4F7F9;--drmvp-white:#FFFFFF;
  --shadow-soft:0 10px 30px rgba(15,76,129,.08);--shadow-hover:0 15px 40px rgba(15,76,129,.15);--border-radius-lg:16px;--border-radius-md:12px;
  --transition-smooth:all .3s cubic-bezier(.25,.8,.25,1);
  background-color:var(--drmvp-bg-light);color:var(--drmvp-text)}

/* ===== A) delivered sections (font/color of the delivery's body, limited to the new sections) ===== */
.drmvpv2-home .home-hero,.drmvpv2-home .home-section{color:var(--home-navy);font-family:"Microsoft JhengHei","Noto Sans TC",Arial,sans-serif}
.drmvpv2-home .home-hero{position:relative;overflow:hidden;background:#f1f6ff}
.drmvpv2-home .home-hero__slide{min-height:520px;display:grid;grid-template-columns:minmax(0,1fr) minmax(520px,1.05fr);gap:50px;align-items:center;max-width:1440px;margin:auto;padding:42px 58px}
.drmvpv2-home .eyebrow{display:inline-block;margin:0 0 22px;padding:8px 18px;border-radius:999px;background:#e1ecff;color:var(--home-blue);font-weight:900}
.drmvpv2-home .home-hero h1{margin:0;font-size:clamp(34px,3vw,52px);line-height:1.15;letter-spacing:.02em}
.drmvpv2-home .home-hero__description{color:#506b96;font-size:17px;line-height:1.75}
.drmvpv2-home .home-hero__description span{display:inline-block}
.drmvpv2-home .home-hero__features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 0;padding:0;list-style:none}
.drmvpv2-home .home-hero__features li{display:grid;grid-template-columns:52px 1fr;gap:10px}
.drmvpv2-home .home-hero__features img{width:52px}
.drmvpv2-home .home-hero__features strong,.drmvpv2-home .home-hero__features span{display:block}
.drmvpv2-home .home-hero__features strong{color:var(--home-blue);font-size:17px}
.drmvpv2-home .home-hero__features span{margin-top:5px;color:#344f79;font-size:13px;line-height:1.45}
.drmvpv2-home .home-hero__visual img{display:block;width:100%;height:auto}
.drmvpv2-home .home-section{max-width:1440px;margin:auto;padding:76px 58px}
.drmvpv2-home .section-head{margin-bottom:28px}
.drmvpv2-home .section-head h2{margin:0 0 8px;font-size:32px}
.drmvpv2-home .card-grid{display:grid;gap:20px;margin:0;padding:0;list-style:none}
.drmvpv2-home .card-grid.three{grid-template-columns:repeat(3,1fr)}
.drmvpv2-home .legacy-card{min-height:220px;padding:26px;border:1px solid var(--home-border);border-radius:22px;background:#fff}
.drmvpv2-home .legacy-card span{display:grid;width:48px;height:48px;place-items:center;border-radius:50%;background:#edf2f8;color:#7588a6}
.drmvpv2-home .legacy-card strong{display:block;margin-top:24px;font-size:21px}
.drmvpv2-home .legacy-card small{display:block;margin-top:11px;color:#597099;font-size:15px;line-height:1.65}
.drmvpv2-home .course-section{max-width:none;background:var(--home-soft)}
.drmvpv2-home .course-section>*{max-width:1324px;margin-left:auto;margin-right:auto}
.drmvpv2-home .journey{background:#f5f8fd;max-width:none}
.drmvpv2-home .journey>*{max-width:1324px;margin-left:auto;margin-right:auto}
.drmvpv2-home .journey ol{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:0;list-style:none}
.drmvpv2-home .journey li{position:relative;min-height:210px;padding:28px;text-align:center}
.drmvpv2-home .journey li:after{content:"\2192";position:absolute;right:-19px;top:46%;color:var(--home-blue);font-size:28px}
.drmvpv2-home .journey li:last-child:after{display:none}
.drmvpv2-home .journey li strong{display:block;margin-top:12px;font-size:22px}
.drmvpv2-home .journey li p{color:#597099}

@media(max-width:1199px) and (min-width:768px){
  .drmvpv2-home .home-hero__slide{grid-template-columns:1fr minmax(360px,.85fr);gap:28px;padding:38px 32px}
  .drmvpv2-home .home-hero__features{grid-template-columns:1fr}
  .drmvpv2-home .home-section{padding:60px 32px}
  .drmvpv2-home .journey ol{grid-template-columns:repeat(2,1fr)}
  .drmvpv2-home .journey li:after{display:none}
}

@media(max-width:767px){
  .drmvpv2-home .home-hero__slide{grid-template-columns:1fr;padding:30px 22px 52px}
  .drmvpv2-home .home-hero h1{font-size:30px}
  .drmvpv2-home .home-hero__description{font-size:15px}
  .drmvpv2-home .home-hero__features{grid-template-columns:1fr}
  .drmvpv2-home .home-hero__features li{padding:16px;border:1px solid var(--home-border);border-radius:16px;background:#fff}
  .drmvpv2-home .home-hero__visual{order:2}
  .drmvpv2-home .home-section{padding:50px 22px}
  .drmvpv2-home .section-head h2{font-size:27px}
  .drmvpv2-home .card-grid.three,.drmvpv2-home .journey ol{grid-template-columns:1fr}
  .drmvpv2-home .legacy-card{min-height:0}
  .drmvpv2-home .journey li{min-height:160px;text-align:left;padding-left:88px;border:1px solid var(--home-border);border-radius:18px;background:#fff}
}

@media(prefers-reduced-motion:reduce){
  .drmvpv2-home *,.drmvpv2-home *:before,.drmvpv2-home *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}

.drmvpv2-home .pain-points{position:relative;isolation:isolate}
.drmvpv2-home .pain-points:before{content:"";position:absolute;z-index:-1;inset:26px 20px auto auto;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(11,85,217,.1) 1.5px,transparent 1.5px);background-size:14px 14px;opacity:.7}
.drmvpv2-home .pain-points .section-head h2{display:inline-block;position:relative;padding-bottom:14px}
.drmvpv2-home .pain-points .section-head h2:after{content:"";position:absolute;left:0;bottom:0;width:64px;height:5px;border-radius:999px;background:linear-gradient(90deg,#ffc21a,#0b55d9)}
.drmvpv2-home .pain-points .card-grid{position:relative}
.drmvpv2-home .pain-points .legacy-card{--pain-accent:#0b55d9;position:relative;overflow:hidden;min-height:246px;padding:30px;border:1px solid rgba(11,85,217,.16);border-radius:28px;background:linear-gradient(145deg,#fff 0%,#f7faff 70%,#eef5ff 100%);box-shadow:0 18px 42px rgba(8,42,102,.09);transition:transform .25s ease,box-shadow .25s ease}
.drmvpv2-home .pain-points .legacy-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:6px;background:linear-gradient(90deg,var(--pain-accent),#ffc21a)}
.drmvpv2-home .pain-points .legacy-card:after{content:"";position:absolute;right:-46px;bottom:-54px;width:148px;height:148px;border-radius:50%;background:var(--pain-accent);opacity:.055}
.drmvpv2-home .pain-points .legacy-card:hover{transform:translateY(-5px);box-shadow:0 24px 52px rgba(8,42,102,.14)}
.drmvpv2-home .pain-points .legacy-card--speak{--pain-accent:#5249c9}
.drmvpv2-home .pain-points .legacy-card--time{--pain-accent:#0089a8}
.drmvpv2-home .legacy-card__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.drmvpv2-home .pain-points .legacy-card__icon{display:grid;width:58px;height:58px;place-items:center;border-radius:19px;background:var(--pain-accent);color:#fff;font-size:23px;font-weight:900;box-shadow:0 10px 22px color-mix(in srgb,var(--pain-accent) 26%,transparent)}
.drmvpv2-home .pain-points .legacy-card__category{display:inline-flex;width:auto;height:auto;padding:8px 13px;place-items:center;border:0;border-radius:999px;background:color-mix(in srgb,var(--pain-accent) 10%,#fff);color:var(--pain-accent);font-size:13px;font-weight:900;letter-spacing:.08em}
.drmvpv2-home .pain-points .legacy-card strong{position:relative;z-index:1;margin-top:27px;font-size:23px;line-height:1.35}
.drmvpv2-home .pain-points .legacy-card small{position:relative;z-index:1;margin-top:13px;max-width:34em;color:#506b96;font-size:15px;line-height:1.8}

@media(max-width:767px){
  .drmvpv2-home .pain-points:before{display:none}
  .drmvpv2-home .pain-points .legacy-card{min-height:0;padding:25px;border-radius:22px}
  .drmvpv2-home .pain-points .legacy-card__icon{width:52px;height:52px;border-radius:16px}
  .drmvpv2-home .pain-points .legacy-card strong{margin-top:22px;font-size:21px}
}

.drmvpv2-home .pain-points .legacy-card{--pain-soft:#eaf2ff;--pain-shadow:rgba(11,85,217,.22)}
.drmvpv2-home .pain-points .legacy-card--speak{--pain-soft:#eeecff;--pain-shadow:rgba(82,73,201,.22)}
.drmvpv2-home .pain-points .legacy-card--time{--pain-soft:#e7f8fb;--pain-shadow:rgba(0,137,168,.22)}
.drmvpv2-home .pain-points .legacy-card__icon{box-shadow:0 10px 22px var(--pain-shadow)}
.drmvpv2-home .pain-points .legacy-card__category{background:var(--pain-soft)}

.drmvpv2-home .journey{position:relative;padding-top:64px;padding-bottom:68px;background:linear-gradient(135deg,#f5f8fd 0%,#edf4ff 58%,#f9fbff 100%)}
.drmvpv2-home .journey:before{content:"";position:absolute;right:4%;top:36px;width:190px;height:190px;border-radius:50%;border:42px solid rgba(11,85,217,.045)}
.drmvpv2-home .journey .section-head{position:relative;z-index:1}
.drmvpv2-home .journey .section-head h2{display:inline-block;position:relative;padding-bottom:14px}
.drmvpv2-home .journey .section-head h2:after{content:"";position:absolute;left:0;bottom:0;width:70px;height:5px;border-radius:99px;background:linear-gradient(90deg,#0b55d9,#ffc21a)}
.drmvpv2-home .journey ol{position:relative;z-index:1;grid-template-columns:repeat(3,1fr);gap:34px}
.drmvpv2-home .journey ol:before{content:"";position:absolute;z-index:-1;left:12%;right:12%;top:50%;height:2px;background:linear-gradient(90deg,rgba(11,85,217,.16),rgba(255,194,26,.55),rgba(11,85,217,.16))}
.drmvpv2-home .journey li.journey-step{--journey-accent:#0b55d9;position:relative;min-height:224px;padding:27px 29px 29px;border:1px solid rgba(11,85,217,.14);border-top:5px solid var(--journey-accent);border-radius:26px;background:rgba(255,255,255,.96);box-shadow:0 18px 42px rgba(8,42,102,.1);text-align:left;transition:transform .25s ease,box-shadow .25s ease}
.drmvpv2-home .journey li.journey-step:hover{transform:translateY(-5px);box-shadow:0 24px 52px rgba(8,42,102,.15)}
.drmvpv2-home .journey li.journey-step--plan{--journey-accent:#5548c8}
.drmvpv2-home .journey li.journey-step--start{--journey-accent:#0089a8}
.drmvpv2-home .journey li.journey-step:after{content:"\203A";display:grid;position:absolute;z-index:3;right:-49px;top:calc(50% - 20px);width:38px;height:38px;place-items:center;border:5px solid #edf4ff;border-radius:50%;background:#fff;color:#0b55d9;font-size:30px;font-weight:900;line-height:1;box-shadow:0 8px 20px rgba(8,42,102,.12)}
.drmvpv2-home .journey li.journey-step:last-child:after{display:none}
.drmvpv2-home .journey-step__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.drmvpv2-home .journey .journey-step__number{display:inline-flex;width:auto;height:auto;margin:0;padding:7px 12px;border-radius:999px;background:#eaf2ff;color:var(--journey-accent);font-size:14px;font-weight:900;letter-spacing:.1em}
.drmvpv2-home .journey .journey-step__icon{display:grid;width:54px;height:54px;margin:0;place-items:center;border-radius:17px;background:var(--journey-accent);color:#fff;font-size:21px;font-weight:900;box-shadow:0 10px 24px rgba(8,42,102,.16)}
.drmvpv2-home .journey li.journey-step strong{margin:0;color:#082a66;font-size:24px;line-height:1.35}
.drmvpv2-home .journey li.journey-step p{margin:13px 0 0;color:#58709a;font-size:16px;line-height:1.75}

@media(max-width:767px){
  .drmvpv2-home .journey{padding-top:50px;padding-bottom:52px}
  .drmvpv2-home .journey:before,.drmvpv2-home .journey ol:before{display:none}
  .drmvpv2-home .journey ol{gap:18px}
  .drmvpv2-home .journey li.journey-step{min-height:0;padding:23px 23px 25px;border-radius:22px}
  .drmvpv2-home .journey li.journey-step:after{display:none}
  .drmvpv2-home .journey-step__top{margin-bottom:18px}
  .drmvpv2-home .journey .journey-step__icon{width:48px;height:48px;border-radius:15px}
  .drmvpv2-home .journey li.journey-step strong{font-size:21px}
  .drmvpv2-home .journey li.journey-step p{font-size:15px}
}

.drmvpv2-home .journey ol{grid-template-columns:repeat(3,1fr)}
/* Deviation from delivery (see header): keep phones single column as in the mobile delta. */
@media(max-width:767px){.drmvpv2-home .journey ol{grid-template-columns:1fr}}

.drmvpv2-home .home-hero__visual{display:block;overflow:hidden;aspect-ratio:1.18;border-radius:44px}
.drmvpv2-home .home-hero__visual img{width:142%;max-width:none;height:100%;object-fit:cover;object-position:left center}

@media(max-width:767px){
  .drmvpv2-home .home-hero__visual{aspect-ratio:1.08;border-radius:32px}
  .drmvpv2-home .home-hero__visual img{width:100%;height:100%;object-fit:cover;object-position:center top}
}

.drmvpv2-home .home-hero__visual--formal{aspect-ratio:16/9;border-radius:32px;background:#eef4fb}
.drmvpv2-home .home-hero__visual--formal img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

@media(max-width:767px){
  .drmvpv2-home .home-hero__visual--formal{aspect-ratio:4/5}
  .drmvpv2-home .home-hero__visual--formal img{object-position:64% center}
}

/* Approved Home course teaser cards: reuse Page 02 formal WebP imagery. */
.drmvpv2-home .course-section .section-head{max-width:1324px;margin:0 auto 30px}
.drmvpv2-home .home-course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1324px;margin:0 auto}
.drmvpv2-home .home-course-card{position:relative;min-height:340px;overflow:hidden;border:1px solid rgba(11,85,217,.18);border-radius:28px;background:#071b4d;box-shadow:0 18px 40px rgba(7,27,77,.13);isolation:isolate}
.drmvpv2-home .home-course-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease}
.drmvpv2-home .home-course-card--small-group>img{object-position:center 35%}
.drmvpv2-home .home-course-card--flexible>img{object-position:center}
.drmvpv2-home .home-course-card--one-on-one>img{object-position:center}
.drmvpv2-home .home-course-card--grand-hall>img{object-position:center 42%}
.drmvpv2-home .home-course-card:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(4,20,52,.08) 15%,rgba(4,20,52,.28) 43%,rgba(4,20,52,.94) 100%)}
.drmvpv2-home .home-course-card__content{position:relative;z-index:1;display:flex;min-height:340px;flex-direction:column;justify-content:space-between;padding:24px;color:#fff}
.drmvpv2-home .home-course-card__type{align-self:flex-start;display:inline-flex;min-height:34px;align-items:center;padding:5px 13px;border:1px solid rgba(255,255,255,.68);border-radius:999px;background:rgba(255,255,255,.9);color:var(--home-blue);font-size:13px;font-weight:900;letter-spacing:.06em;box-shadow:0 6px 16px rgba(7,27,77,.12)}
.drmvpv2-home .home-course-card__copy h3{margin:0;font-size:31px;line-height:1.25;color:#fff}
.drmvpv2-home .home-course-card__copy p{margin:12px 0 0;color:#f4f7ff;font-size:15px;line-height:1.65}
.drmvpv2-home .home-course-card__copy p span{display:block}
.drmvpv2-home .home-course-card__copy a{display:inline-flex;min-height:46px;align-items:center;gap:10px;margin-top:18px;padding:0 17px;border:1px solid rgba(255,255,255,.74);border-radius:999px;background:rgba(255,255,255,.94);color:var(--home-blue);text-decoration:none;font-size:15px;font-weight:900;box-shadow:0 8px 20px rgba(7,27,77,.15);transition:transform .2s ease,background-color .2s ease}
.drmvpv2-home .home-course-card__copy a span{font-size:19px;transition:transform .2s ease}
.drmvpv2-home .home-course-card:hover>img{transform:scale(1.035)}
.drmvpv2-home .home-course-card:hover .home-course-card__copy a{transform:translateY(-2px);background:#fff}
.drmvpv2-home .home-course-card:hover .home-course-card__copy a span{transform:translateX(3px)}
.drmvpv2-home .home-course-card:focus-within{outline:4px solid rgba(255,194,26,.62);outline-offset:4px}

@media(max-width:1199px) and (min-width:768px){
  .drmvpv2-home .home-course-grid{gap:20px}
  .drmvpv2-home .home-course-card,.drmvpv2-home .home-course-card__content{min-height:320px}
  .drmvpv2-home .home-course-card__copy h3{font-size:28px}
  .drmvpv2-home .home-course-card__copy p{font-size:14px}
}

@media(max-width:767px){
  .drmvpv2-home .course-section .section-head{margin-bottom:22px}
  .drmvpv2-home .home-course-grid{grid-template-columns:1fr;gap:18px}
  .drmvpv2-home .home-course-card,.drmvpv2-home .home-course-card__content{min-height:330px}
  .drmvpv2-home .home-course-card{border-radius:24px}
  .drmvpv2-home .home-course-card__content{padding:21px}
  .drmvpv2-home .home-course-card__copy h3{font-size:27px}
  .drmvpv2-home .home-course-card__copy p{font-size:14px}
}

/* ===== C) integration ===== */
/* The new slide lives inside the existing Bootstrap carousel (".carousel-inner text-center", legacy banners are full-bleed images). */
.drmvpv2-home #demo .home-hero{text-align:left}
/* New slide CTA "查看國際師資" -> /Consultants (HOME_BACKEND_FINAL_DECISION: Hero). The delivery has no button style for it;
   this reuses the delivered pill metrics of the course-card link with the delivered blue. Pending designer confirmation. */
.drmvpv2-home .home-hero__cta{display:inline-flex;min-height:46px;align-items:center;margin-top:26px;padding:0 22px;border-radius:999px;background:var(--home-blue);color:#fff;text-decoration:none;font-size:15px;font-weight:900;box-shadow:0 8px 20px rgba(7,27,77,.15)}
.drmvpv2-home .home-hero__cta:hover,.drmvpv2-home .home-hero__cta:focus{background:#0848ba;color:#fff;text-decoration:none}
.drmvpv2-home .home-hero__cta:focus-visible{outline:3px solid #ffc21a;outline-offset:3px}
/* (2026-10-22 plan B: the .is-light-slide indicator / arrow colour and width rules were removed with the dots and arrows.) */

/* ===== D) beta QA fixes 2026-10-08 (docs/plans/20261008_DrMVP_V2_Home_About_Courses_BetaQA.md F1 / F3 / §2.4) ===== */
/* F1: the carousel took the height of the active slide only (390px: 375 -> 1255; 1024px: 368 -> 593), so the page below jumped
   on every change.
   (Widths below were 1200 until the 2026-10-08 supplement; now 1440 - see the end of this comment.)
   >=1200px: stack all four slides in one grid cell so the box is always as tall as the tallest slide (at this width the new slide
   and the banners are about the same height, so there is no jump and no empty band). Hidden slides keep visibility:hidden
   (no focus, not read out) instead of display:none; Bootstrap's slide classes/transforms are unchanged.
   <1200px (Ada ruling 2026-10-08, a reversible default until the designer decides): no stacking - each slide keeps its own height,
   no empty band under the banners - and home.js turns auto-advance off, so the height only changes when the user changes the slide.
   Dot/arrow colours follow the slide being shown at every width (.is-light-slide on the new slide, original white on the banners).
   Only #demo inside .drmvpv2-home; Bootstrap files and the legacy home are untouched.
   2026-10-08 designer supplement item 3 (all slides one visual height per breakpoint; no 375/1256 jump; no ~880px reserved blank):
   with the H1 band gone (item 2) the legacy banners are width x 757/2078 tall and the new slide is 520-530px (beta, measured
   2026-10-08 per width): 1200->437 vs 530, 1280->466 vs 520, 1366->498 vs 523, 1440->525 vs 520, 1920->700 vs 520.
   Only from 1440px up are they the same height (the new slide just fills the box), so stacking + auto-advance start at 1440.
   1200-1439 / tablet / mobile cannot reach one height with the current assets: object-fit:cover would cut the banners' edge
   content (logo / CTA pill sit 2% from the edges), contain would bring the light band back. Those widths keep the
   manual-only carousel (home.js) as a test-site interim until the formal equal-height crops arrive (asset status "另增" item 2).
   2026-10-16 designer final supplement 01_BACKEND_RESPONSE §2 (one carousel; slides 1/3/4 keep their Desktop/Mobile sources with a
   focal crop where needed; slide 2 is a responsive crop of the formal WebP with HTML text): the stacking below now applies at every
   width, the per-width box and crops are in section F, and home.js auto-advances at every width (reduced motion excepted).
   2026-10-22 plan B (designer gap review §7): only the new slide is left and it is .active, so the stacked box below is simply that
   slide's own (natural) height; no auto-advance. The rules are kept because the hero's per-width layout (section F) hangs on #demo. */
.drmvpv2-home #demo .carousel-inner{display:grid}
.drmvpv2-home #demo .carousel-item{display:block;grid-area:1/1;float:none;margin-right:0;visibility:hidden}
.drmvpv2-home #demo .carousel-item.active,.drmvpv2-home #demo .carousel-item-next,.drmvpv2-home #demo .carousel-item-prev{visibility:visible}
/* The new slide fills the shared box (1920: 700px) with its content centred, instead of a light strip under a 520px slide. */
.drmvpv2-home #demo .home-hero__slide{height:100%}
/* F3: the delivered preview renders the new sections inside .gc-root with UA defaults; on the site, Bootstrap/Site.css values leak in.
   Put back the values the preview computes (measured with the QA script qa_cmp_home.js against the local preview):
   colour #071b4d (preview: .gc-root{color:var(--gc-navy)}), line-height normal (Bootstrap body 1.5),
   description p margin 1em (17px / 15px on phones; Bootstrap p margin-top 0), journey ol margin 1em (Site.css ol{margin:0}). */
.drmvpv2-home .home-hero,.drmvpv2-home .home-section{color:#071b4d;line-height:normal}
.drmvpv2-home .home-hero__description{margin:1em 0}
/* 2026-10-22 case 417 (designer gap review §4 item 2): "1em 0" also reset the left/right auto of ".journey>*" (A section, lower
   specificity), so above ~1440px the cards sat left of the title and the course section. Keep 1em top/bottom, centre left/right. */
.drmvpv2-home .journey ol{margin:1em auto}
/* Designer supplement 2026-10-08 item 4 "鍵盤焦點需可見": the yellow ring alone is 1.49:1 on the light hero (#f1f6ff).
   A navy (--home-navy #082a66) band next to it keeps the ring visible (navy|yellow|navy).
   (2026-10-22 plan B: the dot / arrow focus rules of QA §2.4 were removed with the dots and arrows.) */
.drmvpv2-home .home-hero__cta:focus-visible{box-shadow:0 0 0 8px var(--home-navy)}

/* ===== F) one carousel height per width (2026-10-16 designer final supplement §1 / §2) ===== */
/* 2026-10-22 plan B (designer gap review §7): the old banners (slides 1/3/4) that set the box height were removed, and with them
   their box / crop rules (desktop 2078x757, phone 1:1, slide 3 contain). The hero now keeps its own natural height at every width
   (1920 / 1265 / 390: about 520 / 370 / 337px, measured on beta by survey B); no fixed height is added. */
/* New slide below 1440px: the formal WebP becomes the slide background (cover, focal point on the learner) and the HTML copy sits on
   top of it, so the image no longer adds its own height. Colours: --home-navy text on the slide's own #f1f6ff, faded over the photo. */
@media(max-width:1439px){
  .drmvpv2-home #demo .home-hero__slide{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:0;max-width:none;padding:28px 58px 40px}
  .drmvpv2-home #demo .home-hero__content{position:relative;z-index:1;max-width:58%}
  .drmvpv2-home #demo .home-hero__visual--formal{position:absolute;top:0;right:0;bottom:0;left:40%;z-index:0;aspect-ratio:auto;border-radius:0;background:#f1f6ff}
  .drmvpv2-home #demo .home-hero__visual--formal img{object-position:62% 30%}
  .drmvpv2-home #demo .home-hero__visual--formal:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f1f6ff 0,rgba(241,246,255,.85) 22%,rgba(241,246,255,0) 48%)}
  .drmvpv2-home #demo .eyebrow{margin-bottom:12px;padding:6px 14px;font-size:15px}
  .drmvpv2-home #demo .home-hero h1{font-size:clamp(24px,2.7vw,36px)}
  .drmvpv2-home #demo .home-hero__description{margin:.6em 0;font-size:15px;line-height:1.6}
  .drmvpv2-home #demo .home-hero__features{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
  .drmvpv2-home #demo .home-hero__features li{grid-template-columns:36px 1fr;gap:8px;padding:0;border:0;background:none}
  .drmvpv2-home #demo .home-hero__features img{width:36px}
  .drmvpv2-home #demo .home-hero__features strong{font-size:15px}
  .drmvpv2-home #demo .home-hero__features span{margin-top:2px;font-size:13px;line-height:1.4}
  .drmvpv2-home #demo .home-hero__cta{min-height:40px;margin-top:14px}
}
@media(max-width:1199px){
  .drmvpv2-home #demo .home-hero__slide{padding:14px 32px 26px}
  .drmvpv2-home #demo .home-hero__content{max-width:68%}
  .drmvpv2-home #demo .home-hero__visual--formal{left:38%}
  .drmvpv2-home #demo .home-hero__visual--formal:after{background:linear-gradient(90deg,#f1f6ff 0,rgba(241,246,255,.9) 30%,rgba(241,246,255,0) 58%)}
  .drmvpv2-home #demo .eyebrow{margin-bottom:6px;padding:3px 12px;font-size:13px}
  .drmvpv2-home #demo .home-hero h1{font-size:clamp(20px,2.6vw,28px)}
  .drmvpv2-home #demo .home-hero__description{margin:.35em 0;font-size:13px;line-height:1.5}
  .drmvpv2-home #demo .home-hero__features{gap:10px;margin-top:4px}
  .drmvpv2-home #demo .home-hero__features li{grid-template-columns:24px 1fr;gap:6px}
  .drmvpv2-home #demo .home-hero__features img{width:24px}
  .drmvpv2-home #demo .home-hero__features strong{font-size:13px}
  .drmvpv2-home #demo .home-hero__features span{font-size:12px;line-height:1.35}
  .drmvpv2-home #demo .home-hero__cta{min-height:34px;margin-top:8px;padding:0 18px;font-size:14px}
}
@media(max-width:767px){
  .drmvpv2-home #demo .home-hero__slide{padding:12px 24px 36px}
  .drmvpv2-home #demo .home-hero__content{max-width:none}
  .drmvpv2-home #demo .home-hero__visual--formal{left:0}
  .drmvpv2-home #demo .home-hero__visual--formal img{object-position:64% 30%}
  .drmvpv2-home #demo .home-hero__visual--formal:after{background:linear-gradient(180deg,rgba(241,246,255,.80) 0,rgba(241,246,255,.92) 45%,rgba(241,246,255,.95) 100%)}
  .drmvpv2-home #demo .home-hero h1{font-size:19px;line-height:1.25}
  .drmvpv2-home #demo .home-hero__description{line-height:1.45}
  .drmvpv2-home #demo .home-hero__features{grid-template-columns:1fr;gap:4px}
  .drmvpv2-home #demo .home-hero__features li{grid-template-columns:24px 1fr;align-items:start}
  .drmvpv2-home #demo .home-hero__features strong{line-height:1.2}
  .drmvpv2-home #demo .home-hero__features span{margin-top:1px;line-height:1.3}
}

/* ===== B) kept sections (legacy drmvp-home.css, scoped) ===== */
.drmvpv2-home .w-80{width:80%}
.drmvpv2-home h2.title{font-size:2.5rem;line-height:1.2;font-weight:700;color:var(--drmvp-primary);position:relative;padding-bottom:15px;margin-bottom:25px}
.drmvpv2-home h2.title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:4px;background:linear-gradient(90deg,var(--drmvp-primary) 0%,var(--drmvp-secondary) 100%);border-radius:2px}

.drmvpv2-home .consultants{background-color:var(--drmvp-white);padding:80px 0}
.drmvpv2-home .btn-consultants{background:var(--drmvp-secondary);color:white;border-radius:50px;padding:12px 40px;font-size:1.2rem;font-weight:bold;box-shadow:0 4px 15px rgba(255,143,0,.3);transition:var(--transition-smooth)}
.drmvpv2-home .btn-consultants:hover{background:#E68100;color:white;transform:translateY(-2px) scale(1.05);box-shadow:0 8px 25px rgba(255,143,0,.4)}

.drmvpv2-home .collection{background:var(--drmvp-white);padding:60px 0}
/* Video cards = Views/Video/_VideoCard_drmvpv2.cshtml styled by Content/drmvpv2/videos/videos.css (scoped .drmvpv2-videos).
   The wrapper here only carries that scope: no page background, and 3 cards per row on desktop (the legacy home row; 6 cards). */
.drmvpv2-home .drmvpv2-home-videos{background:transparent}
@media(min-width:1121px){.drmvpv2-home .drmvpv2-home-videos .video-grid{grid-template-columns:repeat(3,1fr)}}
/* 2026-10-22 case 417 (designer gap review §4 item 5): same left/right base as the course section - the .home-section side padding
   (58 / 32 / 22px, A section above) and the 1324px centred content width (.course-section>*). Replaces Bootstrap "px-2 px-xl-5 mx-xl-4"
   in the view. Cards per row unchanged (3 here on desktop; tablet 2 / phone 1 come from videos.css, shared with /Video, not touched). */
.drmvpv2-home .home-videos-inner{padding-left:58px;padding-right:58px}
.drmvpv2-home .drmvpv2-home-videos{max-width:1324px;margin-left:auto;margin-right:auto}
@media(max-width:1199px) and (min-width:768px){.drmvpv2-home .home-videos-inner{padding-left:32px;padding-right:32px}}
@media(max-width:767px){.drmvpv2-home .home-videos-inner{padding-left:22px;padding-right:22px}}

@media(max-width:768px){
  .drmvpv2-home .consultants,.drmvpv2-home .collection{padding:40px 0}
}

/* ===== E) the only H1 ===== */
/* Until 2026-10-22 the H1 was the sr-only "學好英文，用一輩子" inside old slide 1 (designer supplement 2026-10-08 item 2).
   Plan B removed that slide, so the hero's visible title is now the H1 (text unchanged; ".home-hero h1" rules in A / F above,
   pending designer confirmation). No rule is needed here. */

/* ===== G) testimonial teaser (2026-10-28 case 419 F07) ===== */
/* Source: designer final docs/design/DrMVP_Backend_Required_Fixes_20261028_v1.1/04_UI_References/03_Home_Testimonials_Teaser.html
   lines 56-298 (values as delivered; breakpoints 980 / 680 as delivered, not the 1199 / 767 used by the other home sections).
   Class names: .testimonial-teaser -> .home-testimonials, .container / .section-head / .eyebrow / h1 / .intro / .all-link /
   .testimonial-grid / .testimonial-card / .person / .category / blockquote / .card-link / .mobile-cta -> .home-testimonials__*
   (Bootstrap .container and the home.css .section-head / .eyebrow above would otherwise apply). The preview h1 is an H2 here.
   Not taken: preview-bar, sequence-label, body, delivery-note. :root colours -> scoped --ht-* variables.
   Bootstrap/Site.css leaks reset here: a:hover underline/colour, h2 weight 500 + margin, p margin-bottom, blockquote margin, small 80%.
   Reduced motion: the existing ".drmvpv2-home *" rule in the A section already removes the transitions. */
.drmvpv2-home .home-testimonials{--ht-navy:#061d50;--ht-blue:#1260df;--ht-yellow:#ffbd1b;--ht-text:#385c95;--ht-line:#d6e3f5;
  position:relative;overflow:hidden;padding:82px 0 88px;background:linear-gradient(150deg,#eef5ff 0%,#f8fbff 54%,#fff9e8 100%);
  color:var(--ht-navy);font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;line-height:1.65}
.drmvpv2-home .home-testimonials:before{content:"\201C";position:absolute;top:-112px;right:2%;color:rgba(18,96,223,.065);font-family:Georgia,serif;font-size:360px;line-height:1;pointer-events:none}
.drmvpv2-home .home-testimonials:after{content:"";position:absolute;left:-110px;bottom:-150px;width:310px;height:310px;border:50px solid rgba(255,189,27,.12);border-radius:50%;pointer-events:none}
.drmvpv2-home .home-testimonials a,.drmvpv2-home .home-testimonials a:hover{color:inherit;text-decoration:none}
.drmvpv2-home .home-testimonials__inner{position:relative;z-index:1;width:min(1200px,calc(100% - 80px));margin:0 auto}
.drmvpv2-home .home-testimonials__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;margin-bottom:34px}
.drmvpv2-home .home-testimonials__eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 9px;color:var(--ht-blue);font-size:14px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.drmvpv2-home .home-testimonials__eyebrow:before{content:"";width:31px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--ht-blue),var(--ht-yellow))}
.drmvpv2-home .home-testimonials__title{margin:0;color:var(--ht-navy);font-size:clamp(34px,4vw,50px);font-weight:700;line-height:1.15;letter-spacing:-.03em}
.drmvpv2-home .home-testimonials__intro{max-width:650px;margin:15px 0 0;color:var(--ht-text);font-size:18px}
.drmvpv2-home .home-testimonials .home-testimonials__all{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:11px 24px;border:2px solid var(--ht-blue);border-radius:14px;background:#fff;color:var(--ht-blue);font-weight:900;box-shadow:0 10px 26px rgba(18,96,223,.10);transition:transform .2s ease,background-color .2s ease,color .2s ease}
.drmvpv2-home .home-testimonials__all:after{content:"\2192";font-size:20px}
.drmvpv2-home .home-testimonials .home-testimonials__all:hover,.drmvpv2-home .home-testimonials .home-testimonials__all:focus-visible{background:var(--ht-blue);color:#fff;transform:translateY(-2px)}
.drmvpv2-home .home-testimonials__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.drmvpv2-home .home-testimonials__card{position:relative;display:flex;min-height:290px;flex-direction:column;padding:26px;border:1px solid var(--ht-line);border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 14px 36px rgba(20,61,123,.09);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.drmvpv2-home .home-testimonials__card:after{content:"\201C";position:absolute;top:8px;right:20px;color:#d9e7fb;font-family:Georgia,serif;font-size:74px;line-height:1}
.drmvpv2-home .home-testimonials__card:hover,.drmvpv2-home .home-testimonials__card:focus-visible{border-color:#a9c7f4;box-shadow:0 20px 44px rgba(19,64,129,.15);transform:translateY(-5px);outline:none}
.drmvpv2-home .home-testimonials__person{position:relative;z-index:1;display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:16px}
.drmvpv2-home .home-testimonials__person img{width:78px;height:78px;border:4px solid #fff;border-radius:20px;object-fit:cover;box-shadow:0 7px 19px rgba(6,29,80,.17)}
.drmvpv2-home .home-testimonials__category{display:inline-flex;align-items:center;min-height:28px;margin-bottom:5px;padding:3px 10px;border-radius:999px;background:#e7f0ff;color:var(--ht-blue);font-size:13px;font-weight:900}
.drmvpv2-home .home-testimonials__name{display:block;font-size:20px;font-weight:700}
.drmvpv2-home .home-testimonials__identity{display:block;margin-top:1px;color:var(--ht-text);font-size:14px}
.drmvpv2-home .home-testimonials__quote{position:relative;z-index:1;flex:1;margin:24px 0 20px;padding:0;border:0;color:var(--ht-navy);font-size:20px;font-weight:800;line-height:1.65}
.drmvpv2-home .home-testimonials__more{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding-top:17px;border-top:1px solid #e4ecf7;color:var(--ht-blue);font-weight:900}
.drmvpv2-home .home-testimonials__more b{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--ht-blue);color:#fff;font-size:20px}
.drmvpv2-home .home-testimonials .home-testimonials__all--mobile{display:none}
@media(max-width:980px){
  .drmvpv2-home .home-testimonials__inner{width:min(100% - 56px,820px)}
  .drmvpv2-home .home-testimonials__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drmvpv2-home .home-testimonials__card:last-child{grid-column:1/-1;min-height:250px}
}
@media(max-width:680px){
  .drmvpv2-home .home-testimonials{padding:58px 0 64px}
  .drmvpv2-home .home-testimonials:before{top:-45px;right:-35px;font-size:220px}
  .drmvpv2-home .home-testimonials__inner{width:calc(100% - 36px)}
  .drmvpv2-home .home-testimonials__head{display:block;margin-bottom:26px}
  .drmvpv2-home .home-testimonials__title{font-size:34px}
  .drmvpv2-home .home-testimonials__intro{font-size:16px}
  .drmvpv2-home .home-testimonials .home-testimonials__all--head{display:none}
  .drmvpv2-home .home-testimonials__grid{grid-template-columns:1fr;gap:16px}
  .drmvpv2-home .home-testimonials__card,.drmvpv2-home .home-testimonials__card:last-child{min-height:0;grid-column:auto;padding:21px}
  .drmvpv2-home .home-testimonials__person{grid-template-columns:64px minmax(0,1fr);gap:13px}
  .drmvpv2-home .home-testimonials__person img{width:64px;height:64px;border-radius:17px}
  .drmvpv2-home .home-testimonials__name{font-size:18px}
  .drmvpv2-home .home-testimonials__quote{margin:19px 0 16px;font-size:18px}
  .drmvpv2-home .home-testimonials__card:hover{transform:none}
  .drmvpv2-home .home-testimonials .home-testimonials__all--mobile{display:flex;margin-top:22px}
}