/* ============================================================
   patch.css — global patch styles over bundle.css.
   Extracted verbatim from the former inline <style> blocks in
   index.html <head> (order preserved).
   ============================================================ */
:root {
    --navy-0:#000713;
    --navy-1:#031536;
    --navy-2:#071f4a;
    --blue:#58a7ff;
    --blue-2:#2f7dff;
    --cyan:#9fd4ff;
    --gold:#ffda70;
    --gold-2:#ffc350;
    --text:#f8fbff;
    --muted:#dce3f0;
    --card-stroke:rgba(107, 178, 255, .82);
  }
  * { box-sizing:border-box; }
  html, body { margin:0; min-height:100%; background:#000713; }
  html { scroll-padding-top: 88px; }
  @media (max-width:767px){ html { scroll-padding-top: 72px; } }
  body {
    font-family:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    color:var(--text);
  }

.desktop-section {
    width:100%;
    min-height:100vh;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:#000713;
  }
  .desktop-section .stage {
    width:min(100vw, 177.78vh);
    aspect-ratio:1672/941;
    position:relative;
    overflow:hidden;
    background:#000713;
  }
  .desktop-section .stage svg { display:block; width:100%; height:100%; }
  .desktop-section .title-main {
    font-family:"Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
    font-weight:900;
    letter-spacing:.025em;
  }
  .desktop-section .title-sub {
    font-family:"Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
    font-weight:900;
    letter-spacing:.035em;
  }
  .desktop-section .body-copy {
    font-family:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    font-weight:500;
    letter-spacing:.11em;
  }
  .desktop-section .card-title {
    font-family:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    font-weight:900;
    letter-spacing:.015em;
  }
  .desktop-section .card-copy {
    font-family:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    font-weight:500;
    letter-spacing:.01em;
  }
  .desktop-section .card { transition:filter .25s ease, transform .25s ease; transform-origin:center; }
  .desktop-section .card:hover { filter:url(#cardHover);  }
  @media (max-width: 900px) and (min-width: 768px) {
    .desktop-section { min-height:auto; }
    .desktop-section .stage { width:100vw; }
  }

:root {
    --navy-0:#000713;
    --navy-1:#031536;
    --navy-2:#071f4a;
    --blue:#58a7ff;
    --blue-2:#2f7dff;
    --cyan:#9fd4ff;
    --gold:#ffda70;
    --gold-2:#ffc350;
    --text:#f8fbff;
    --muted:#dce3f0;
    --card-stroke:rgba(107, 178, 255, .82);
  }

  * { box-sizing:border-box; }
  html, body { margin:0; min-height:100%; background:#000713; }
  html { scroll-padding-top: 88px; }
  @media (max-width:767px){ html { scroll-padding-top: 72px; } }
  body {
    font-family:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    color:var(--text);
  }

  .section-mobile {
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    background:
      radial-gradient(circle at 25% 4%, rgba(56,129,255,.33) 0 12%, rgba(10,45,110,.10) 29%, transparent 50%),
      radial-gradient(circle at 82% 16%, rgba(255,215,106,.13) 0 10%, rgba(18,60,130,.18) 28%, transparent 53%),
      linear-gradient(145deg, #000713 0%, #04173a 48%, #000713 100%);
  }

  .section-mobile::before,
  .section-mobile::after {
    content:"";
    position:absolute;
    inset:auto auto 0 0;
    pointer-events:none;
  }

  .section-mobile::before {
    width:115%;
    height:42%;
    bottom:-7%;
    left:-8%;
    opacity:.55;
    background-image:radial-gradient(circle, rgba(25,132,255,.72) 0 1.2px, transparent 1.6px);
    background-size:13px 13px;
    transform:skewY(-8deg);
    mask-image:linear-gradient(to top, black, rgba(0,0,0,.62) 45%, transparent 82%);
    -webkit-mask-image:linear-gradient(to top, black, rgba(0,0,0,.62) 45%, transparent 82%);
  }

  .section-mobile::after {
    width:76%;
    height:28%;
    top:-3%;
    right:-22%;
    opacity:.34;
    background-image:radial-gradient(circle, rgba(22,119,255,.85) 0 1.15px, transparent 1.55px);
    background-size:12px 12px;
    transform:rotate(-8deg);
    mask-image:linear-gradient(125deg, transparent 0 8%, black 34%, transparent 90%);
    -webkit-mask-image:linear-gradient(125deg, transparent 0 8%, black 34%, transparent 90%);
  }

  .circuit-left {
    position:absolute;
    top:92px;
    left:-80px;
    width:210px;
    height:260px;
    opacity:.58;
    filter:drop-shadow(0 0 8px rgba(63,145,255,.45));
  }

  .radar-right {
    position:absolute;
    right:-54px;
    top:235px;
    width:164px;
    height:164px;
    opacity:.36;
  }

  .mobile-inner {
    position:relative;
    z-index:1;
    width:min(100%, 430px);
    padding:42px 18px 46px;
  }

  .eyebrow-line {
    width:62%;
    height:2px;
    margin:18px auto 0;
    border-radius:999px;
    background:linear-gradient(90deg, transparent, rgba(126,199,255,.9), #fff, rgba(126,199,255,.9), transparent);
    box-shadow:0 0 16px rgba(84,168,255,.72);
  }

  .hero-title {
    margin:0;
    text-align:center;
    font-family:"Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
    font-size:clamp(38px, 10.7vw, 50px);
    line-height:1.16;
    font-weight:900;
    letter-spacing:.035em;
    color:#fff;
    text-shadow:0 5px 10px rgba(0,0,0,.72), 0 0 7px rgba(255,255,255,.22);
  }

  .hero-title .offer {
    white-space:nowrap;
  }

  .hero-subtitle {
    margin:18px auto 0;
    max-width:390px;
    text-align:center;
    font-family:"Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
    font-size:clamp(25px, 7.1vw, 32px);
    line-height:1.45;
    font-weight:900;
    letter-spacing:.025em;
    color:#fff;
    text-shadow:0 4px 9px rgba(0,0,0,.65), 0 0 5px rgba(255,255,255,.22);
  }

  .hero-subtitle .signal {
    color:var(--gold);
    white-space:nowrap;
    text-shadow:0 4px 9px rgba(0,0,0,.65), 0 0 10px rgba(255,217,108,.34);
  }

  .hero-copy {
    margin:24px auto 0;
    max-width:354px;
    text-align:center;
    color:#e0e7f5;
    font-size:clamp(16px, 4.45vw, 19px);
    line-height:1.75;
    font-weight:500;
    letter-spacing:.095em;
    text-shadow:0 4px 9px rgba(0,0,0,.68), 0 0 5px rgba(255,255,255,.20);
  }

  .cards {
    display:grid;
    grid-template-columns:1fr;
    gap:13px;
    margin-top:28px;
  }

  .signal-card {
    position:relative;
    display:flex;
    align-items:center;
    min-height:112px;
    padding:18px 18px 18px 20px;
    border:1.2px solid var(--card-stroke);
    border-radius:17px;
    overflow:hidden;
    background:
      linear-gradient(145deg, rgba(10,35,79,.84), rgba(5,22,56,.76) 55%, rgba(2,13,36,.88)),
      radial-gradient(circle at 15% 10%, rgba(80,163,255,.16), transparent 45%);
    box-shadow:
      inset 0 0 0 1px rgba(4,15,39,.58),
      0 11px 30px rgba(0,0,0,.28),
      0 0 18px rgba(31,113,255,.10);
  }

  .signal-card::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, rgba(255,255,255,.10), transparent 36%, rgba(95,173,255,.08) 100%);
    opacity:.42;
    pointer-events:none;
  }

  .signal-card:active { transform:scale(.99); }

  .icon-wrap {
    position:relative;
    z-index:1;
    flex:0 0 72px;
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:20px;
  }

  .icon-wrap > svg {
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
  }

  .card-text {
    position:relative;
    z-index:1;
    min-width:0;
    flex:1 1 auto;
  }

  .card-title {
    margin:0;
    color:#fff;
    font-size:clamp(22px, 6.05vw, 27px);
    line-height:1.18;
    font-weight:900;
    letter-spacing:.015em;
    text-shadow:0 3px 7px rgba(0,0,0,.65), 0 0 4px rgba(255,255,255,.22);
  }

  .card-desc {
    margin:7px 0 0;
    color:var(--muted);
    font-size:clamp(15px, 4.15vw, 18px);
    line-height:1.45;
    font-weight:500;
    letter-spacing:.018em;
    text-shadow:0 2px 5px rgba(0,0,0,.55);
  }


  .icon-gold { filter:drop-shadow(0 0 8px rgba(255,217,108,.38)); }
  .icon-blue { filter:drop-shadow(0 0 11px rgba(74,160,255,.58)); }
  .no-break { white-space:nowrap; }
  #circle-sections-root .rb-title,
  #circle-sections-root .rb-sub,
  #circle-sections-root .rb-step-title,
  #circle-sections-root .rb-step-copy,
  #circle-sections-root .rb-tool-txt h3,
  #circle-sections-root .rb-tool-txt p,
  #circle-sections-root .rb-closing,
  #circle-sections-root .pint-title,
  #circle-sections-root .pint-desc { word-break:normal; overflow-wrap:break-word; }
  #circle-sections-root .rb-title,
  #circle-sections-root .rb-step-title { text-wrap:balance; }
  #circle-sections-root .rb-sub,
  #circle-sections-root .pint-desc { text-wrap:pretty; }
  @media (min-width:861px){ #circle-sections-root .rb-title--nowrap-lg { white-space:nowrap; } }

  /* ===== Cross-device overflow safety net =====
     iOS Safari renders CJK with the wider PingFang system font, so `word-break:keep-all`
     could forbid a slightly-too-wide clause from wrapping -> it overflowed the box/screen on
     iPhone while fitting on Android. Force natural wrapping everywhere in the custom sections;
     the short `.no-break` spans still keep key terms (CV / Offer / 面試官 …) together. */
  #circle-sections-root .rb-title, #circle-sections-root .rb-sub, #circle-sections-root .rb-step-title,
  #circle-sections-root .rb-step-copy, #circle-sections-root .rb-tool-txt h3, #circle-sections-root .rb-tool-txt p,
  #circle-sections-root .rb-closing, #circle-sections-root .pint-title, #circle-sections-root .pint-desc,
  #circle-sections-root .story-title, #circle-sections-root .story-desc, #circle-sections-root .rb-eyebrow,
  #circle-sections-root .rb-tools-hint,
  #webinar-countdown-band h2, #webinar-countdown-band p, #webinar-countdown-band figcaption,
  #webinar-countdown-band .wcb-badge, #webinar-countdown-band .wcb-when,
  #final-gate h2, #final-gate h3, #final-gate p, #final-gate li, #final-gate .fg-eyebrow, #final-gate .fg-card-tag,
  .hero-section h1, .hero-section .hero-description, .hero-section .hero-tag,
  #webinar-sticky-bar .wsb-label, #webinar-sticky-bar .wsb-countdown {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-break: auto !important;
  }
  /* the atomic protected terms may stay on one line, but never wider than the viewport */
  #circle-sections-root .no-break, #webinar-countdown-band .no-break, #final-gate .no-break,
  .hero-section .hl, .no-break { max-width:100%; }

  /* Responsive manual line-break helpers: brk-sm breaks only on mobile, brk-lg only on desktop */
  br.brk-sm{ display:inline; }
  br.brk-lg{ display:none; }
  @media (min-width:861px){
    br.brk-sm{ display:none; }
    br.brk-lg{ display:inline; }
  }

  /* ===== Mobile hardening: prevent stray horizontal overflow + clear the sticky CTA ===== */
  html{ overflow-x:clip; }
  html, body{ max-width:100%; }
  #circle-sections-root section, #webinar-countdown-band, #final-gate{ box-sizing:border-box; max-width:100%; }
  @media (max-width:880px){
    /* Space so the fixed bottom CTA never covers the final content / carousel dots */
    body{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
  }

  @media (max-width:360px) {
    .mobile-inner { padding-inline:14px; }
    .signal-card { min-height:104px; padding:16px 14px 16px 16px; }
    .icon-wrap { flex-basis:62px; width:62px; height:62px; margin-right:16px; }
    .cards { gap:11px; }
    .card-desc { letter-spacing:.005em; }
  }

  /* Responsive switch: desktop SVG at tablet/desktop widths, custom mobile layout on phones. */
  .section-mobile { display:none; }
  @media (max-width: 767px) {
    .desktop-section { display:none !important; }
    .section-mobile { display:flex !important; }
  }
  @media (min-width: 768px) {
    .desktop-section { display:grid !important; }
    .section-mobile { display:none !important; }
  }


/* =========================
   Section 2 - 2 小時核心內容
   ========================= */
.section2-desktop .s2-serif {
  font-family:"Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
  font-weight:900;
  letter-spacing:.025em;
}
.section2-desktop .s2-sans {
  font-family:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
.section2-desktop .s2-card-title {
  font-family:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight:900;
  letter-spacing:.015em;
}
.section2-desktop .s2-card-copy {
  font-family:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight:500;
  letter-spacing:.025em;
}
.section2-desktop .s2-module-card {
  transition:filter .25s ease, transform .25s ease;
  transform-origin:center;
}
.section2-desktop .s2-module-card:hover {
  filter:url(#s2CardHover);
  
}

.section2-mobile {
  display:none;
  position:relative;
  overflow:hidden;
  width:100%;
  min-height:100vh;
  justify-content:center;
  color:#f8fbff;
  background:
    radial-gradient(circle at 50% 0%, rgba(55,126,255,.34) 0 10%, rgba(14,55,126,.12) 29%, transparent 48%),
    radial-gradient(circle at 15% 92%, rgba(0,152,255,.35) 0 9%, rgba(0,45,120,.22) 32%, transparent 60%),
    radial-gradient(circle at 88% 86%, rgba(22,119,255,.28) 0 12%, transparent 53%),
    linear-gradient(145deg, #000713 0%, #041737 50%, #000713 100%);
}
.section2-mobile::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.34;
  background-image:
    linear-gradient(rgba(82,154,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82,154,255,.12) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), transparent 80%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), transparent 80%);
  pointer-events:none;
}
.section2-mobile::after {
  content:"";
  position:absolute;
  left:-18%;
  right:-18%;
  bottom:-7%;
  height:32%;
  opacity:.62;
  background-image:radial-gradient(circle, rgba(25,132,255,.75) 0 1.1px, transparent 1.55px);
  background-size:12px 12px;
  transform:skewY(-7deg);
  mask-image:linear-gradient(to top, black, rgba(0,0,0,.6) 48%, transparent 88%);
  -webkit-mask-image:linear-gradient(to top, black, rgba(0,0,0,.6) 48%, transparent 88%);
  pointer-events:none;
}
.s2m-inner {
  position:relative;
  z-index:1;
  width:min(100%, 430px);
  padding:42px 18px 54px;
}
.s2m-title {
  margin:0;
  text-align:center;
  font-family:"Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
  font-size:clamp(32px, 8.5vw, 43px);
  line-height:1.18;
  font-weight:900;
  letter-spacing:.02em;
  text-shadow:0 5px 12px rgba(0,0,0,.72), 0 0 8px rgba(255,255,255,.20);
}
.s2m-title .gold {
  color:#ffdc74;
  white-space:nowrap;
  text-shadow:0 4px 10px rgba(0,0,0,.68), 0 0 13px rgba(255,212,88,.35);
}
.s2m-line {
  width:74%;
  height:2px;
  margin:20px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(100,180,255,.95), #fff, rgba(100,180,255,.95), transparent);
  box-shadow:0 0 18px rgba(75,157,255,.78);
}
.s2m-badge {
  width:max-content;
  max-width:100%;
  margin:24px auto 22px;
  padding:7px 24px 9px;
  border-radius:999px;
  color:#ffdc74;
  font-family:"Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
  font-size:clamp(24px, 6.4vw, 31px);
  line-height:1.2;
  font-weight:900;
  letter-spacing:.08em;
  text-shadow:0 0 11px rgba(255,216,105,.34);
  background:linear-gradient(90deg, transparent, rgba(28,92,178,.25), transparent);
}
.s2m-modules {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.s2m-card {
  position:relative;
  display:grid;
  grid-template-columns:78px 1fr;
  column-gap:15px;
  align-items:center;
  min-height:132px;
  padding:18px 17px 17px;
  border:1.2px solid rgba(106,178,255,.82);
  border-radius:16px;
  background:linear-gradient(150deg, rgba(10,35,81,.92), rgba(3,16,42,.86));
  box-shadow:inset 0 0 30px rgba(67,136,255,.10), 0 12px 28px rgba(0,0,0,.28);
  backdrop-filter:blur(5px);
}
.s2m-card::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 24% 13%, rgba(103,183,255,.20), transparent 43%);
  pointer-events:none;
}
.s2m-icon {
  position:relative;
  z-index:1;
  width:76px;
  height:76px;
  filter:drop-shadow(0 0 10px rgba(77,165,255,.52));
}
.s2m-icon-img { object-fit:contain; }
.s2m-content { position:relative; z-index:1; min-width:0; }
.s2m-heading {
  display:flex;
  align-items:baseline;
  gap:9px;
  margin:0;
  white-space:nowrap;
}
.s2m-num {
  color:#ffda70;
  font-size:24px;
  font-weight:900;
  letter-spacing:.02em;
}
.s2m-sep { color:rgba(255,255,255,.78); font-weight:700; }
.s2m-name {
  color:#fff;
  font-size:20px;
  font-weight:900;
  letter-spacing:.01em;
  text-shadow:0 2px 5px rgba(0,0,0,.55);
}
.s2m-copy {
  margin:8px 0 0;
  color:#eef5ff;
  font-size:15.5px;
  line-height:1.55;
  font-weight:500;
  letter-spacing:.015em;
  text-shadow:0 2px 5px rgba(0,0,0,.52);
}
.s2m-arrow {
  display:flex;
  justify-content:center;
  align-items:center;
  width:58px;
  height:34px;
  margin:2px auto 2px;
  position:relative;
}
.s2m-arrow::before {
  content:"";
  position:absolute;
  inset:2px 0;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(14,42,96,.96), rgba(4,22,58,.92));
  border:1px solid rgba(107,186,255,.42);
  box-shadow:inset 0 0 16px rgba(91,170,255,.16), 0 0 12px rgba(82,174,255,.18);
}
.s2m-arrow svg {
  position:relative;
  z-index:1;
  width:24px;
  height:14px;
  overflow:visible;
  filter:drop-shadow(0 0 6px rgba(92,191,255,.95));
}
.s2m-arrow path {
  stroke:#74caff;
  stroke-width:3.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

.s2m-cta {
  margin:24px auto 0;
  position:relative;
  padding:19px 18px 21px;
  text-align:center;
  color:#17110a;
  font-family:"Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
  font-size:clamp(23px, 6.1vw, 31px);
  line-height:1.35;
  font-weight:900;
  letter-spacing:.02em;
  background:linear-gradient(100deg, #ffe599 0%, #fff2c4 42%, #f0b64c 100%);
  border:2px solid rgba(255,219,106,.96);
  clip-path:polygon(6% 0, 94% 0, 100% 22%, 100% 78%, 94% 100%, 6% 100%, 0 78%, 0 22%);
  box-shadow:0 0 22px rgba(255,194,72,.45), inset 0 0 20px rgba(255,255,255,.28);
}
.s2m-cta .big { font-size:1.28em; }
.s2m-cta-img-wrap {
  margin:24px auto 0;
  filter:drop-shadow(0 0 18px rgba(255,191,64,.38));
}
.s2m-cta-img {
  display:block;
  width:100%;
  height:auto;
}
@media (max-width: 375px) {
  .s2m-inner { padding-inline:14px; }
  .s2m-card { grid-template-columns:68px 1fr; column-gap:13px; padding-inline:14px; }
  .s2m-icon { width:66px; height:66px; }
  .s2m-name { font-size:18px; }
  .s2m-copy { font-size:14.5px; }
}
@media (max-width: 767px) {
  .section2-desktop { display:none !important; }
  .section2-mobile { display:flex !important; }
}
@media (min-width: 768px) {
  .section2-desktop { display:grid !important; }
  .section2-mobile { display:none !important; }
}


/* Live animated CTA frame for Section 2: no raster screenshot */
.section2-desktop .s2-cta-live {
  cursor:pointer;
  transform-box:fill-box;
  transform-origin:center;
}
.section2-desktop .s2-cta-main {
  animation:s2CtaBreath 2.8s ease-in-out infinite;
}
.section2-desktop .s2-cta-dash {
  stroke-dasharray:52 18;
  animation:s2CtaDash 1.9s linear infinite, s2CtaFrameGlow 2.4s ease-in-out infinite;
}
.section2-desktop .s2-cta-corner {
  animation:s2CtaCorner 2.2s ease-in-out infinite;
}
@keyframes s2CtaBreath {
  0%,100% { filter:drop-shadow(0 0 10px rgba(255,194,72,.34)); }
  50% { filter:drop-shadow(0 0 24px rgba(255,218,112,.78)); }
}
@keyframes s2CtaDash {
  to { stroke-dashoffset:-70; }
}
@keyframes s2CtaFrameGlow {
  0%,100% { opacity:.62; }
  50% { opacity:1; }
}
@keyframes s2CtaCorner {
  0%,100% { opacity:.55; }
  50% { opacity:1; }
}
.s2m-cta-live {
  margin:28px auto 0;
  max-width:390px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:18px 18px 20px;
  text-align:center;
  color:#151008;
  font-family:"Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
  background:linear-gradient(180deg, #f7e7b0 0%, #f2d88b 34%, #efd17a 68%, #f5df9d 100%);
  border:2px solid rgba(239,194,89,.95);
  border-radius:14px;
  box-shadow:
    0 0 18px rgba(255,194,72,.34),
    0 8px 20px rgba(0,0,0,.26),
    inset 0 0 0 1px rgba(255,243,201,.6);
}
.s2m-cta-live::before {
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(126,84,25,.28);
  border-radius:10px;
  pointer-events:none;
}
.s2m-cta-live::after {
  content:"";
  position:absolute;
  top:0;
  left:-30%;
  width:22%;
  height:100%;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.08) 35%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.06) 65%, transparent 100%);
  transform:skewX(-20deg);
  animation:s2mCtaSweep 3.6s linear infinite;
}
.s2m-cta-live .s2m-cta-line {
  position:relative;
  z-index:1;
  display:block;
  font-size:20px;
  line-height:1.55;
  font-weight:900;
  letter-spacing:.02em;
}
.s2m-cta-live .s2m-cta-line + .s2m-cta-line {
  margin-top:2px;
}
.s2m-cta-live .offer-word {
  white-space:nowrap;
}


@keyframes s2mCtaSweep {
  0% { left:-55%; }
  100% { left:125%; }
}
@keyframes s2mCtaBreath {
  0%,100% { box-shadow:0 0 18px rgba(255,194,72,.42), 0 10px 24px rgba(0,0,0,.38), inset 0 0 24px rgba(255,255,255,.31), inset 0 0 0 4px rgba(55,27,6,.20); }
  50% { box-shadow:0 0 34px rgba(255,218,112,.82), 0 14px 30px rgba(0,0,0,.42), inset 0 0 30px rgba(255,255,255,.45), inset 0 0 0 4px rgba(55,27,6,.27); }
}
@keyframes s2mCtaBorder {
  0%,100% { opacity:.62; }
  50% { opacity:1; }
}
@media (max-width: 375px) {
  .s2m-cta-live { max-width:100%; padding:16px 14px 18px; border-radius:12px; }
  .s2m-cta-live .s2m-cta-line { font-size:18px; line-height:1.5; }
}



/* =========================
   Section 3
   ========================= */
.section3-desktop {
  width:100%;
  min-height:100vh;
  display:none;
  place-items:center;
  overflow:hidden;
  background:#000713;
}
.section3-desktop .stage {
  width:min(100vw, 177.68vh);
  aspect-ratio:1672/941;
  position:relative;
  overflow:hidden;
  background:#000713;
}
.section3-desktop .stage svg { display:block; width:100%; height:100%; }
.section3-desktop .s3-title {
  font-family:"Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
  font-weight:900;
  letter-spacing:.03em;
}
.section3-desktop .s3-card-title {
  font-family:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight:900;
  letter-spacing:.01em;
}
.section3-desktop .s3-card-copy {
  font-family:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight:500;
}
.section3-desktop .s3-card {
  cursor:pointer;
  transition:opacity .18s ease;
}
.section3-desktop .s3-card:hover {
  opacity:.985;
}
.section3-desktop .s3-card *,
.section3-desktop .s3-card:hover * {
  transform:none !important;
  filter:none !important;
}
.section3-desktop .s3-cta-live { cursor:pointer; }
.section3-desktop .s3-cta-glow { animation:s3CtaGlow 2.6s ease-in-out infinite; }
.section3-desktop .s3-cta-outline { stroke-dasharray:68 18; animation:s3CtaDash 2s linear infinite; }
@keyframes s3CtaGlow {
  0%,100% { filter:drop-shadow(0 0 10px rgba(255,196,82,.25)); }
  50% { filter:drop-shadow(0 0 24px rgba(255,216,116,.7)); }
}
@keyframes s3CtaDash { to { stroke-dashoffset:-86; } }
.section3-mobile {
  position:relative;
  width:100%;
  min-height:100vh;
  overflow:hidden;
  display:none;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 6%, rgba(67,138,255,.18) 0 18%, transparent 45%),
    radial-gradient(circle at 84% 72%, rgba(12,83,201,.18) 0 18%, transparent 45%),
    linear-gradient(145deg, #000713 0%, #04173a 52%, #000713 100%);
}
.section3-mobile::before {
  content:"";
  position:absolute;
  inset:auto -10% -5% -10%;
  height:38%;
  opacity:.4;
  background-image:radial-gradient(circle, rgba(22,119,255,.72) 0 1.2px, transparent 1.6px);
  background-size:13px 13px;
  mask-image:linear-gradient(to top, black, rgba(0,0,0,.55) 42%, transparent 80%);
  -webkit-mask-image:linear-gradient(to top, black, rgba(0,0,0,.55) 42%, transparent 80%);
  pointer-events:none;
}
.s3m-inner {
  position:relative;
  z-index:1;
  width:min(100%, 460px);
  padding:34px 18px 34px;
}
.s3m-title {
  margin:0 0 22px;
  text-align:center;
  font-family:"Noto Serif TC", "Source Han Serif TC", serif;
  font-size:clamp(28px, 9vw, 45px);
  line-height:1.25;
  letter-spacing:.03em;
  font-weight:900;
  color:#fcfdff;
  text-shadow:0 0 18px rgba(255,255,255,.08), 0 0 22px rgba(33,118,255,.12);
}
.s3m-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.s3m-card {
  position:relative;
  display:grid;
  grid-template-columns:98px 1fr;
  gap:15px;
  align-items:center;
  min-height:154px;
  padding:16px 16px 16px 14px;
  border-radius:18px;
  border:1.6px solid rgba(100,176,255,.72);
  background:linear-gradient(180deg, rgba(6,33,88,.78), rgba(2,17,54,.82));
  box-shadow:inset 0 0 0 1px rgba(102,182,255,.09), 0 0 22px rgba(7,61,159,.12);
}
.s3m-iconbox {
  width:86px;
  height:86px;
  margin-inline:auto;
  border-radius:18px;
  border:1.6px solid rgba(95,177,255,.82);
  background:linear-gradient(180deg, rgba(11,41,104,.78), rgba(7,25,69,.82));
  box-shadow:inset 0 0 0 1px rgba(122,197,255,.10), 0 0 20px rgba(34,121,255,.18);
  display:grid;
  place-items:center;
  position:relative;
}
.s3m-iconbox::before {
  content:"";
  width:58px;
  height:58px;
  border-radius:14px;
  border:1.5px dashed rgba(118,196,255,.55);
}
.s3m-iconbox::after {
  content:"ICON";
  position:absolute;
  color:rgba(156,215,255,.78);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
}

.s3m-iconbox.filled::before,
.s3m-iconbox.filled::after {
  display:none;
}
.s3m-iconbox img {
  width:78px;
  height:78px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 10px rgba(61,160,255,.18));
}

.s3m-head {
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.s3m-num {
  color:#ffd56d;
  font-size:clamp(28px, 8vw, 42px);
  line-height:1;
  font-family:"Noto Serif TC", serif;
  font-weight:900;
}
.s3m-sep {
  color:rgba(255,255,255,.9);
  font-size:24px;
  line-height:1;
  margin-bottom:4px;
}
.s3m-name {
  color:#ffffff;
  font-size:clamp(20px, 5.2vw, 28px);
  line-height:1.18;
  font-weight:900;
}
.s3m-copy {
  margin:0;
  color:#d8e4f2;
  font-size:15px;
  line-height:1.55;
  letter-spacing:.01em;
}
.s3m-cta {
  position:relative;
  margin:24px auto 0;
  overflow:hidden;
  text-align:center;
  padding:18px 18px 20px;
  color:#ffd971;
  font-family:"Noto Serif TC", serif;
  font-size:clamp(24px, 6.8vw, 34px);
  line-height:1.45;
  font-weight:900;
  letter-spacing:.02em;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(5,18,54,.96), rgba(10,15,34,.96));
  border:2px solid rgba(255,217,113,.78);
  box-shadow:0 0 18px rgba(255,183,54,.22), inset 0 0 0 1px rgba(255,225,140,.16), inset 0 0 28px rgba(255,213,108,.08);
}
.s3m-cta::before {
  content:"";
  position:absolute;
  top:-35%; bottom:-35%; left:-35%; width:28%;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.07) 20%, rgba(255,246,207,.48) 50%, rgba(255,255,255,.06) 80%, transparent 100%);
  transform:skewX(-18deg);
  animation:s3mSweep 3.2s linear infinite;
}
.s3m-cta::after {
  content:"";
  position:absolute;
  inset:8px;
  border-radius:13px;
  border:1px solid rgba(255,226,136,.28);
  pointer-events:none;
}
@keyframes s3mSweep { to { left:115%; } }
@media (max-width: 767px) {
  .section3-desktop { display:none !important; }
  .section3-mobile { display:flex !important; }
}
@media (min-width: 768px) {
  .section3-desktop { display:grid !important; }
  .section3-mobile { display:none !important; }
}

/* 精確隱藏原本 React 渲染出的三個舊區塊（圖 1、Section 2、圖 2） */
#root .pain-img-section,
#root .upgrade-section,
#root .interview-output-section {
    display: none !important;
}

/* 我們新插入的 Section 在移動到正確位置前，預設隱藏 */
.circle-section-container {
    display: none;
}

/* 顯示我們新插入的高清 Section */
.circle-section-container.ready {
    display: block;
}

/* 桌面版和手機版響應式顯示切換 (針對 Section 1, 2 和 3，統一斷點為 767px/768px) */
@media (min-width: 768px) {
    .circle-section-container.ready .desktop-section {
        display: block !important;
    }
    .circle-section-container.ready .section-mobile,
    .circle-section-container.ready .section2-mobile,
    .circle-section-container.ready .section3-mobile {
        display: none !important;
    }
}
@media (max-width: 767px) {
    .circle-section-container.ready .desktop-section {
        display: none !important;
    }
    .circle-section-container.ready .section-mobile,
    .circle-section-container.ready .section2-mobile,
    .circle-section-container.ready .section3-mobile {
        display: block !important;
    }
}

/* ===== 手機版極致排版與體驗優化補丁 ===== */
@media (max-width: 767px) {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
  }
  
  /* 1. Landing Page 手機版細節優化 */
  .section-mobile, .section2-mobile, .section3-mobile {
    padding: 48px 18px 40px !important; /* 更舒適的上下留白 */
    background: #040b15 !important; /* 深邃的高階質感背景 */
  }
  
  /* 標題與副標題 */
  .section-mobile .title, .section2-mobile .title, .section3-mobile .title {
    font-size: clamp(25px, 7vw, 30px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.03em !important;
    font-weight: 900 !important;
    text-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
  
  /* 卡片細節打磨 */
  .signal-card, .s2m-card, .s3m-card {
    background: rgba(13, 27, 51, 0.45) !important; /* 玻璃擬態微透光 */
    border: 1px solid rgba(217, 145, 44, 0.2) !important; /* 金色微光邊框 */
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24) !important;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
    padding: 20px 16px !important;
  }
  
  /* 2. Watch Page 手機版細節優化 */
  .watch-v2-mobile-timeline-title {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #f8fafc !important;
    letter-spacing: 0.02em !important;
  }
  
  .watch-v2-mobile-timeline-subtitle {
    font-size: 14px !important;
    color: #94a3b8 !important;
    margin-top: 6px !important;
  }
  
  /* 時間軸項目 */
  .watch-v2-chapter-compact {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 16px 14px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  }
  
  .watch-v2-chapter-compact__time {
    font-family: monospace !important;
    font-size: 13px !important;
    color: #eab308 !important;
    font-weight: 700 !important;
    background: rgba(234, 179, 8, 0.1) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
  }
  
  .watch-v2-chapter-compact__title {
    font-size: 16px !important;
    color: #f1f5f9 !important;
    font-weight: 700 !important;
  }
  
  .watch-v2-chapter-compact__desc {
    font-size: 13px !important;
    color: #94a3b8 !important;
    line-height: 1.5 !important;
  }
}
/* ===== Watch page: compact depth-offer sections (override style block 2's forced padding) ===== */
/* 2-class specificity beats the 1-class .sectionX-mobile rules above */
.depth-offer-sections-root .section2-mobile,
.depth-offer-sections-root .section3-mobile,
.depth-offer-sections-root .section4-mobile,
.depth-offer-sections-root .section5-mobile,
.depth-offer-sections-root .section6-mobile,
.depth-offer-sections-root .section7-mobile,
.depth-offer-sections-root .section8-mobile {
  min-height: auto !important;
  padding-top: 28px !important;
  padding-bottom: 24px !important;
}

/* ===== Section 3 mobile layout fix — mirrors signal-card / s2m-card pattern ===== */
@media (max-width: 767px) {

  /* 1. Card grid: icon column fixed (same pattern as s2m-card: 112px 1fr),
        use minmax(0,1fr) so text column can shrink below content width */
  .s3m-card {
    grid-template-columns: 80px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 16px 16px 16px 14px !important;
    min-height: auto !important;
    border-radius: 18px !important;
    align-items: center !important;
  }

  /* 2. Text container: must have min-width:0 (same as .card-text in section 1)
        so it can shrink inside the grid column and not overflow */
  .s3m-content {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* 3. Header row: keep num|sep|name on one horizontal line (no wrapping)
        mirrors icon-wrap + card-title being on same row in section 1 */
  .s3m-head {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin-bottom: 5px !important;
    overflow: hidden !important;
  }

  /* 4. Number: shrink font to match card-title size in section 1 (~17px) */
  .s3m-num {
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
  }

  .s3m-sep {
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    opacity: 0.7;
  }

  /* 5. Name: truncate if too long — text wraps naturally at word boundary */
  .s3m-name {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #f8fafc !important;
    letter-spacing: 0.02em !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* 6. Fix: CSS file applies display:grid to .section3-mobile .s3m-copy
        because it was designed for old badge+heading layout.
        .s3m-copy is now a plain <p> — reset it to block (same as card-desc) */
  .section3-mobile .s3m-copy {
    display: block !important;
    grid-template-columns: unset !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #94a3b8 !important;
    word-break: break-word !important;
    letter-spacing: 0.01em !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* 7. Icon box: sized to fit the 80px grid column */
  .s3m-iconbox {
    width: 68px !important;
    height: 68px !important;
    border-radius: 14px !important;
    margin-inline: auto !important;
  }

  .s3m-iconbox::before {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }

  .s3m-iconbox img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
  }

  .s3m-iconbox svg {
    width: 36px !important;
    height: 36px !important;
  }

  .s3m-iconbox::after {
    font-size: 10px !important;
    line-height: 44px !important;
  }
}

/* ================================================================
   Watch page image fix — canva-transparent assets
   ================================================================ */

/* --- A/B/C section icons: transparent PNGs, object-fit: contain ---
   .s3d-icon is already 168px × 168px with img { object-fit: contain }
   No override needed for desktop size; tighten on mobile. */
@media (max-width: 768px) {
  .s3d-icon { width: 110px !important; height: 110px !important; }
}

/* --- Main character (section 7 desktop + mobile) --- */
.s7-person img {
  object-fit: contain !important;
  height: auto !important;
}

/* --- Mobile audience icons that use <img class="s2m-iconimg"> ---
   Original CSS had object-fit:cover + border-radius which crops transparent PNGs. */
.s2m-card .s2m-iconimg {
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* --- Section 7 desktop audience cards: swap SVG icons → background images ---
   .s7-card: width:26.5%, grid-template-columns:25% 1fr 16%
   .s7-icon: width:100%; aspect-ratio:1 (square, sized by 25% grid column) */
.s7-card .s7-icon {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.s7-card .s7-icon > svg { display: none !important; }
.s7-card.r1.left  .s7-icon { background-image: url('/assets/watch-page/canva-transparent/01-audience-engineer-experience-icon.png') !important; }
.s7-card.r2.left  .s7-icon { background-image: url('/assets/watch-page/canva-transparent/02-audience-cs-graduate-icon.png') !important; }
.s7-card.r3.left  .s7-icon { background-image: url('/assets/watch-page/canva-transparent/03-audience-project-highlight-icon.png') !important; }
.s7-card.r1.right .s7-icon { background-image: url('/assets/watch-page/canva-transparent/04-audience-low-reply-rate-icon.png') !important; }
.s7-card.r2.right .s7-icon { background-image: url('/assets/watch-page/canva-transparent/09-audience-technical-developer-laptop-icon.png') !important; }
.s7-card.r3.right .s7-icon { background-image: url('/assets/watch-page/canva-transparent/06-audience-career-breakthrough-icon.png') !important; }

/* --- Section 7 mobile audience cards: swap SVG icons → background images ---
   .s7m-card: grid-template-columns:74px 1fr 54px
   icon div is first child (74px col, no class), contains SVG without explicit size */
.s7m-card > div:first-child {
  width: 56px !important;
  height: 56px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  flex-shrink: 0 !important;
}
.s7m-card > div:first-child > svg { display: none !important; }
.s7m-grid > article:nth-child(1) > div:first-child { background-image: url('/assets/watch-page/canva-transparent/01-audience-engineer-experience-icon.png') !important; }
.s7m-grid > article:nth-child(2) > div:first-child { background-image: url('/assets/watch-page/canva-transparent/02-audience-cs-graduate-icon.png') !important; }
.s7m-grid > article:nth-child(3) > div:first-child { background-image: url('/assets/watch-page/canva-transparent/03-audience-project-highlight-icon.png') !important; }
.s7m-grid > article:nth-child(4) > div:first-child { background-image: url('/assets/watch-page/canva-transparent/04-audience-low-reply-rate-icon.png') !important; }
.s7m-grid > article:nth-child(5) > div:first-child { background-image: url('/assets/watch-page/canva-transparent/09-audience-technical-developer-laptop-icon.png') !important; }
.s7m-grid > article:nth-child(6) > div:first-child { background-image: url('/assets/watch-page/canva-transparent/06-audience-career-breakthrough-icon.png') !important; }

/* --- Section 9 desktop delivery cards: real visual preview images ---
   Card height: 260px (compiled) → 300px so image can take ~43% of card.
   Image: width:100%, height:130px, object-fit:cover for clean screenshot crop. */
.s9-desktop .s9-card {
  height: 300px !important;
}
.s9-desktop .s9-card-icon {
  width: 100% !important;
  height: 130px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 12px !important;
  margin: 0 0 12px !important;
  display: block !important;
  overflow: hidden !important;
  filter: none !important;
}

/* 每週直播 card only: person's face is at 25–45% of image height.
   Override object-position from center top → center center so the face
   lands in the visible crop window instead of the white wall above. */
.s9-desktop .s9-card-icon[src*="01-weekly-live"] {
  object-position: center center !important;
}
.s9-mobile .s9m-card-icon[src*="01-weekly-live"] {
  object-position: center center !important;
}

/* Tablet 761px–1024px: proportionally smaller */
@media (min-width: 761px) and (max-width: 1024px) {
  .s9-desktop .s9-card {
    height: 275px !important;
  }
  .s9-desktop .s9-card-icon {
    height: 110px !important;
  }
}

/* --- Section 9 mobile delivery cards: left-side image, 90–110px height ---
   .s9m-card: grid-template-columns:88px 1fr, padding:12px 18px, overflow:hidden */
.s9-mobile .s9m-card {
  grid-template-columns: 100px 1fr !important;
  padding-left: 0 !important;
  min-height: 110px !important;
}
.s9-mobile .s9m-card-icon {
  width: 100px !important;
  height: 100px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  filter: none !important;
  align-self: stretch !important;
}
.s9-mobile .s9m-card > div {
  padding: 14px 14px 14px 12px !important;
  align-self: center !important;
}

/* ================================================================
   Audience section (「這個訓練營適合什麼人？」) — dotline connector fix

   The six .s7-dotline divs connect left/right cards toward the center
   person. They use position:absolute inside section7-stage.

   Problem: compiled z-index:1 is too low — the section7-stage:before
   grid overlay (positioned, z-index:auto ≈ 0) and the person element
   (z-index:2) compete visually, making the lines appear sunken.

   Fix:
   - Raise z-index to 3: above background (0), above person (2),
     below cards (4) and titles (8).
   - Add a subtle gold drop-shadow for premium visual clarity.
   - Opacity 0.6 (within 0.45–0.7 target range).

   Mobile: section7-stage is already display:none at max-width:760px
   (compiled rule), so dotlines are inherently hidden on mobile.
   Explicitly hide at ≤1024px (tablet) to avoid clutter.
   ================================================================ */

.section7 .s7-dotline {
  z-index: 3 !important;
  opacity: 0.6 !important;
  filter: drop-shadow(0 0 4px rgba(244, 184, 66, 0.45)) !important;
}

/* Tablet (761px–1024px) and mobile: hide connector lines */
@media (max-width: 1024px) {
  .section7 .s7-dotline {
    display: none !important;
  }
}
/* ================================================================
   WATCH PAGE LAYOUT FIX — upper sections alignment

   The compiled @media (min-width:761px) block gives section6-desktop:
     width:100vw; max-width:2048px; margin:0 auto; overflow:hidden;
     aspect-ratio:16/9

   Sections 1-5 (.wrap) already have width:100vw; max-width:2048px;
   aspect-ratio:16/9; overflow:hidden from the base compiled rule,
   but are MISSING margin:0 auto — which is why they appear
   left-aligned while section6 is correctly centered.

   Fix: add margin:0 auto inside the same breakpoint to match
   section6's centering. No other changes needed.
   ================================================================ */

@media (min-width: 761px) {
  .depth-offer-sections-root .wrap {
    margin: 0 auto !important;
  }
}
/* ================================================================
   MOBILE REDESIGN PHASE 1
   Sections: Hero (watch-v2-main) + Section 2 + Section 3 + Section 9
   All rules inside @media (max-width: 760px).
   Desktop layout fully preserved — zero changes outside breakpoint.
   ================================================================ */

@media (max-width: 760px) {

  /* ============================================================
     HERO — watch-v2-main
     Trim excessive padding; tighten title scale; keep player and
     instructor thumbnail responsive.
     ============================================================ */

  .watch-v2-main {
    padding: 24px 16px 40px !important;
  }

  .watch-v2-title {
    font-size: clamp(1.45rem, 6.2vw, 1.9rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }

  .watch-v2-subtitle {
    font-size: clamp(0.85rem, 3.2vw, 0.95rem) !important;
    line-height: 1.7 !important;
    margin: 0 auto 20px !important;
    max-width: 100% !important;
  }

  .watch-v2-player-wrap {
    margin-bottom: 16px !important;
  }

  .watch-v2-player {
    width: 100% !important;
    border-radius: 12px !important;
  }

  /* ============================================================
     SECTION 2 — 你不是沒有能力，而是面試官看不到你的價值
     Polish title size, card padding, icon container, typography.
     ============================================================ */

  .s2m-shell {
    padding: 0 8px !important;
    max-width: 100% !important;
  }

  .s2m-title {
    font-size: clamp(22px, 6.5vw, 28px) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    padding: 0 4px !important;
  }

  .s2m-desc {
    font-size: clamp(13px, 3.5vw, 14.5px) !important;
    line-height: 1.65 !important;
    margin-bottom: 18px !important;
    padding: 0 4px !important;
  }

  .s2m-cards {
    gap: 10px !important;
  }

  .s2m-card {
    grid-template-columns: 100px 1fr !important;
    padding: 14px 14px 14px 0 !important;
    min-height: 96px !important;
    border-radius: 13px !important;
    gap: 0 !important;
  }

  .s2m-card .s2m-iconimg {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    justify-self: center !important;
  }

  .s2m-copy {
    padding-left: 14px !important;
    border-left-width: 1px !important;
  }

  .s2m-copy h3 {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.35 !important;
    margin: 0 0 4px !important;
    white-space: normal !important;
  }

  .s2m-copy p {
    font-size: clamp(12px, 3.2vw, 13.5px) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  .s2m-final {
    font-size: clamp(13px, 3.5vw, 15px) !important;
    margin-top: 18px !important;
    padding: 0 4px !important;
    text-align: center !important;
  }

  .s2m-btn {
    margin-top: 20px !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* ============================================================
     SECTION 3 — 這不是普通面試班，而是 8 星期 Strong Hire 系統訓練
     Replace transparent floating animated cards with premium
     styled A/B/C cards. Icons from fixed/ (gold + cyan variants).
     ============================================================ */

  .s3m-shell {
    padding: 0 8px !important;
    max-width: 100% !important;
  }

  .s3m-title {
    padding-left: 12px !important;
    margin-bottom: 12px !important;
  }

  .s3m-title .line {
    font-size: clamp(21px, 6vw, 27px) !important;
  }

  .s3m-desc {
    font-size: clamp(13px, 3.5vw, 15px) !important;
    line-height: 1.65 !important;
    margin-bottom: 18px !important;
    padding-left: 12px !important;
  }

  .s3m-flow {
    gap: 12px !important;
    padding: 0 !important;
  }

  /* Override transparent floating animation → premium card */
  .section3-mobile .s3m-card.image-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #041628f0, #081e36e0) !important;
    border: 2px solid #c99742 !important;
    border-radius: 16px !important;
    padding: 22px 20px 18px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    animation: none !important;
    box-shadow: inset 0 0 24px rgba(244,168,45,0.07), 0 10px 28px rgba(0,0,0,0.45) !important;
  }

  /* Card B gets cyan border + glow */
  .section3-mobile .s3m-card.card-b {
    border-color: #2fd4ff !important;
    box-shadow: inset 0 0 24px rgba(47,212,255,0.07), 0 10px 28px rgba(0,0,0,0.45) !important;
  }

  /* Icons: render full size, centered, no cropping */
  .section3-mobile .s3m-card.image-card img {
    width: auto !important;
    height: 130px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    filter: none !important;
    border-radius: 0 !important;
  }

  /* Use gold/cyan fixed-color variants of each icon */
  .section3-mobile .s3m-card.card-a img {
    content: url('/assets/watch-page/fixed/01-abc-A-hiring-value-resume-award-gold.png') !important;
  }
  .section3-mobile .s3m-card.card-b img {
    content: url('/assets/watch-page/fixed/02-abc-B-judgment-decision-tree-cyan.png') !important;
  }
  .section3-mobile .s3m-card.card-c img {
    content: url('/assets/watch-page/fixed/03-abc-C-proactive-hiring-signal-gold.png') !important;
  }

  /* Arrow between cards */
  .s3m-arrow {
    text-align: center !important;
    font-size: 26px !important;
    line-height: 1 !important;
    color: rgba(244,184,66,0.65) !important;
    margin: -2px auto !important;
    display: block !important;
  }

  /* CTA + note */
  .s3m-btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 18px !important;
    text-align: center !important;
  }

  .s3m-note {
    font-size: clamp(12px, 3.2vw, 14px) !important;
    text-align: center !important;
    margin-top: 12px !important;
    line-height: 1.5 !important;
  }

  /* ============================================================
     SECTION 9 — Waiting List
     Fix heading overflow, kicker size, full-width CTA.
     Keep all five feature card images. Polish bonus row.
     ============================================================ */

  .s9-mobile {
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Kicker ("8 週訓練營" or similar) */
  .s9m-kicker {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.1 !important;
  }

  /* Program label */
  .s9m-program {
    font-size: clamp(16px, 4.5vw, 22px) !important;
    margin-top: 8px !important;
  }

  /* *** OVERFLOW FIX: "Waiting List 現已開放" row ***
     Compiled CSS: display:flex; gap:18px; white-space:nowrap → overflows 390px.
     Fix: stack vertically, remove nowrap.  */
  .s9m-main {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    white-space: normal !important;
    margin-top: 14px !important;
  }

  .s9m-waiting {
    font-size: clamp(26px, 8vw, 36px) !important;
    white-space: normal !important;
    line-height: 1.05 !important;
  }

  .s9m-open {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    white-space: normal !important;
    line-height: 1.1 !important;
  }

  /* Description */
  .s9m-desc {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.6 !important;
    margin-top: 16px !important;
  }

  /* Card list */
  .s9m-card-list {
    margin-top: 18px !important;
    gap: 10px !important;
  }

  /* Feature cards: 100px image column + text */
  .s9-mobile .s9m-card {
    grid-template-columns: 100px 1fr !important;
    padding: 0 !important;
    padding-left: 0 !important;
    min-height: 96px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  .s9-mobile .s9m-card-icon {
    width: 100px !important;
    height: 100% !important;
    min-height: 96px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    filter: none !important;
    display: block !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
  }

  /* Fix 每週直播 crop — person face centered */
  .s9-mobile .s9m-card-icon[src*="01-weekly-live"] {
    object-position: center center !important;
  }

  .s9-mobile .s9m-card > div {
    padding: 12px 14px 12px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: center !important;
  }

  /* CTA button — full width, no overflow */
  .s9m-cta {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    white-space: normal !important;
    height: auto !important;
    min-height: 54px !important;
    line-height: 1.3 !important;
    padding: 14px 16px !important;
    font-size: clamp(17px, 4.8vw, 20px) !important;
    border-radius: 10px !important;
    margin: 20px auto 0 !important;
  }

  /* Note below CTA */
  .s9m-note {
    font-size: clamp(12px, 3.2vw, 13.5px) !important;
    margin-top: 12px !important;
    line-height: 1.5 !important;
  }

  /* Bonus/resource row */
  .s9m-bonus {
    margin: 18px auto 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .s9m-bonus-head {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 14px 10px !important;
  }

  .s9m-gift-icon {
    font-size: 22px !important;
    flex-shrink: 0 !important;
  }

  .s9m-bonus-head-text {
    font-size: clamp(13px, 3.5vw, 15px) !important;
    line-height: 1.45 !important;
  }

  .s9m-bonus-grid {
    gap: 8px !important;
    padding: 10px 14px 14px !important;
  }

  .s9m-bonus-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .s9m-item-icon {
    font-size: 18px !important;
    flex-shrink: 0 !important;
  }

  .s9m-item-label {
    font-size: clamp(12px, 3.2vw, 14px) !important;
    line-height: 1.4 !important;
  }

} /* end @media (max-width: 760px) */
