/* ============================================================
   sections.css — styles for the rebuilt (rb-) sections, ported
   from the former inline <style> blocks in index.html <body>
   (order preserved). Components live in src/components/rebuilt/.
   ============================================================ */
/* ---------- rb-styles ---------- */
/* ===================== Rebuilt sections (rb-) ===================== */
#circle-sections-root .rb-section{
  position:relative; width:100%; overflow:hidden;
  padding:clamp(56px,8vw,104px) 20px;
  background:linear-gradient(180deg,#010714 0%,#020b1f 40%,#03102a 100%);
}
#circle-sections-root .rb-section--alt{
  background:linear-gradient(180deg,#03102a 0%,#04122e 50%,#020b1f 100%);
}
#circle-sections-root .rb-section::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 45% at 15% 0%, rgba(47,125,255,.12), transparent 60%),
             radial-gradient(55% 40% at 90% 15%, rgba(245,199,107,.08), transparent 60%);
}
#circle-sections-root .rb-container{position:relative; max-width:1180px; margin:0 auto;}

/* header */
#circle-sections-root .rb-head{text-align:center; max-width:760px; margin:0 auto clamp(34px,5vw,58px);}
#circle-sections-root .rb-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:clamp(12px,1.4vw,13.5px); font-weight:800; letter-spacing:.16em;
  color:#ffd77a; text-transform:uppercase; margin-bottom:14px;
  padding:6px 14px; border:1px solid rgba(245,199,107,.34); border-radius:999px;
  background:rgba(245,199,107,.07);
}
#circle-sections-root .rb-title{
  margin:0; font-family:"Noto Serif TC","Source Han Serif TC",serif; font-weight:900;
  font-size:clamp(1.75rem,5vw,3rem); line-height:1.22; color:#f8fbff; letter-spacing:.01em;
}
#circle-sections-root .rb-title .g{color:#ffd166;}
#circle-sections-root .rb-title-underline{
  width:60px; height:4px; margin:18px auto 0; border-radius:999px;
  background:linear-gradient(90deg,#f5c76b,#ffb347);
}
#circle-sections-root .rb-sub{
  margin:18px auto 0; font-size:clamp(.98rem,1.9vw,1.12rem); line-height:1.9; color:#c7d7ef; max-width:640px;
  word-break:normal; overflow-wrap:break-word; line-break:auto;
}
#circle-sections-root .rb-sub .no-break{ white-space:nowrap; }

/* reveal animation */
#circle-sections-root .rb-reveal{opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);}
#circle-sections-root .rb-reveal.in{opacity:1; transform:none;}

/* ---- Section 1: pain grid ---- */
#circle-sections-root .rb-pain-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,22px);}
#circle-sections-root .rb-pain-card{
  position:relative; border-radius:20px; overflow:hidden; background:#071a38;
  border:1px solid rgba(119,185,255,.16);
  box-shadow:0 20px 44px rgba(0,0,0,.34);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#circle-sections-root .rb-pain-card:hover{transform:translateY(-7px); border-color:rgba(245,199,107,.5); box-shadow:0 30px 60px rgba(0,0,0,.46);}
#circle-sections-root .rb-pain-media{position:relative; aspect-ratio:16/10; overflow:hidden;}
#circle-sections-root .rb-pain-media img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.22,1,.36,1); filter:saturate(.96) contrast(1.02);}
#circle-sections-root .rb-pain-card:hover .rb-pain-media img{transform:scale(1.07);}
#circle-sections-root .rb-pain-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,10,26,0) 40%, rgba(3,10,26,.72) 100%), linear-gradient(120deg, rgba(255,70,70,.14), transparent 55%);}
#circle-sections-root .rb-pain-num{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.04em;
  color:#ffd9d9; background:rgba(200,40,40,.34); border:1px solid rgba(255,120,120,.5);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
#circle-sections-root .rb-pain-body{padding:16px 18px 20px;}
#circle-sections-root .rb-pain-title{margin:0; font-size:clamp(1.08rem,2.2vw,1.24rem); font-weight:900; color:#fff;}
#circle-sections-root .rb-pain-copy{margin:7px 0 0; font-size:clamp(.9rem,1.7vw,.97rem); line-height:1.7; color:#b8c8e4;}

/* ---- Section 2: steps ---- */
#circle-sections-root .rb-steps{display:flex; flex-direction:column; gap:clamp(20px,3vw,30px);}
#circle-sections-root .rb-step{
  display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(22px,3.5vw,44px); align-items:center;
  background:linear-gradient(135deg, rgba(11,35,79,.5), rgba(3,16,42,.4));
  border:1px solid rgba(119,185,255,.16); border-radius:22px; padding:clamp(16px,2.2vw,22px);
}
#circle-sections-root .rb-step:nth-child(even) .rb-step-media{order:2;}
#circle-sections-root .rb-step-media{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/9;}
#circle-sections-root .rb-step-media img{width:100%; height:100%; object-fit:cover; transition:transform .9s ease;}
#circle-sections-root .rb-step:hover .rb-step-media img{transform:scale(1.05);}
#circle-sections-root .rb-step-media::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(3,16,42,.1), rgba(3,16,42,.5));}
#circle-sections-root .rb-step-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  font-family:"Noto Sans TC",sans-serif; font-weight:900; font-size:1.1rem; color:#07142c;
  background:linear-gradient(135deg,#ffe9a8,#f5c76b 50%,#d89b2d);
  box-shadow:0 8px 20px rgba(245,199,107,.4);
}
#circle-sections-root .rb-step-body{position:relative;}
#circle-sections-root .rb-step-kicker{font-size:.8rem; font-weight:800; letter-spacing:.14em; color:#8fb2e8; text-transform:uppercase;}
#circle-sections-root .rb-step-title{margin:6px 0 0; font-family:"Noto Serif TC",serif; font-weight:900; font-size:clamp(1.3rem,3vw,1.7rem); color:#fff;}
#circle-sections-root .rb-step-copy{margin:12px 0 0; font-size:clamp(.96rem,1.8vw,1.05rem); line-height:1.85; color:#c2d3ef;}
#circle-sections-root .rb-step-ghost{position:absolute; top:-42px; right:2px; font-family:"Noto Sans TC",sans-serif; font-weight:900; font-size:5.5rem; line-height:1; color:rgba(245,199,107,.2); pointer-events:none; z-index:0; letter-spacing:.02em;}

/* ---- closing pill ---- */
#circle-sections-root .rb-closing{
  margin:clamp(32px,5vw,50px) auto 0; max-width:820px; text-align:center;
  padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,34px); border-radius:18px;
  background:linear-gradient(135deg, rgba(245,199,107,.14), rgba(245,199,107,.05));
  border:1px solid rgba(245,199,107,.36);
  font-size:clamp(1.02rem,2.2vw,1.28rem); font-weight:800; line-height:1.7; color:#fff8e8;
}
#circle-sections-root .rb-closing .g{color:#ffd166;}

/* ---- Section 3: toolkit ---- */
#circle-sections-root .rb-tools{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,26px);}
#circle-sections-root .rb-tool-card{
  position:relative; display:flex; gap:0; flex-direction:column; border-radius:20px; overflow:hidden;
  background:#071a38; border:1px solid rgba(245,199,107,.22);
  box-shadow:0 20px 44px rgba(0,0,0,.34); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#circle-sections-root .rb-tool-card:hover{transform:translateY(-7px); border-color:rgba(245,199,107,.6); box-shadow:0 32px 64px rgba(0,0,0,.5);}
#circle-sections-root .rb-tool-media{position:relative; aspect-ratio:16/9; overflow:hidden;}
#circle-sections-root .rb-tool-media img{width:100%; height:100%; object-fit:cover; transition:transform .9s ease;}
#circle-sections-root .rb-tool-card:hover .rb-tool-media img{transform:scale(1.06);}
#circle-sections-root .rb-tool-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,10,26,.15), rgba(3,10,26,.66));}
#circle-sections-root .rb-tool-tag{
  position:absolute; top:0; right:0; z-index:2;
  padding:8px 16px; border-bottom-left-radius:14px; overflow:hidden;
  font-size:12.5px; font-weight:900; letter-spacing:.06em; color:#07142c;
  background:linear-gradient(135deg,#ffe9a8,#f5c76b 55%,#d89b2d);
}
#circle-sections-root .rb-tool-tag::after{content:""; position:absolute; top:0; left:-140%; width:60%; height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.75),transparent); transform:skewX(-18deg); animation:rb-shimmer 3.4s ease-in-out infinite;}
#circle-sections-root .rb-tool-body{padding:18px 22px 24px; display:flex; gap:14px; align-items:flex-start;}
#circle-sections-root .rb-tool-num{font-family:"Noto Sans TC",sans-serif; font-weight:900; font-size:1.9rem; line-height:1; color:#ffd166; flex:0 0 auto; text-shadow:0 0 16px rgba(255,201,80,.3);}
#circle-sections-root .rb-tool-txt h3{margin:0; font-size:clamp(1.1rem,2.2vw,1.28rem); font-weight:900; color:#fff;}
#circle-sections-root .rb-tool-txt p{margin:7px 0 0; font-size:clamp(.9rem,1.7vw,.98rem); line-height:1.7; color:#b8c8e4;}
#circle-sections-root .rb-tools-cta{margin:clamp(30px,4.5vw,46px) auto 0; text-align:center;}
#circle-sections-root .rb-btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:16px clamp(26px,4vw,42px); border:0; border-radius:999px;
  font-family:inherit; font-weight:900; font-size:clamp(1rem,2vw,1.14rem); color:#07142c;
  background:radial-gradient(circle at 24% 14%,#ffffff9c,transparent 26%),linear-gradient(135deg,#fff0b8,#f5c76b 40%,#d69a2f 72%,#a06a1f);
  box-shadow:0 0 0 4px rgba(245,199,107,.16),0 20px 46px rgba(245,199,107,.3);
  transition:transform .2s ease, box-shadow .2s ease;
}
#circle-sections-root .rb-btn:hover{transform:translateY(-2px); box-shadow:0 0 0 4px rgba(245,199,107,.24),0 26px 56px rgba(245,199,107,.42);}

@keyframes rb-shimmer{0%,60%{left:-140%;}100%{left:160%;}}

/* ---- responsive ---- */
@media (max-width:980px){
  #circle-sections-root .rb-pain-grid{grid-template-columns:repeat(2,1fr);}
  #circle-sections-root .rb-step{grid-template-columns:1fr; gap:16px;}
  #circle-sections-root .rb-step:nth-child(even) .rb-step-media{order:0;}
  #circle-sections-root .rb-step-ghost{display:block; top:4px; right:10px; font-size:3.4rem; color:rgba(245,199,107,.22);}
}
@media (max-width:620px){
  #circle-sections-root .rb-pain-grid{grid-template-columns:1fr; max-width:400px; margin:0 auto;}
  #circle-sections-root .rb-tools{grid-template-columns:1fr; max-width:420px; margin:0 auto;}
}
@media (prefers-reduced-motion:reduce){
  #circle-sections-root .rb-reveal{transition:opacity .3s ease; transform:none;}
  #circle-sections-root .rb-tool-tag::after{animation:none;}
  #circle-sections-root .rb-pain-media img,#circle-sections-root .rb-step-media img,#circle-sections-root .rb-tool-media img{transition:none;}
}
/* ---------- pb-styles ---------- */
/* ===== Interactive pain-point people switcher (pint-) : hover / auto-rotate ===== */
#circle-sections-root .pint{margin-top:clamp(4px,1vw,16px);}
#circle-sections-root .pint-row{display:flex; align-items:flex-end; justify-content:center; gap:clamp(2px,0.8vw,12px); max-width:1180px; margin:0 auto;}
#circle-sections-root .pint-item{position:relative; flex:1 1 0; min-width:0; height:540px; cursor:pointer; -webkit-tap-highlight-color:transparent;}
#circle-sections-root .pint-item:focus-visible{outline:2px solid #ffd166; outline-offset:4px; border-radius:12px;}
#circle-sections-root .pint-item::after{content:""; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:66%; height:15px; border-radius:50%; background:radial-gradient(50% 60% at 50% 50%, rgba(0,0,0,.55), transparent 72%); filter:blur(5px); opacity:0; transition:opacity .28s ease; z-index:0;}
#circle-sections-root .pint-item.active::after{opacity:1;}

#circle-sections-root .pint-person{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%); transform-origin:bottom center;
  height:400px; width:auto; object-fit:contain; z-index:1;
  opacity:.55; filter:saturate(.85) brightness(.9);
  transition:transform .27s ease, opacity .27s ease, filter .27s ease;
}
#circle-sections-root .pint-item.active .pint-person{opacity:1; filter:none; transform:translateX(-50%) scale(1.08);}
#circle-sections-root .pint-item:not(.active):hover .pint-person{opacity:.7;}

#circle-sections-root .pint-bubble{
  position:absolute; left:50%; bottom:430px; transform:translateX(-50%) scale(.86); transform-origin:bottom center;
  width:186px; max-width:calc(100vw - 28px); min-width:0; box-sizing:border-box; padding:14px 18px; border-radius:16px; z-index:2;
  text-align:center; height:auto;
  background:linear-gradient(150deg, rgba(12,30,62,.96), rgba(6,17,40,.97));
  border:1px solid rgba(120,185,255,.3);
  box-shadow:0 14px 30px rgba(0,0,0,.42);
  opacity:.5; transition:opacity .27s ease, transform .27s cubic-bezier(.34,1.4,.64,1), border-color .27s ease, box-shadow .27s ease;
}
#circle-sections-root .pint-item.active .pint-bubble{opacity:1; width:236px; transform:translateX(-50%) scale(1); border-color:rgba(245,199,107,.85); box-shadow:0 0 0 1px rgba(245,199,107,.3), 0 20px 44px rgba(0,0,0,.5), 0 0 34px rgba(245,199,107,.16); z-index:4;}
#circle-sections-root .pint-bubble::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:10px solid transparent; border-top-color:rgba(9,21,45,.97);}
#circle-sections-root .pint-bubble::before{content:""; position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); width:2px; height:20px; background:repeating-linear-gradient(180deg, rgba(148,178,220,.5) 0 4px, transparent 4px 9px); opacity:.5; transition:opacity .27s, background .27s;}
#circle-sections-root .pint-item.active .pint-bubble::before{opacity:1; background:repeating-linear-gradient(180deg, rgba(245,199,107,.9) 0 4px, transparent 4px 9px);}

#circle-sections-root .pint-title{margin:0; font-size:clamp(1rem,1.35vw,1.14rem); font-weight:900; color:#fff; line-height:1.32; letter-spacing:.01em;}
#circle-sections-root .pint-item.active .pint-title{color:#ffe6a6;}
#circle-sections-root .pint-desc{margin:0; font-size:.9rem; line-height:1.5; color:#c2d1ea; max-height:0; overflow:hidden; opacity:0; transition:max-height .3s ease, opacity .27s ease, margin .27s ease;}
#circle-sections-root .pint-item.active .pint-desc{max-height:200px; opacity:1; margin-top:10px;}

#circle-sections-root .pint-dots{display:none;}

/* ---------- mobile: single active + auto-rotating carousel ---------- */
@media (max-width:860px){
  #circle-sections-root .pint-row{display:block; position:relative; max-width:440px; margin:0 auto; min-height:500px;}
  #circle-sections-root .pint-item{display:none; height:auto; cursor:default;}
  #circle-sections-root .pint-item.active{display:flex; flex-direction:column; align-items:center; min-height:500px;}
  #circle-sections-root .pint-item::after{display:none;}
  #circle-sections-root .pint-bubble{position:static; transform:none; width:100%; max-width:min(360px, calc(100vw - 40px)); opacity:1; margin:0 auto 16px; padding:16px 20px; height:auto; overflow:visible;}
  #circle-sections-root .pint-item.active .pint-bubble{transform:none; width:100%;}
  #circle-sections-root .pint-bubble::after,
  #circle-sections-root .pint-bubble::before{display:none;}
  #circle-sections-root .pint-title{font-size:1.18rem;}
  #circle-sections-root .pint-desc{font-size:1rem; line-height:1.5; max-height:none; opacity:1; margin-top:9px;}
  #circle-sections-root .pint-person{position:static; transform:none; height:auto; max-height:388px; width:auto; max-width:80vw; opacity:1; filter:none;}
  #circle-sections-root .pint-item.active .pint-person{transform:none;}
  #circle-sections-root .pint-item.active .pint-person,
  #circle-sections-root .pint-item.active .pint-bubble{animation:pint-fade .45s ease;}
  #circle-sections-root .pint-dots{display:flex; justify-content:center; gap:10px; margin-top:16px;}
  #circle-sections-root .pint-dot{width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(150,180,220,.35); transition:transform .25s, background .25s, box-shadow .25s;}
  #circle-sections-root .pint-dot.active{background:#ffd166; transform:scale(1.45); box-shadow:0 0 0 4px rgba(255,209,102,.18);}
}
/* mobile-only 左右箭頭 + 滑動提示 */
#circle-sections-root .pint-arrow{ display:none; }
#circle-sections-root .pint-hint{ display:none; }
@media (max-width:860px){
  #circle-sections-root .pint-arrow{ display:grid; place-items:center; position:absolute; top:52%; transform:translateY(-50%);
    z-index:6; width:40px; height:40px; border-radius:50%; padding:0 0 3px; cursor:pointer;
    background:rgba(8,20,40,.65); border:1px solid rgba(245,199,107,.45); color:#f5c76b;
    font-size:26px; line-height:1; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:0 6px 18px rgba(0,0,0,.42); transition:background .2s ease, transform .2s ease, border-color .2s ease; }
  #circle-sections-root .pint-arrow:hover{ background:rgba(8,20,40,.92); border-color:rgba(245,199,107,.72); }
  #circle-sections-root .pint-arrow:active{ transform:translateY(-50%) scale(.9); }
  #circle-sections-root .pint-arrow--prev{ left:0; }
  #circle-sections-root .pint-arrow--next{ right:0; }
  #circle-sections-root .pint-hint{ display:block; text-align:center; margin-top:11px; font-size:12px; letter-spacing:.02em; color:rgba(150,180,220,.62); }
}
/* 移除手機版重複的風險說明卡（final-gate 內「還在靠臨場發揮？」） */
@media (max-width:768px){ .fg-risk-mobile{ display:none !important; } }
@keyframes pint-fade{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){
  #circle-sections-root .pint-person,#circle-sections-root .pint-bubble,#circle-sections-root .pint-desc{transition:none;}
  #circle-sections-root .pint-item.active .pint-person,#circle-sections-root .pint-item.active .pint-bubble{animation:none;}
}
/* ---------- story-styles ---------- */
/* ===== 90-min curriculum: vertical storytelling timeline ===== */
#circle-sections-root .story{ position:relative; max-width:540px; margin:clamp(10px,2vw,22px) auto 0; padding-left:56px; box-sizing:border-box; }
#circle-sections-root .story-line{ position:absolute; left:24px; top:12px; bottom:18px; width:3px; border-radius:3px; overflow:hidden; z-index:1;
  background:linear-gradient(180deg, rgba(95,160,255,.12), rgba(245,199,107,.28) 9%, rgba(245,199,107,.28) 86%, rgba(245,199,107,.34));
  box-shadow:0 0 10px rgba(245,199,107,.2); }
/* progress fill: the path already travelled (down to the active milestone) glows brighter */
#circle-sections-root .story-line-fill{ position:absolute; left:0; top:0; width:100%; height:var(--fill-h,40px); border-radius:3px;
  background:linear-gradient(180deg, rgba(255,230,166,.55), #ffd166 60%, #ffce5a);
  box-shadow:0 0 10px rgba(245,199,107,.55); transition:height .55s cubic-bezier(.22,1,.36,1); }
#circle-sections-root .story-flow{ position:absolute; left:-1.5px; width:6px; height:70px; border-radius:6px; filter:blur(.6px); opacity:.5;
  background:linear-gradient(180deg, transparent, rgba(255,240,200,.8) 50%, transparent);
  animation:story-run 5s linear infinite; }
@keyframes story-run{ 0%{ top:-70px; } 100%{ top:100%; } }

/* moving roadmap piece — a gold pawn that glides to the active milestone (mobile only) */
#circle-sections-root .story-marker{ display:none; }

/* roadmap destination marker — reach Offer */
#circle-sections-root .story-goal{ position:relative; display:flex; align-items:center; gap:14px; margin-top:8px; min-height:50px; }
#circle-sections-root .story-goal-node{ position:absolute; left:-53px; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; display:grid; place-items:center; z-index:4;
  background:radial-gradient(circle at 32% 26%, #fff6d8, #ffd166 52%, #e0a534);
  box-shadow:0 0 0 5px rgba(4,14,34,1), 0 0 22px rgba(245,199,107,.55), 0 8px 22px rgba(245,199,107,.4);
  animation:story-goal-glow 2.8s ease-in-out infinite; }
@keyframes story-goal-glow{ 0%,100%{ box-shadow:0 0 0 5px rgba(4,14,34,1), 0 0 18px rgba(245,199,107,.45), 0 8px 22px rgba(245,199,107,.35); } 50%{ box-shadow:0 0 0 5px rgba(4,14,34,1), 0 0 34px rgba(245,199,107,.8), 0 8px 26px rgba(245,199,107,.55); } }
#circle-sections-root .story-goal-node svg{ width:23px; height:23px; color:#07142c; }
#circle-sections-root .story-goal-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
#circle-sections-root .story-goal-k{ font-size:11px; font-weight:800; letter-spacing:.2em; color:#ffd77a; }
#circle-sections-root .story-goal-t{ font-family:"Noto Serif TC","Source Han Serif TC",serif; font-weight:900; font-size:1.26rem; color:#fff; line-height:1.2; }
#circle-sections-root .story-goal-t .g{ color:#ffd166; }

#circle-sections-root .story-step{ position:relative; padding-bottom:clamp(18px,3.4vw,30px); opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
#circle-sections-root .story-step.in{ opacity:1; transform:none; }
#circle-sections-root .story-step:last-child{ padding-bottom:0; }

#circle-sections-root .story-node{ position:absolute; left:-53px; top:8px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; z-index:3;
  background:rgba(8,20,44,.95); border:1px solid rgba(245,199,107,.4); box-shadow:0 0 0 5px rgba(4,14,34,1); transition:transform .35s ease, background .35s ease, box-shadow .35s ease; }
#circle-sections-root .story-num{ font-family:"Noto Sans TC",sans-serif; font-weight:900; font-size:1rem; color:#ffdf9b; font-variant-numeric:tabular-nums; }
#circle-sections-root .story-step.is-active .story-node{ transform:scale(1.07); background:radial-gradient(circle at 32% 26%, #fff6d8, #f5c76b 56%, #d69a2f); box-shadow:0 0 0 5px rgba(4,14,34,1), 0 8px 22px rgba(245,199,107,.5); }
#circle-sections-root .story-step.is-active .story-num{ color:#07142c; }

#circle-sections-root .story-card{ position:relative; border-radius:16px; overflow:hidden;
  background:linear-gradient(150deg, rgba(13,32,64,.72), rgba(6,16,36,.66));
  border:1px solid rgba(119,185,255,.16); box-shadow:0 16px 34px rgba(0,0,0,.34);
  transition:border-color .35s ease, box-shadow .35s ease; }
#circle-sections-root .story-step.is-active .story-card{ border-color:rgba(245,199,107,.5); box-shadow:0 22px 46px rgba(0,0,0,.46), 0 0 26px rgba(245,199,107,.1); }
#circle-sections-root .story-media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
#circle-sections-root .story-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.22,1,.36,1); }
#circle-sections-root .story-step.is-active .story-media img{ transform:scale(1.05); }
#circle-sections-root .story-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,10,26,.04) 40%, rgba(3,10,26,.5) 78%, rgba(3,10,26,.82)); }
#circle-sections-root .story-ghost{ position:absolute; right:12px; bottom:4px; z-index:2; font-family:"Noto Sans TC",sans-serif; font-weight:900; font-size:3.4rem; line-height:1; color:rgba(255,255,255,.13); letter-spacing:.02em; pointer-events:none; }
#circle-sections-root .story-body{ padding:14px 16px 16px; }
#circle-sections-root .story-title{ margin:0; font-family:"Noto Serif TC","Source Han Serif TC",serif; font-weight:900; font-size:clamp(1.16rem,4.4vw,1.4rem); color:#fff; line-height:1.32; word-break:keep-all; overflow-wrap:normal; text-wrap:balance; }
#circle-sections-root .story-title .no-break{ white-space:nowrap; }
#circle-sections-root .story-desc{ margin:8px 0 0; font-size:clamp(.92rem,3.4vw,1rem); line-height:1.68; color:#c2d2ee; word-break:normal; overflow-wrap:break-word; text-wrap:pretty; }
#circle-sections-root .story-desc .no-break{ white-space:nowrap; }

/* ---- mobile: compact stacked accordion ----
   Collapsed cards are short title bars packed together (small gaps); the active card expands
   with its image + description. No tall spacers, so no big empty gaps / long empty line. */
@media (max-width:860px){
  #circle-sections-root .story-step{ padding-bottom:14px; }
  #circle-sections-root .story-step:last-child{ padding-bottom:0; }

  /* moving pawn marker: a dark game-piece on a gold milestone; glides via transform to the active node */
  #circle-sections-root .story-marker{ display:grid; place-items:center; position:absolute; left:9px; top:0; width:30px; height:30px; border-radius:50%; z-index:6;
    transform:translateY(var(--marker-y,15px)); transition:transform .55s cubic-bezier(.22,1,.36,1);
    background:radial-gradient(circle at 34% 28%, #143563, #061534); border:1px solid rgba(245,199,107,.85);
    box-shadow:0 0 16px rgba(245,199,107,.55), 0 4px 12px rgba(0,0,0,.55); will-change:transform; }
  #circle-sections-root .story-marker svg{ width:17px; height:17px; color:#ffd77a; filter:drop-shadow(0 0 3px rgba(245,199,107,.5)); }
  #circle-sections-root .story-marker::after{ content:""; position:absolute; inset:-4px; border-radius:50%; box-shadow:0 0 0 0 rgba(245,199,107,.45); animation:story-marker-pulse 2.4s ease-out infinite; }
  @keyframes story-marker-pulse{ 0%{ box-shadow:0 0 0 0 rgba(245,199,107,.4); } 70%{ box-shadow:0 0 0 10px rgba(245,199,107,0); } 100%{ box-shadow:0 0 0 0 rgba(245,199,107,0); } }
  /* active node's number sits under the pawn — hide it (the active card shows the big ghost number) */
  #circle-sections-root .story-step.is-active .story-num{ opacity:0; transition:opacity .3s ease; }
  /* Offer destination lights up once the traveller reaches step 05 */
  #circle-sections-root .story.goal-reached .story-goal-node{ box-shadow:0 0 0 5px rgba(4,14,34,1), 0 0 38px rgba(245,199,107,.9), 0 8px 26px rgba(245,199,107,.6); }
  #circle-sections-root .story.goal-reached .story-goal-t{ color:#ffe6a6; }

  #circle-sections-root .story-card{ cursor:pointer;
    transition:border-color .4s ease, box-shadow .4s ease, background .4s ease; }
  #circle-sections-root .story-step:not(.is-active) .story-card{ background:linear-gradient(150deg, rgba(12,28,56,.6), rgba(6,15,34,.55)); border-color:rgba(119,185,255,.14); box-shadow:0 8px 20px rgba(0,0,0,.26); }
  #circle-sections-root .story-step.is-active .story-card{ border-color:rgba(245,199,107,.52); box-shadow:0 22px 46px rgba(0,0,0,.46), 0 0 28px rgba(245,199,107,.13); }

  /* collapsible image */
  #circle-sections-root .story-media{ max-height:0; opacity:0; transition:max-height .46s cubic-bezier(.4,0,.2,1), opacity .34s ease; }
  #circle-sections-root .story-step.is-active .story-media{ max-height:212px; opacity:1; }

  /* collapsible description */
  #circle-sections-root .story-desc{ max-height:0; opacity:0; margin:0; overflow:hidden; transition:max-height .46s cubic-bezier(.4,0,.2,1), opacity .34s ease, margin .34s ease; }
  #circle-sections-root .story-step.is-active .story-desc{ max-height:26vh; opacity:1; margin-top:7px; }

  /* body: slim bar (~62px) when collapsed, roomy when active */
  #circle-sections-root .story-body{ padding:18px 40px 18px 16px; transition:padding .4s ease; }
  #circle-sections-root .story-step.is-active .story-body{ padding:14px 18px 16px; }

  #circle-sections-root .story-title{ font-size:1.05rem; transition:color .35s ease, font-size .35s ease; }
  #circle-sections-root .story-step:not(.is-active) .story-title{ color:#d8e4f8; }
  #circle-sections-root .story-step.is-active .story-title{ font-size:clamp(1.16rem,4.6vw,1.36rem); color:#fff; }

  /* tap-to-expand chevron (hidden once open) */
  #circle-sections-root .story-card::after{ content:""; position:absolute; right:16px; top:50%; margin-top:-6px; width:8px; height:8px; z-index:3;
    border-right:2px solid rgba(170,195,230,.5); border-bottom:2px solid rgba(170,195,230,.5); transform:rotate(45deg);
    transition:opacity .3s ease; }
  #circle-sections-root .story-step.is-active .story-card::after{ opacity:0; }
}

@media (min-width:861px){
  /* Desktop = the original layout: stacked cards, each half-image / half-text, image side alternating.
     No roadmap line / nodes / marker / progress-fill / Offer endpoint (those are mobile-only). */
  #circle-sections-root .story{ max-width:1080px; padding-left:0; margin-top:clamp(20px,3vw,36px); }
  #circle-sections-root .story-line,
  #circle-sections-root .story-marker,
  #circle-sections-root .story-goal,
  #circle-sections-root .story-line-fill,
  #circle-sections-root .story-node{ display:none; }

  #circle-sections-root .story-step{ padding-bottom:0; margin-bottom:clamp(22px,3vw,32px); }
  #circle-sections-root .story-step:last-child{ margin-bottom:0; }

  #circle-sections-root .story-card{ display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch; overflow:hidden;
    border-color:rgba(119,185,255,.16); box-shadow:0 18px 40px rgba(0,0,0,.34);
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
  #circle-sections-root .story-step.is-active .story-card{ border-color:rgba(119,185,255,.16); box-shadow:0 18px 40px rgba(0,0,0,.34); }
  #circle-sections-root .story-card:hover{ transform:translateY(-6px); border-color:rgba(245,199,107,.5); box-shadow:0 30px 60px rgba(0,0,0,.46); }
  /* alternate the image side (02 & 04 flip) */
  #circle-sections-root .story-step:nth-of-type(even) .story-media{ order:2; }

  #circle-sections-root .story-media{ aspect-ratio:16/9; height:100%; min-height:232px; }
  #circle-sections-root .story-media img{ transition:transform .9s cubic-bezier(.22,1,.36,1); }
  #circle-sections-root .story-card:hover .story-media img{ transform:scale(1.05); }
  #circle-sections-root .story-ghost{ font-size:5rem; }
  #circle-sections-root .story-body{ padding:clamp(26px,3vw,42px); align-self:center; }
  #circle-sections-root .story-title{ font-size:clamp(1.5rem,2.4vw,1.9rem); }
  #circle-sections-root .story-desc{ font-size:1.05rem; line-height:1.8; margin-top:12px; }
}

@media (prefers-reduced-motion:reduce){
  #circle-sections-root .story-flow{ animation:none; opacity:.5; }
  #circle-sections-root .story-step{ opacity:1; transform:none; transition:none; }
  #circle-sections-root .story-media img, #circle-sections-root .story-node, #circle-sections-root .story-card{ transition:none; }
  #circle-sections-root .story-goal-node{ animation:none; }
}
/* ---------- tools-mobile-carousel ---------- */
/* Desktop keeps the grid; mobile-only helpers stay hidden here */
#circle-sections-root .rb-tools-hint{ display:none; }
#circle-sections-root .rb-tools-nav{ display:none; }

@media (max-width:767px){
  /* ---- turn the 4-card grid into a horizontal snap "story" carousel ---- */
  #circle-sections-root .rb-tools{
    display:flex; grid-template-columns:none; flex-wrap:nowrap; position:relative;
    gap:14px; margin:2px -20px 0; padding:6px 20px 12px; max-width:none;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  #circle-sections-root .rb-tools::-webkit-scrollbar{ display:none; }
  #circle-sections-root .rb-tools.tc-armed{ opacity:0; transform:translateY(22px); }
  #circle-sections-root .rb-tools.tc-armed.tc-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }

  #circle-sections-root .rb-tool-card{
    flex:0 0 84%; width:84%; max-width:84%; min-width:0; scroll-snap-align:center;
    opacity:.5; transform:scale(.955); transition:opacity .32s ease, transform .32s ease, border-color .3s ease, box-shadow .3s ease;
  }
  #circle-sections-root .rb-tool-card.is-current{ opacity:1; transform:scale(1); }

  /* lighter glass story card, bigger image */
  #circle-sections-root .rb-tool-media{ aspect-ratio:16/10; }
  #circle-sections-root .rb-tool-media img{ width:100%; height:100%; max-width:100%; object-fit:cover; }
  #circle-sections-root .rb-tool-body{ padding:15px 18px 19px; gap:12px; }
  #circle-sections-root .rb-tool-num{ font-size:1.7rem; }
  #circle-sections-root .rb-tool-txt h3{ font-size:1.12rem; }
  #circle-sections-root .rb-tool-txt p{ font-size:.92rem; line-height:1.55; }

  /* swipe hint */
  #circle-sections-root .rb-tools-hint{ display:block; text-align:center; margin:12px auto 2px; font-size:.85rem; color:#8fa7c7; letter-spacing:.06em; }

  /* dots + arrows */
  #circle-sections-root .rb-tools-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:14px; }
  #circle-sections-root .rb-tools-dots{ display:flex; gap:9px; }
  #circle-sections-root .rb-tools-dot{ width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(150,180,220,.34); transition:transform .25s, background .25s, box-shadow .25s; -webkit-tap-highlight-color:transparent; }
  #circle-sections-root .rb-tools-dot.active{ background:#ffd166; transform:scale(1.4); box-shadow:0 0 0 4px rgba(255,209,102,.16); }
  #circle-sections-root .rb-tools-arrow{ width:34px; height:34px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; cursor:pointer;
    background:rgba(13,32,64,.72); border:1px solid rgba(245,199,107,.32); color:#ffd77a; font-size:1.35rem; line-height:1;
    -webkit-tap-highlight-color:transparent; transition:background .25s, border-color .25s, transform .2s; }
  #circle-sections-root .rb-tools-arrow:active{ background:rgba(245,199,107,.2); transform:scale(.92); }
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  #circle-sections-root .rb-tool-card{ transition:opacity .2s ease; transform:none; }
  #circle-sections-root .rb-tool-card.is-current{ transform:none; }
  #circle-sections-root .rb-tools.tc-armed{ opacity:1; transform:none; }
}
/* ---------- countdown band + sticky bar ---------- */
/* ===== 最後報名整合大卡片：倒數 + CTA + 免費資源 ===== */
#webinar-countdown-band{ position:relative; width:100%; padding:clamp(40px,6vw,90px) clamp(16px,4vw,40px); overflow:hidden;
  background:radial-gradient(80% 120% at 50% -10%, rgba(245,199,107,.10), transparent 60%), linear-gradient(180deg,#03102a 0%,#020b1f 55%,#010714 100%);
  border-top:1px solid rgba(245,199,107,.18); }
#webinar-countdown-band .wcb-glow{ position:absolute; inset:auto 0 -30% 0; height:70%; background:radial-gradient(50% 100% at 50% 0%, rgba(47,125,255,.16), transparent 70%); pointer-events:none; }

#webinar-countdown-band .wcb-card{ position:relative; max-width:1180px; margin:0 auto; border-radius:28px; overflow:hidden;
  padding:clamp(26px,3.4vw,54px); display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(24px,3.6vw,56px); align-items:center;
  background:radial-gradient(120% 90% at 88% 0%, rgba(245,199,107,.13), transparent 52%), linear-gradient(155deg, rgba(13,32,64,.92), rgba(4,12,30,.95));
  border:1px solid rgba(245,199,107,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 44px 96px rgba(0,0,0,.5); }
#webinar-countdown-band .wcb-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, transparent, rgba(245,199,107,.85), transparent); }
#webinar-countdown-band .wcb-card.wcb-armed{ opacity:0; transform:translateY(26px); }
#webinar-countdown-band .wcb-card.wcb-armed.wcb-in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }

#webinar-countdown-band .wcb-left{ text-align:left; }
#webinar-countdown-band .wcb-badge{ display:inline-flex; align-items:center; gap:7px; padding:6px 15px; border-radius:999px; font-size:13px; font-weight:900; letter-spacing:.04em; color:#ffe6a6; background:rgba(255,66,66,.10); border:1px solid rgba(245,199,107,.5); }
#webinar-countdown-band .wcb-dot{ width:9px; height:9px; border-radius:50%; background:#ff4242; flex:0 0 auto; box-shadow:0 0 0 0 rgba(255,66,66,.7); animation:wcb-pulse 1.6s infinite; }
@keyframes wcb-pulse{ 0%{box-shadow:0 0 0 0 rgba(255,66,66,.6);} 70%{box-shadow:0 0 0 9px rgba(255,66,66,0);} 100%{box-shadow:0 0 0 0 rgba(255,66,66,0);} }
#webinar-countdown-band .wcb-hook{ margin:16px 0 0; font-family:"Noto Serif TC","Source Han Serif TC",serif; font-weight:900; font-size:clamp(1.6rem,3.1vw,2.5rem); line-height:1.3; color:#f8fbff; word-break:keep-all; overflow-wrap:normal; line-break:strict; text-wrap:balance; }
#webinar-countdown-band .wcb-hook .g{ color:#ffd166; }
#webinar-countdown-band .wcb-lead2{ margin:14px 0 0; color:#c7d7ef; font-size:clamp(.97rem,1.5vw,1.08rem); line-height:1.85; max-width:460px; }
#webinar-countdown-band .wcb-when{ margin:18px 0 0; display:inline-flex; align-items:center; gap:9px; font-size:clamp(.9rem,1.35vw,1rem); font-weight:800; color:#ffd77a; padding:8px 14px; border-radius:12px; background:rgba(245,199,107,.08); border:1px solid rgba(245,199,107,.28); }
#webinar-countdown-band .wcb-lead{ margin:16px 0 0; font-size:clamp(.9rem,1.4vw,1rem); color:#9fb6d8; letter-spacing:.02em; }
#webinar-countdown-band .wcb-timer{ display:flex; align-items:stretch; gap:clamp(6px,1vw,10px); margin-top:8px; }
#webinar-countdown-band .wcb-unit{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:clamp(58px,7vw,80px); padding:clamp(10px,1.4vw,16px) clamp(6px,1vw,10px); border-radius:14px; background:linear-gradient(180deg, rgba(11,35,79,.8), rgba(3,16,42,.88)); border:1px solid rgba(119,185,255,.28); border-top:2px solid rgba(245,199,107,.5); box-shadow:0 12px 28px rgba(0,0,0,.34); }
#webinar-countdown-band .wcb-num{ font-weight:900; font-size:clamp(1.7rem,4vw,2.7rem); line-height:1; color:#ffd77a; font-variant-numeric:tabular-nums; text-shadow:0 0 16px rgba(255,201,80,.35); }
#webinar-countdown-band .wcb-lab{ font-size:clamp(.66rem,1.2vw,.78rem); color:#9fb6d8; letter-spacing:.12em; font-weight:700; }
#webinar-countdown-band .wcb-colon{ align-self:flex-start; margin-top:clamp(14px,2vw,26px); font-size:clamp(1.2rem,2.6vw,1.8rem); font-weight:900; color:#3f6ba8; }
#webinar-countdown-band .wcb-cta{ margin-top:22px; cursor:pointer; display:inline-flex; align-items:center; gap:10px; padding:16px clamp(28px,3.5vw,44px); border:0; border-radius:999px; font-family:inherit; font-weight:900; font-size:clamp(1.05rem,2vw,1.24rem); color:#07142c; background:radial-gradient(circle at 24% 14%, #ffffff9c, transparent 26%), linear-gradient(135deg,#fff0b8,#f5c76b 40%,#d69a2f 72%,#a06a1f); box-shadow:0 0 0 4px rgba(245,199,107,.16), 0 20px 46px rgba(245,199,107,.32); transition:transform .2s ease, box-shadow .2s ease; }
#webinar-countdown-band .wcb-cta:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 0 0 5px rgba(245,199,107,.24), 0 28px 60px rgba(245,199,107,.46); }
#webinar-countdown-band .wcb-cta:active{ transform:translateY(0) scale(.99); }
#webinar-countdown-band .wcb-cta-arrow{ font-size:1.1em; transition:transform .2s ease; }
#webinar-countdown-band .wcb-cta:hover .wcb-cta-arrow{ transform:translateX(5px); }
#webinar-countdown-band .wcb-note{ margin:14px 0 0; font-size:clamp(.82rem,1.3vw,.92rem); color:#8fa7c7; }

#webinar-countdown-band .wcb-right{ position:relative; }
#webinar-countdown-band .wcb-stage{ position:relative; width:100%; aspect-ratio:1/0.82; }
#webinar-countdown-band .wcb-stage::after{ content:""; position:absolute; left:14%; right:14%; bottom:3%; height:9%; border-radius:50%; background:radial-gradient(50% 100% at 50% 50%, rgba(245,199,107,.32), transparent 72%); filter:blur(9px); z-index:0; }
#webinar-countdown-band .wcb-res{ position:absolute; left:50%; top:42%; width:42%; margin:0; text-align:center; }
#webinar-countdown-band .wcb-res-img{ position:relative; transform-origin:center bottom; will-change:transform; }
#webinar-countdown-band .wcb-res img{ width:100%; display:block; filter:drop-shadow(0 20px 32px rgba(0,0,0,.56)); }
#webinar-countdown-band .wcb-res:nth-child(1) img{ transform:rotate(-4deg); }
#webinar-countdown-band .wcb-res:nth-child(2) img{ transform:rotate(3deg); }
#webinar-countdown-band .wcb-res:nth-child(3) img{ transform:rotate(-2deg); }
#webinar-countdown-band .wcb-res:nth-child(4) img{ transform:rotate(4deg); }
#webinar-countdown-band .wcb-res--panel .wcb-res-img{ background:none; border:0; border-radius:0; padding:0; box-shadow:none; }
#webinar-countdown-band .wcb-res figcaption{ margin-top:12px; font-size:clamp(14px,1.3vw,17px); font-weight:800; color:#eef4ff; line-height:1.42; letter-spacing:.01em; word-break:keep-all; overflow-wrap:normal; line-break:strict; transition:color .25s, font-size .25s ease, transform .25s ease; }
#webinar-countdown-band .wcb-res:hover figcaption,#webinar-countdown-band .wcb-res.is-front figcaption{ color:#ffe6a6; }
#webinar-countdown-band .wcb-res:hover figcaption{ font-size:clamp(16px,1.7vw,20.5px); font-weight:900; }
/* 桌機：長標題兩個 span 併成一行（維持原樣） */
#webinar-countdown-band .wcb-cap-l{ display:inline; }

/* ---------- Sticky 報名條 ---------- */
#webinar-sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:10000;
  display:flex; align-items:center; justify-content:center; gap:clamp(12px,3vw,28px);
  padding:12px clamp(14px,4vw,40px);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(4,15,37,.92), rgba(2,9,24,.98));
  border-top:1px solid rgba(245,199,107,.42);
  box-shadow:0 -14px 40px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transform:translateY(120%); opacity:0; pointer-events:none;
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
#webinar-sticky-bar.is-visible{transform:translateY(0); opacity:1; pointer-events:auto;}
#webinar-sticky-bar .wsb-info{display:flex; flex-direction:column; line-height:1.3; min-width:0;}
#webinar-sticky-bar .wsb-label{display:inline-flex; align-items:center; gap:7px; font-size:clamp(12px,1.5vw,13.5px); font-weight:800; color:#f8fbff; letter-spacing:.02em; white-space:nowrap;}
#webinar-sticky-bar .wsb-countdown{font-size:clamp(12.5px,1.6vw,15px); font-weight:900; color:#ffd77a; font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap;}
#webinar-sticky-bar .wsb-cta{
  flex:0 0 auto; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  border:0; border-radius:999px; padding:13px clamp(20px,3vw,30px);
  font-family:inherit; font-weight:900; font-size:clamp(14px,1.7vw,15.5px); color:#07142c; white-space:nowrap;
  background:radial-gradient(circle at 24% 14%, #ffffff9c, transparent 26%), linear-gradient(135deg,#fff0b8,#f5c76b 40%,#d69a2f 72%,#a06a1f);
  box-shadow:0 12px 26px rgba(245,199,107,.34);
  transition:transform .2s ease;
}
#webinar-sticky-bar .wsb-cta:hover{transform:translateY(-1px);}

/* ---------- mobile ---------- */
@media (max-width:880px){
  #webinar-countdown-band .wcb-card{ grid-template-columns:1fr; gap:clamp(20px,4vw,30px); padding:clamp(22px,5vw,34px); }
  #webinar-countdown-band .wcb-left{ text-align:center; }
  #webinar-countdown-band .wcb-lead2{ margin-left:auto; margin-right:auto; }
  #webinar-countdown-band .wcb-hook{ font-size:clamp(1.5rem,6.2vw,2rem); }
  #webinar-countdown-band .wcb-timer{ justify-content:center; }
  #webinar-countdown-band .wcb-cta{ width:100%; max-width:420px; justify-content:center; }
  #webinar-countdown-band .wcb-stage{ position:static; aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; gap:20px 16px; max-width:440px; margin:0 auto; }
  #webinar-countdown-band .wcb-stage::after{ display:none; }
  #webinar-countdown-band .wcb-res{ position:static; width:auto !important; left:auto; top:auto; transform:none !important; opacity:1 !important; }
  #webinar-countdown-band .wcb-res img{ transform:none !important; }
  #webinar-countdown-band .wcb-res--panel .wcb-res-img{ padding:0; }
  #webinar-countdown-band .wcb-res figcaption{ font-size:14px; margin-top:9px; line-height:1.35; text-align:center; word-break:keep-all; overflow-wrap:normal; white-space:nowrap; }
  /* 長標題手機版強制兩行：高信號面試 / 實戰工具包 */
  #webinar-countdown-band .wcb-res figcaption .wcb-cap-l{ display:block; white-space:nowrap; }
  /* 點擊/active 放大時標題字級保持一致，避免重排孤字 */
  #webinar-countdown-band .wcb-res:hover figcaption,
  #webinar-countdown-band .wcb-res.is-front figcaption{ font-size:14px; font-weight:800; }
}
@media (max-width:520px){
  #webinar-sticky-bar{gap:10px; justify-content:space-between;}
  #webinar-sticky-bar .wsb-cta{padding:12px 18px;}
}
@media (prefers-reduced-motion:reduce){
  #webinar-countdown-band .wcb-dot{animation:none;}
  #webinar-countdown-band .wcb-showcase{animation:none;}
  #webinar-countdown-band .wcb-res-img,#webinar-countdown-band .wcb-cta{transition:none;}
  #webinar-countdown-band .wcb-card.wcb-armed{opacity:1; transform:none;}
  #webinar-sticky-bar{transition:opacity .2s ease;}
}
/* ---------- faq-mobile-fix ---------- */
/* 手機版 FAQ：修正問題文字被壓成「一字一行」 */
@media (max-width:767px){
  .faq-item__trigger{ display:flex !important; align-items:center; justify-content:space-between; gap:14px; min-height:0; padding:15px 16px; }
  .faq-item__question{ flex:1 1 auto; min-width:0; text-align:left; word-break:normal; overflow-wrap:break-word; line-height:1.6; font-size:1rem; }
  .faq-item__icon{ flex-shrink:0; }
  .faq-item__chevron{ flex-shrink:0; align-self:center; }
  .faq-item__answer{ padding:0 16px 18px 16px; }
}
/* ---------- final-gate-styles ---------- */
/* 隱藏 React 舊版最後 CTA（STEP 1/2/3） */
/* (removed) .final-cta kill rule — the old React final CTA section was deleted from Home.tsx; FinalGate replaces it */

/* ===== Final Decision Gate ===== */
#final-gate{ position:relative; width:100%; padding:clamp(48px,7vw,100px) clamp(16px,4vw,40px); overflow:hidden;
  background:radial-gradient(70% 90% at 50% 0%, rgba(47,125,255,.12), transparent 60%), linear-gradient(180deg,#020b1f 0%,#010714 100%); }
#final-gate .fg-inner{ position:relative; max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; grid-template-areas:"head head head" "risk arrow win" "cta cta cta"; gap:clamp(16px,2.4vw,30px) clamp(12px,2vw,26px); align-items:center; }
#final-gate.fg-armed .fg-inner{ opacity:0; transform:translateY(24px); }
#final-gate.fg-armed.fg-in .fg-inner{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }

#final-gate .fg-head{ grid-area:head; text-align:center; }
#final-gate .fg-eyebrow{ display:inline-flex; align-items:center; gap:7px; padding:6px 15px; border-radius:999px; font-size:13px; font-weight:900; letter-spacing:.06em; color:#ffd0d0; background:rgba(255,66,66,.10); border:1px solid rgba(255,120,120,.42); }
#final-gate .fg-title{ margin:18px 0 0; font-family:"Noto Serif TC","Source Han Serif TC",serif; font-weight:900; font-size:clamp(2rem,4.8vw,3.4rem); line-height:1.28; color:#f8fbff; word-break:keep-all; overflow-wrap:normal; line-break:strict; text-wrap:balance; }
#final-gate .fg-title .g{ color:#ffd166; }
#final-gate .fg-sub{ margin:16px auto 0; max-width:680px; color:#c7d7ef; font-size:clamp(1rem,1.7vw,1.15rem); line-height:1.9; word-break:keep-all; overflow-wrap:normal; line-break:strict; }

#final-gate .fg-card{ grid-area:risk; align-self:stretch; text-align:left; border-radius:20px; padding:clamp(20px,2.3vw,30px); box-sizing:border-box; }
#final-gate .fg-win{ grid-area:win; }
#final-gate .fg-card--risk{ background:linear-gradient(160deg, rgba(22,32,52,.55), rgba(10,16,30,.62)); border:1px solid rgba(120,150,190,.18); opacity:.82; transition:border-color .3s ease; }
#final-gate .fg-card--risk:hover{ border-color:rgba(120,150,190,.3); }
#final-gate .fg-card--win{ position:relative; background:radial-gradient(120% 100% at 50% 0%, rgba(245,199,107,.12), transparent 60%), linear-gradient(160deg, rgba(16,38,74,.85), rgba(6,18,42,.92)); border:1px solid rgba(245,199,107,.5); box-shadow:0 24px 60px rgba(0,0,0,.42); transition:transform .3s ease, box-shadow .3s ease; }
#final-gate .fg-card--win::before{ content:""; position:absolute; inset:-2px; border-radius:22px; background:radial-gradient(60% 70% at 50% 0%, rgba(245,199,107,.3), transparent 70%); z-index:-1; animation:fg-breathe 5.5s ease-in-out infinite; }
@keyframes fg-breathe{ 0%,100%{opacity:.45;} 50%{opacity:1;} }
#final-gate .fg-card--win:hover{ transform:translateY(-4px) scale(1.012); box-shadow:0 34px 78px rgba(0,0,0,.52), 0 0 36px rgba(245,199,107,.24); }
#final-gate .fg-card-tag{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; letter-spacing:.02em; padding:4px 11px; border-radius:999px; margin-bottom:13px; }
#final-gate .fg-card--risk .fg-card-tag{ color:#9fb0c8; background:rgba(120,150,190,.12); border:1px solid rgba(120,150,190,.26); }
#final-gate .fg-card--win .fg-card-tag{ color:#07142c; background:linear-gradient(135deg,#ffe9a8,#f5c76b 60%,#d69a2f); }
#final-gate .fg-card-title{ margin:0 0 15px; font-size:clamp(1.2rem,2.1vw,1.5rem); font-weight:900; }
#final-gate .fg-card--risk .fg-card-title{ color:#c3cfe2; }
#final-gate .fg-card--win .fg-card-title{ color:#fff; }
#final-gate .fg-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
#final-gate .fg-list li{ position:relative; padding-left:29px; font-size:clamp(.95rem,1.45vw,1.05rem); line-height:1.55; word-break:keep-all; overflow-wrap:normal; line-break:strict; }
#final-gate .fg-card--risk .fg-list li{ color:#8ea0bd; }
#final-gate .fg-card--risk .fg-list li::before{ content:"✕"; position:absolute; left:5px; top:0; color:#6f819e; font-weight:900; }
#final-gate .fg-card--win .fg-list li{ color:#dce6f7; }
#final-gate .fg-card--win .fg-list li::before{ content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#ffe9a8,#f5c76b 60%,#d69a2f); color:#07142c; font-size:12px; font-weight:900; }
#final-gate .fg-arrow{ grid-area:arrow; font-size:clamp(1.4rem,2.4vw,2rem); color:#f5c76b; opacity:.75; }

#final-gate .fg-cta-wrap{ grid-area:cta; text-align:center; }
#final-gate .fg-cta{ cursor:pointer; display:inline-flex; align-items:center; gap:11px; padding:18px clamp(34px,4.5vw,58px); border:0; border-radius:999px; font-family:inherit; font-weight:900; font-size:clamp(1.1rem,2.1vw,1.35rem); color:#07142c; white-space:nowrap; background:radial-gradient(circle at 24% 14%,#ffffff9c,transparent 26%),linear-gradient(135deg,#fff0b8,#f5c76b 40%,#d69a2f 72%,#a06a1f); box-shadow:0 0 0 5px rgba(245,199,107,.16),0 24px 54px rgba(245,199,107,.36); transition:transform .2s ease, box-shadow .2s ease; }
#final-gate .fg-cta:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 0 0 6px rgba(245,199,107,.24),0 30px 66px rgba(245,199,107,.5); }
#final-gate .fg-cta:active{ transform:translateY(0) scale(.99); }
#final-gate .fg-cta:focus-visible{ outline:3px solid #ffe6a6; outline-offset:3px; }
#final-gate .fg-cta .fg-arrow-i{ transition:transform .2s ease; }
#final-gate .fg-cta:hover .fg-arrow-i{ transform:translateX(4px); }
#final-gate .fg-micro{ margin:16px 0 0; font-size:clamp(.86rem,1.35vw,.96rem); font-weight:700; color:#aebfda; }
#final-gate .fg-micro2{ margin:8px auto 0; max-width:520px; font-size:clamp(.8rem,1.25vw,.88rem); color:#7f96bd; line-height:1.6; }

#final-gate .fg-risk-mobile{ display:none; }

@media (max-width:860px){
  #final-gate .fg-inner{ display:flex; flex-direction:column; align-items:stretch; max-width:460px; }
  #final-gate .fg-head{ order:0; }
  #final-gate .fg-win{ order:1; margin-top:22px; }
  #final-gate .fg-cta-wrap{ order:2; margin-top:24px; }
  #final-gate .fg-risk{ display:none; }
  #final-gate .fg-arrow{ display:none; }
  #final-gate .fg-risk-mobile{ display:block; order:3; margin-top:26px; text-align:left; border-radius:16px; padding:18px 18px 20px; background:linear-gradient(160deg, rgba(22,32,52,.5), rgba(10,16,30,.58)); border:1px solid rgba(120,150,190,.18); }
  #final-gate .fg-rm-tag{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:#9fb0c8; padding:4px 11px; border-radius:999px; background:rgba(120,150,190,.12); border:1px solid rgba(120,150,190,.26); }
  #final-gate .fg-risk-mobile p{ margin:11px 0 0; font-size:.95rem; line-height:1.7; color:#93a5c1; word-break:keep-all; overflow-wrap:normal; }
  #final-gate .fg-cta{ width:100%; max-width:440px; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  #final-gate .fg-card--win::before{ animation:none; opacity:.7; }
  #final-gate .fg-card--win,#final-gate .fg-cta,#final-gate .fg-cta .fg-arrow-i{ transition:none; }
  #final-gate.fg-armed .fg-inner{ opacity:1; transform:none; }
}
/* ---------- hero-mobile-enhance ---------- */
@media (max-width:767px){
  /* Size the hero to its content so the CTA sits right above the next section (no filler) */
  .hero-section{ height:auto !important; min-height:0 !important; overflow:visible !important; padding-bottom:20px; }
  .hero-section__inner, .hero-section .animated-section{ height:auto !important; min-height:0 !important; justify-content:flex-start !important; }
  .hero-section .hero-section__cta{ margin-bottom:0; }
  /* nothing between the CTA and the next section */
  .hero-section .hero-scroll-hint, .hero-section .hero-section__bottom-fade{ display:none !important; }

  /* Headline rhythm */
  .hero-section h1{ font-size:clamp(1.95rem,8.6vw,2.5rem); line-height:1.26; letter-spacing:.006em; margin-bottom:16px; }
  .hero-section .hero-title-line{ display:block; word-break:keep-all; overflow-wrap:normal; line-break:strict; }
  .hero-section .hero-title-line--accent, .hero-section .hero-title-line--accent strong{ color:#ffd166; }
  .hero-section .hero-title-line--accent strong{ text-shadow:0 0 20px rgba(255,209,102,.4); }

  /* Description: split into readable clauses with breathing room; wrap naturally, keep key terms intact */
  .hero-section .hero-description{ word-break:normal; overflow-wrap:break-word; text-wrap:pretty; line-height:1.85; font-size:.95rem; color:#c2d2ee; max-width:none; }
  .hero-section .hero-description .hero-desc-a, .hero-section .hero-description .hero-desc-b{ display:block; }
  .hero-section .hero-description .hero-desc-b{ margin-top:11px; }
  .hero-section .hero-description .hl{ color:#eef4ff; font-weight:700; white-space:nowrap; }
  .hero-section .hero-description .hl-date{ color:#c9d6ef; font-weight:700; }
  .hero-section .hero-description .nb{ white-space:nowrap; }

  /* Identity chips: tidy 2-column grid; date/time = low-key dark-glass info pill (not a 2nd CTA) */
  .hero-section .hero-tags{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:20px 0; }
  .hero-section .hero-tag{ width:100%; box-sizing:border-box; justify-content:center; gap:8px; padding:11px 10px; border-radius:12px; font-size:.9rem; min-width:0; }
  .hero-section .hero-tag:nth-child(5){ grid-column:1 / -1; color:#cad7ef; border-color:rgba(120,160,220,.24); background:rgba(9,22,48,.55); font-weight:700; letter-spacing:.01em; }
  .hero-section .hero-tag:nth-child(5) svg{ color:#ffd77a; opacity:.9; }

  /* CTA tap feedback */
  .hero-section .hero-section__cta{ transition:transform .16s ease, filter .2s ease; }
  .hero-section .hero-section__cta:active{ transform:translateY(1px) scale(.985); }

  /* ---- injected floating visual collage (no bounding card) ---- */
  .hero-viz{ position:relative; width:100%; max-width:344px; height:236px; margin:26px auto 0; }
  .hcol-glow{ position:absolute; left:50%; top:76%; width:230px; height:150px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(245,199,107,.30), rgba(47,125,255,.12) 46%, transparent 72%); filter:blur(16px); }
  .hcol-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  .hcol-lines line{ stroke:rgba(245,199,107,.5); stroke-width:1.3; stroke-linecap:round; stroke-dasharray:1.5 5; vector-effect:non-scaling-stroke; animation:hcol-dash 1.5s linear infinite; }
  @keyframes hcol-dash{ to{ stroke-dashoffset:-13; } }
  .hcol-chip{ position:absolute; transform:translate(-50%,-50%); white-space:nowrap; font-size:12px; font-weight:800; color:#dce7fb;
    padding:7px 12px; border-radius:11px; background:rgba(11,27,56,.82); border:1px solid rgba(119,185,255,.3);
    box-shadow:0 8px 20px rgba(0,0,0,.4); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    animation:hcol-float 5.5s ease-in-out infinite; }
  .hcol-c1{ left:19%; top:20%; animation-delay:0s; }
  .hcol-c2{ left:81%; top:15%; animation-delay:.6s; }
  .hcol-c3{ left:13%; top:50%; animation-delay:1.1s; }
  .hcol-c4{ left:87%; top:45%; animation-delay:1.7s; }
  @keyframes hcol-float{ 0%,100%{ transform:translate(-50%,-50%); } 50%{ transform:translate(-50%,calc(-50% - 5px)); } }
  .hcol-node{ position:absolute; left:50%; top:80%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    font-size:14.5px; font-weight:900; color:#ffe6a6; letter-spacing:.02em; padding:11px 18px; border-radius:999px;
    background:radial-gradient(120% 150% at 30% 0%, rgba(245,199,107,.22), transparent 60%), linear-gradient(135deg, rgba(28,52,96,.92), rgba(10,24,50,.94));
    border:1px solid rgba(245,199,107,.6); box-shadow:0 0 30px rgba(245,199,107,.28), 0 12px 30px rgba(0,0,0,.45);
    animation:hcol-pulse 2.8s ease-in-out infinite; }
  .hcol-node-ico{ color:#ffd166; font-size:1em; line-height:1; }
  @keyframes hcol-pulse{ 0%,100%{ box-shadow:0 0 26px rgba(245,199,107,.22), 0 12px 30px rgba(0,0,0,.45); } 50%{ box-shadow:0 0 40px rgba(245,199,107,.42), 0 12px 34px rgba(0,0,0,.45); } }

  /* scroll cue */
  .hero-cue{ display:flex; justify-content:center; margin:20px auto 2px; }
  .hero-cue-ch{ width:18px; height:18px; border-right:2px solid rgba(245,199,107,.7); border-bottom:2px solid rgba(245,199,107,.7); transform:rotate(45deg); animation:hero-cue-b 1.7s ease-in-out infinite; }
  @keyframes hero-cue-b{ 0%,100%{ transform:translateY(0) rotate(45deg); opacity:.45; } 50%{ transform:translateY(5px) rotate(45deg); opacity:1; } }
}
@media (min-width:768px){ .hero-viz, .hero-cue{ display:none !important; } }
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .hcol-chip, .hcol-node, .hcol-lines line, .hero-cue-ch{ animation:none !important; }
}
/* ---------- rbsm (signup modal) ---------- */
/* (removed) .signup-modal kill rule — the hijack layer is gone; SignupModal.tsx now renders the rbsm design directly */
/* 捲動鎖定（class 版，免於 React inline style 覆寫） */
html.rbsm-lock, html.rbsm-lock body{ overflow:hidden !important; }

.rbsm{ position:fixed; inset:0; z-index:2147483000; display:none;
  align-items:center; justify-content:center;
  padding:16px; padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); }
.rbsm.is-open{ display:flex; }
.rbsm *{ box-sizing:border-box; }

.rbsm__backdrop{ position:absolute; inset:0; background:rgba(4,10,24,.74);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; animation:rbsmFade .2s ease forwards; }

.rbsm__dialog{ position:relative; width:100%; max-width:900px;
  max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
  background:#0a1730; border:1px solid rgba(245,199,107,.16); border-radius:20px;
  overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.62);
  opacity:0; transform:translateY(14px) scale(.985);
  animation:rbsmIn .22s cubic-bezier(.2,.7,.3,1) forwards; }

@keyframes rbsmFade{ to{ opacity:1; } }
@keyframes rbsmIn{ to{ opacity:1; transform:none; } }

.rbsm__close{ position:absolute; top:12px; right:12px; width:42px; height:42px;
  border-radius:50%; border:1px solid rgba(255,255,255,.16);
  background:rgba(9,18,38,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#dbe4f5; display:grid; place-items:center; cursor:pointer; z-index:6;
  transition:background .18s ease, transform .2s ease; }
.rbsm__close:hover{ background:rgba(9,18,38,.9); transform:rotate(90deg); }
.rbsm__close svg{ width:18px; height:18px; }

.rbsm__grid{ display:grid; grid-template-columns:40% 60%;
  max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
  overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* ---- 左側視覺（AI 生成配圖 + 播放鍵疊層） ---- */
.rbsm__visual{ position:relative; overflow:hidden; min-height:100%;
  background:#0a1a38 url("/assets/generated/modal-visual-desktop.webp") center/cover no-repeat; }
.rbsm__visual::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,20,44,.12) 0%, rgba(7,20,44,.42) 100%); }
.rbsm__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:80px; height:80px; border-radius:50%;
  background:linear-gradient(135deg,#f5c76b,#d89b2d);
  display:grid; place-items:center; z-index:2;
  box-shadow:0 12px 34px rgba(245,199,107,.4), 0 0 0 10px rgba(245,199,107,.08); }
.rbsm__play::before{ content:""; position:absolute; inset:-10px; border-radius:50%;
  border:1px solid rgba(245,199,107,.35); animation:rbsmPulse 2.4s ease-out infinite; }
.rbsm__play::after{ content:""; width:0; height:0; border-style:solid;
  border-width:13px 0 13px 22px; border-color:transparent transparent transparent #07142c;
  margin-left:6px; }
@keyframes rbsmPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } }

/* ---- 右側內容 ---- */
.rbsm__content{ background:linear-gradient(180deg,#0c1c3a,#0a1730); padding:36px 36px 30px; }

.rbsm__badge{ display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; letter-spacing:.05em; color:#ffdf9b;
  background:rgba(245,199,107,.12); border:1px solid rgba(245,199,107,.34);
  padding:6px 13px; border-radius:999px; }
.rbsm__badge i{ width:7px; height:7px; border-radius:50%; background:#ff5a5a;
  box-shadow:0 0 0 3px rgba(255,90,90,.25); animation:rbsmBlink 1.6s ease-in-out infinite; }
@keyframes rbsmBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.rbsm__title{ font-size:26px; line-height:1.26; font-weight:800; color:#fff;
  margin:14px 0 0; letter-spacing:-.01em; }
.rbsm__desc{ font-size:14.5px; line-height:1.72; color:#c3d0e6; margin:12px 0 0; }

.rbsm__date{ display:flex; align-items:center; gap:10px; margin:16px 0 0;
  padding:11px 14px; border-radius:12px;
  background:rgba(255,255,255,.045); border:1px solid rgba(245,199,107,.2);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#e8eefb; font-size:13.5px; font-weight:600; letter-spacing:.01em; }
.rbsm__date svg{ width:17px; height:17px; color:#f5c76b; flex:0 0 auto; }

.rbsm__hint{ font-size:13px; color:#9fb0cc; margin:18px 0 8px; }

.rbsm__field{ position:relative; margin-top:10px; }
.rbsm__field > svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:#6f84a6; pointer-events:none; transition:color .18s ease; }
.rbsm__input{ width:100%; min-height:52px; background:#0a1730;
  border:1px solid rgba(255,255,255,.13); border-radius:12px;
  padding:0 15px 0 44px; color:#fff; font-size:15px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.rbsm__input::placeholder{ color:#7286a4; }
.rbsm__input:focus{ outline:none; border-color:#f5c76b;
  box-shadow:0 0 0 3px rgba(245,199,107,.18); background:#0b1c3a; }
.rbsm__field:focus-within > svg{ color:#f5c76b; }
.rbsm__field--error .rbsm__input{ border-color:#ff6b6b; box-shadow:0 0 0 3px rgba(255,107,107,.14); }
.rbsm__field--error > svg{ color:#ff8f8f; }
/* 香港手機號碼欄：旗幟 + +852 前綴 */
.rbsm__prefix{ position:absolute; left:15px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:7px; color:#c3d2ea;
  font-size:14.5px; font-weight:600; letter-spacing:.01em; pointer-events:none;
  transition:color .18s ease; }
.rbsm__prefix svg{ width:20px; height:14px; border-radius:2.5px; display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.rbsm__prefix::after{ content:""; width:1px; height:18px; margin-left:3px;
  background:rgba(255,255,255,.16); }
.rbsm__field--phone .rbsm__input{ padding-left:100px; }
.rbsm__field--phone:focus-within .rbsm__prefix{ color:#f5c76b; }
.rbsm__field--error .rbsm__prefix{ color:#ff8f8f; }

.rbsm__error{ font-size:12.5px; color:#ff9494; margin:9px 2px 0; display:none; }
.rbsm__error.is-show{ display:block; }

.rbsm__cta{ margin-top:18px; width:100%; min-height:56px; border:0; border-radius:999px;
  font-size:16px; font-weight:800; color:#07142c; letter-spacing:-.01em;
  background:linear-gradient(135deg,#f5c76b,#ffce73 52%,#d89b2d);
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px;
  white-space:nowrap; box-shadow:0 10px 28px rgba(245,199,107,.3);
  transition:transform .16s ease, box-shadow .2s ease, filter .2s ease; }
.rbsm__cta:hover{ transform:translateY(-1px) scale(1.012);
  box-shadow:0 15px 36px rgba(245,199,107,.44); filter:saturate(1.05); }
.rbsm__cta:active{ transform:translateY(0) scale(.995); }
.rbsm__cta:disabled{ opacity:.72; cursor:default; transform:none; box-shadow:none; }
.rbsm__arrow{ transition:transform .18s ease; }
.rbsm__cta:hover .rbsm__arrow{ transform:translateX(4px); }
.rbsm__spin{ display:none; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(7,20,44,.35); border-top-color:#07142c; animation:rbsmSpin .7s linear infinite; }
.rbsm__cta.is-loading .rbsm__label,
.rbsm__cta.is-loading .rbsm__arrow{ display:none; }
.rbsm__cta.is-loading .rbsm__spin{ display:block; }
@keyframes rbsmSpin{ to{ transform:rotate(360deg); } }

.rbsm__assure{ text-align:center; font-size:12.5px; color:#8a9bb8; margin:14px 0 2px; }

/* ---- 手機版：頂部薄視覺 + 單欄 ---- */
@media (max-width:768px){
  .rbsm{ padding:12px; padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); }
  .rbsm__dialog{ max-width:460px; border-radius:18px; }
  .rbsm__grid{ grid-template-columns:1fr; }
  .rbsm__visual{ min-height:116px; max-height:130px;
    background-image:url("/assets/generated/modal-visual-mobile.webp"); background-position:center 46%; }
  .rbsm__play{ width:56px; height:56px; }
  .rbsm__play::after{ border-width:10px 0 10px 16px; margin-left:4px; }
  .rbsm__content{ padding:24px 20px 24px; }
  .rbsm__title{ font-size:22px; }
  .rbsm__desc{ font-size:14px; }
  .rbsm__close{ width:44px; height:44px; top:10px; right:10px; }
}
@media (max-width:380px){
  .rbsm__content{ padding:22px 16px 22px; }
  .rbsm__title{ font-size:20.5px; }
}

@media (prefers-reduced-motion:reduce){
  .rbsm__backdrop, .rbsm__dialog{ animation-duration:.001s; }
  .rbsm__play::before, .rbsm__badge i{ animation:none; }
  .rbsm__cta:hover{ transform:none; }
}
/* ---------- rbty (thank-you) ---------- */
html.rbty-lock, html.rbty-lock body{ overflow:hidden !important; }
html.rbty-lock .thank-you-page{ display:none !important; }

.rbty{ --ty-gold:#f5c76b; --ty-serif:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  --ty-sans:"Inter","Noto Sans TC",system-ui,sans-serif; --ty-line:#84bdff2e;
  position:fixed; inset:0; z-index:2147483001; display:none;
  flex-direction:column; align-items:center; justify-content:flex-start;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(20px,4vh,48px) 16px;
  padding-top:max(clamp(20px,4vh,48px),env(safe-area-inset-top));
  padding-bottom:max(clamp(28px,5vh,48px),env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 78% 2%, #3aafff3a, #0000 30%),
    radial-gradient(circle at 18% 12%, #2369d624, #0000 40%),
    radial-gradient(circle at 50% 92%, #f5c76b12, #0000 40%),
    linear-gradient(116deg,#020714,#06142e 44%,#071d3c 72%,#020714);
  color:#f7fbff; font-family:var(--ty-sans); -webkit-tap-highlight-color:transparent; }
.rbty.is-open{ display:flex; }
.rbty *{ box-sizing:border-box; }
.rbty__nb{ white-space:nowrap; }
.rbty::before{ content:""; position:fixed; inset:0; pointer-events:none; opacity:.42;
  background-image:radial-gradient(circle,#addcff33 1px,#0000 1.4px),
                   linear-gradient(#5ea6ff14 1px,#0000 1px),linear-gradient(90deg,#5ea6ff14 1px,#0000 1px);
  background-size:34px 34px,92px 92px,92px 92px;
  -webkit-mask:radial-gradient(circle at 52% 8%, #000, #0000 74%);
          mask:radial-gradient(circle at 52% 8%, #000, #0000 74%); }

.rbty__wrap{ position:relative; width:100%; max-width:760px; margin:auto; }

/* ===== 單一融合式大卡（縱向中央聚焦） ===== */
.rbty__card{ position:relative; overflow:hidden; border-radius:28px;
  background:linear-gradient(165deg, rgba(10,28,58,.92), rgba(7,20,46,.86));
  border:1px solid var(--ty-line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 40px 100px rgba(2,7,20,.55), inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0; transform:translateY(18px); animation:rbtyUp .6s .05s cubic-bezier(.2,.7,.3,1) forwards;
  padding:clamp(30px,4vw,48px) clamp(22px,4vw,50px) clamp(28px,3.4vw,40px);
  display:flex; flex-direction:column; align-items:center; text-align:center; }
@keyframes rbtyUp{ to{ opacity:1; transform:none; } }
.rbty__card::before{ content:""; position:absolute; left:50%; top:0; width:560px; height:280px; transform:translate(-50%,-52%);
  background:radial-gradient(circle, rgba(245,199,107,.14), transparent 62%); pointer-events:none; }

/* ---- A 成功狀態 ---- */
.rbty__check-wrap{ position:relative; }
.rbty__check-wrap::before{ content:""; position:absolute; left:50%; top:50%; width:190px; height:190px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(245,199,107,.26), transparent 66%); pointer-events:none; }
.rbty__check{ position:relative; width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle at 26% 16%, #ffffffb0, #0000 34%), linear-gradient(135deg,#ffe9a8,#f5c76b 40%,#d69a2f 74%);
  border:1px solid #ffe8a9d9; display:grid; place-items:center;
  box-shadow:0 0 0 6px rgba(245,199,107,.12), 0 18px 40px rgba(245,199,107,.4), inset 0 3px #ffffffc0, inset 0 -3px rgba(118,77,12,.3);
  transform:scale(.5); opacity:0; animation:rbtyPop .55s .2s cubic-bezier(.2,1.4,.4,1) forwards; }
.rbty__check::after{ content:""; position:absolute; inset:-9px; border-radius:50%;
  border:1.5px solid rgba(102,215,160,.5); opacity:0; animation:rbtyRing 2.2s .7s ease-out infinite; }
@keyframes rbtyPop{ to{ transform:scale(1); opacity:1; } }
@keyframes rbtyRing{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.55); opacity:0; } }
.rbty__check svg{ width:40px; height:40px; color:#5a3d05; }

.rbty__badge{ display:inline-flex; align-items:center; gap:10px; margin-top:22px;
  color:#ffe4a6; background:rgba(245,199,107,.12); border:1px solid #f5c76b9c; border-radius:999px;
  padding:11px 22px; font-size:1.05rem; font-weight:800; letter-spacing:.08em;
  box-shadow:inset 0 1px rgba(255,255,255,.14), 0 0 30px rgba(245,199,107,.16); }
.rbty__badge i{ width:10px; height:10px; border-radius:50%; background:#4ade80; box-shadow:0 0 11px rgba(74,222,128,.95); }

.rbty__title{ margin:18px 0 0; font-family:var(--ty-serif); font-weight:800;
  font-size:clamp(30px,4.8vw,50px); line-height:1.16; letter-spacing:.01em; color:#f7fbff; text-wrap:balance; }
.rbty__title .gold{ background:linear-gradient(96deg,#f0a719,#ffcf48 42%,#d78612);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

.rbty__eventbar{ display:flex; align-items:stretch; margin-top:24px; border-radius:16px; overflow:hidden;
  border:1px solid #77bdff45; background:linear-gradient(160deg, rgba(11,34,73,.64), rgba(4,16,41,.58));
  box-shadow:inset 0 1px rgba(255,255,255,.09), 0 14px 36px rgba(30,136,255,.14); }
.rbty__eb-seg{ display:flex; align-items:center; justify-content:center; gap:10px; padding:15px 24px; }
.rbty__eb-seg svg{ width:19px; height:19px; color:var(--ty-gold); flex:0 0 auto; }
.rbty__eb-date{ font-size:16px; font-weight:700; color:#eef4ff; letter-spacing:.01em; }
.rbty__eb-time{ font-family:var(--ty-serif); font-weight:800; font-size:23px; line-height:1; font-variant-numeric:tabular-nums;
  background:linear-gradient(96deg,#f0a719,#ffcf48 42%,#d78612); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rbty__eb-type{ font-size:13.5px; font-weight:700; letter-spacing:.03em; color:#d4e2f7; }
.rbty__eb-div{ width:1px; flex:0 0 auto; background:rgba(133,189,255,.24); }

.rbty__emailnote{ display:inline-flex; align-items:center; gap:11px; margin-top:18px; padding:12px 20px; border-radius:13px;
  background:rgba(122,178,255,.09); border:1px solid #77bdff36; font-size:14.5px; line-height:1.5; color:#c6d5ee; font-weight:500; }
.rbty__emailnote svg{ width:19px; height:19px; color:#8fc0ff; flex:0 0 auto; }
/* 垃圾郵件提醒 */
.rbty__spamnote{ display:flex; align-items:flex-start; justify-content:center; gap:7px; margin:12px auto 0; max-width:480px;
  font-size:13px; line-height:1.65; color:#f0d9a0; font-weight:500; }
.rbty__spamnote span{ flex:0 0 auto; }

.rbty__divider{ width:100%; height:1px; margin:clamp(28px,3.2vw,38px) 0; border:0;
  background:linear-gradient(90deg, transparent, rgba(133,189,255,.28) 20%, rgba(245,199,107,.28) 50%, rgba(133,189,255,.28) 80%, transparent); }

/* ---- B 下一步 ---- */
.rbty__step-pill{ display:inline-flex; align-items:center; gap:8px; padding:12px 26px; border-radius:999px;
  background:rgba(37,185,90,.16); border:1px solid rgba(102,215,160,.46); color:#8cf0b3;
  font-size:17px; font-weight:800; letter-spacing:.12em; box-shadow:0 0 24px rgba(37,185,90,.14); }
.rbty__wa-h{ margin:16px 0 0; font-family:var(--ty-serif); font-size:clamp(25px,3.2vw,32px); font-weight:800; color:#fff; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:13px; white-space:nowrap; }
.rbty__wa-ic{ width:46px; height:46px; border-radius:14px; flex:0 0 auto;
  background:radial-gradient(circle at 24% 16%, #ffffff5c, #0000 30%), linear-gradient(135deg,#3ddc74,#1fb85c 45%,#0e8a54 75%);
  border:1px solid #7ff0aa66; display:grid; place-items:center; box-shadow:0 8px 20px rgba(20,156,86,.4), inset 0 1px rgba(255,255,255,.4); }
.rbty__wa-ic svg{ width:26px; height:26px; color:#fff; }
.rbty__lead{ margin:18px auto 0; max-width:520px; font-size:16px; line-height:1.66; color:#c6d3ea; }
.rbty__lead b.g{ font-weight:800; white-space:nowrap; background:linear-gradient(96deg,#f0a719,#ffcf48 42%,#d78612); -webkit-background-clip:text; background-clip:text; color:transparent; }

.rbty__benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; width:100%; margin-top:24px; }
.rbty__bcard{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; padding:20px 18px; border-radius:16px; text-align:left;
  background:linear-gradient(165deg, rgba(11,30,60,.6), rgba(7,20,44,.5)); border:1px solid #84bdff30; box-shadow:inset 0 1px rgba(255,255,255,.05); }
.rbty__bcard-ic{ width:44px; height:44px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center;
  background:rgba(122,178,255,.14); border:1px solid #77bdff45; color:#8fc0ff; }
.rbty__bcard-ic svg{ width:23px; height:23px; }
.rbty__bcard-tx{ min-width:0; }
.rbty__bcard h4{ margin:0; font-size:16.5px; font-weight:800; color:#fff; letter-spacing:.01em; }
.rbty__bcard p{ margin:5px 0 0; font-size:13.5px; line-height:1.5; color:#b3c2dc; }
.rbty__bcard--gold{ border-color:rgba(245,199,107,.34); background:linear-gradient(165deg, rgba(46,38,20,.5), rgba(20,26,44,.5)); }
.rbty__bcard--gold .rbty__bcard-ic{ background:rgba(245,199,107,.15); border-color:#f5c76b66; color:#f5c76b; }

/* ---- C 資源 carousel ---- */
.rbty__slides{ width:100%; margin-top:clamp(24px,3vw,32px); padding:clamp(20px,2.6vw,28px) clamp(16px,2.4vw,26px);
  border-radius:20px; background:linear-gradient(165deg, rgba(9,24,50,.62), rgba(6,17,40,.5));
  border:1px solid #84bdff2e; box-shadow:inset 0 1px rgba(255,255,255,.05); }
.rbty__slides-head{ text-align:center; }
.rbty__slides-title{ font-family:var(--ty-serif); font-size:clamp(20px,2.3vw,24px); font-weight:800; color:#fff; letter-spacing:.01em; }
.rbty__slides-sub{ margin-top:8px; font-size:14px; font-weight:600; color:#aebfd8; }
.rbty__slides-sub b.g{ font-weight:800; background:linear-gradient(96deg,#f0a719,#ffcf48 42%,#d78612); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rbty__carousel{ position:relative; width:100%; max-width:560px; margin:20px auto 0;
  height:clamp(286px,58vw,342px); perspective:1250px; }
.rbty__slide{ position:absolute; top:50%; left:50%; width:clamp(184px,42%,242px);
  transform:translate(-50%,-50%); cursor:pointer;
  transition:transform .55s cubic-bezier(.4,.06,.2,1), opacity .5s ease; will-change:transform,opacity; }
.rbty__slide-img{ position:relative; width:100%; aspect-ratio:4/5; border-radius:15px; overflow:hidden;
  border:1px solid #a9cbff55; box-shadow:0 20px 46px rgba(2,7,20,.62); background:#0a1a34; }
.rbty__slide-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.rbty__slide-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,7,20,0) 55%, rgba(2,7,20,.35)); }
.rbty__slide.is-active .rbty__slide-img{ border-color:#f5c76b85; box-shadow:0 28px 58px rgba(2,7,20,.66), 0 0 0 1px rgba(245,199,107,.24), 0 0 40px rgba(245,199,107,.14); }
.rbty__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:40; width:44px; height:44px; border-radius:50%;
  background:rgba(9,20,40,.66); border:1px solid #77bdff45; color:#dbe8ff; display:grid; place-items:center; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s, transform .2s, border-color .2s; }
.rbty__arrow:hover{ background:rgba(9,20,40,.95); border-color:#f5c76b8c; }
.rbty__arrow:active{ transform:translateY(-50%) scale(.92); }
.rbty__arrow svg{ width:20px; height:20px; }
.rbty__arrow--prev{ left:2px; } .rbty__arrow--next{ right:2px; }
.rbty__slide-caption{ margin-top:16px; font-size:14.5px; font-weight:700; color:#c8d5ec; letter-spacing:.02em; text-align:center; }
.rbty__dots{ display:flex; justify-content:center; gap:8px; margin-top:12px; }
.rbty__dot{ width:8px; height:8px; border-radius:999px; border:0; padding:0; cursor:pointer;
  background:rgba(180,200,230,.3); transition:width .25s ease, background .25s ease; }
.rbty__dot.is-active{ width:22px; background:var(--ty-gold); }

/* ---- D 三步流程 ---- */
.rbty__journey{ display:flex; align-items:flex-start; justify-content:center; gap:8px; width:100%; max-width:520px; margin:clamp(26px,3vw,34px) auto 0; }
.rbty__jstep{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; }
.rbty__jstep:not(:last-child)::after{ content:""; position:absolute; top:22px; left:calc(50% + 26px); right:calc(-50% + 26px); height:2px;
  background:linear-gradient(90deg, rgba(37,185,90,.5), rgba(245,199,107,.5)); }
.rbty__jnode{ position:relative; z-index:1; width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(12,34,73,.96), rgba(6,20,46,.96)); border:1px solid #77bdff45; box-shadow:0 5px 14px rgba(2,7,20,.5), inset 0 1px rgba(255,255,255,.08); }
.rbty__jnode svg{ width:21px; height:21px; color:var(--ty-gold); }
.rbty__jstep--first .rbty__jnode{ background:radial-gradient(circle at 26% 16%, #ffffff4d, #0000 32%), linear-gradient(135deg,#2fce6c,#0e8a54); border-color:#7ff0aa66; }
.rbty__jstep--first .rbty__jnode svg{ color:#fff; }
.rbty__jlabel{ font-size:13.5px; font-weight:700; color:#dbe6f6; line-height:1.35; }

/* ---- E CTA ---- */
.rbty__ctazone{ display:flex; flex-direction:column; align-items:center; width:100%;
  margin-top:clamp(30px,3.6vw,42px); padding-top:clamp(26px,3vw,34px); border-top:1px solid rgba(133,189,255,.14); }
.rbty__remind{ margin:0 0 18px; font-size:15px; line-height:1.6; color:#b6c5dd; }
.rbty__cta{ display:flex; align-items:center; justify-content:center; gap:12px;
  width:min(520px,100%); min-height:68px; padding:0 26px; border-radius:999px;
  font-family:var(--ty-sans); font-size:17.5px; font-weight:900; letter-spacing:.01em; text-decoration:none; color:#fff; text-align:center; white-space:nowrap;
  background:radial-gradient(circle at 22% 14%, #ffffff5c, #0000 26%), linear-gradient(135deg,#3ddc74,#1fb85c 42%,#0e8a54 72%,#0a6b41);
  border:1px solid #7ff0aa80;
  box-shadow:0 0 0 4px rgba(37,185,90,.16), 0 26px 66px rgba(18,146,90,.56), inset 0 2px rgba(255,255,255,.55), inset 0 -2px rgba(10,74,44,.32);
  transition:transform .24s ease, box-shadow .24s ease, filter .24s ease; }
.rbty__cta:hover{ transform:translateY(-3px); box-shadow:0 0 0 5px rgba(37,185,90,.22), 0 36px 92px rgba(18,146,90,.74), inset 0 2px rgba(255,255,255,.7); filter:saturate(1.05); }
.rbty__cta:active{ transform:translateY(-1px); }
.rbty__cta:focus-visible{ outline:3px solid rgba(102,215,160,.7); outline-offset:3px; }
.rbty__cta svg{ width:25px; height:25px; flex:0 0 auto; }
.rbty__cta-arrow{ transition:transform .2s ease; }
.rbty__cta:hover .rbty__cta-arrow{ transform:translateX(5px); }
.rbty__cta--quick{ display:none; }
.rbty__softlink{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:10px 20px; border-radius:999px;
  background:rgba(37,185,90,.09); border:1px solid rgba(102,215,160,.34); color:#7fe6a6;
  font-family:var(--ty-sans); font-size:14.5px; font-weight:700; letter-spacing:.01em; text-decoration:none; white-space:nowrap;
  transition:background .2s ease, border-color .2s ease, transform .18s ease; }
.rbty__softlink:hover{ background:rgba(37,185,90,.16); border-color:rgba(102,215,160,.55); transform:translateY(-1px); }
.rbty__softlink:focus-visible{ outline:2px solid rgba(102,215,160,.7); outline-offset:3px; }
.rbty__softlink svg{ width:18px; height:18px; }
.rbty__sl-arrow{ transition:transform .18s ease; margin-left:1px; }
.rbty__softlink:hover .rbty__sl-arrow{ transform:translateX(3px); }
.rbty__foot{ margin:17px 0 0; font-size:13.5px; line-height:1.65; color:#9cafcd; max-width:460px; }
.rbty__home{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:11px 26px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); color:#fff;
  font-family:var(--ty-sans); font-size:14.5px; font-weight:700; letter-spacing:.01em; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .18s ease; }
.rbty__home:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.28); transform:translateY(-1px); }
.rbty__home:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:3px; }
.rbty__home svg{ width:18px; height:18px; }

/* ============ 手機版 ============ */
@media (max-width:768px){
  .rbty__wrap{ max-width:460px; }
  .rbty__card{ border-radius:24px; }
  .rbty__check{ width:74px; height:74px; }
  .rbty__check svg{ width:36px; height:36px; }
  .rbty__badge{ font-size:1rem; padding:10px 20px; }
  .rbty__title{ font-size:clamp(27px,7.2vw,34px); }
  .rbty__eventbar{ flex-direction:column; width:100%; }
  .rbty__eb-div{ width:100%; height:1px; }
  .rbty__emailnote{ font-size:12.8px; padding:11px 14px; gap:9px; white-space:nowrap; }
  .rbty__emailnote svg{ width:17px; height:17px; }
  .rbty__wa-h{ font-size:23px; }
  .rbty__lead{ font-size:15.5px; }
  .rbty{ padding-bottom:max(calc(env(safe-area-inset-bottom) + 26px), 44px); }
  .rbty__benefits{ display:none; }
  .rbty__softlink{ display:none; }
  .rbty__cta--quick{ display:flex; width:100%; min-height:54px; font-size:15px; margin-top:18px;
    box-shadow:0 0 0 3px rgba(37,185,90,.13), 0 14px 32px rgba(18,146,90,.4), inset 0 2px rgba(255,255,255,.5), inset 0 -2px rgba(10,74,44,.3); }
  .rbty__cta--quick svg{ width:22px; height:22px; }
  .rbty__carousel{ height:clamp(270px,72vw,320px); }
  .rbty__slide{ width:clamp(172px,50%,214px); }
  .rbty__arrow{ width:40px; height:40px; }
  .rbty__jlabel{ font-size:12.5px; }
  .rbty__cta{ width:100%; }
  .rbty__foot{ font-size:13px; }
}
@media (max-width:400px){
  .rbty__cta{ font-size:15px; gap:9px; }
  .rbty__jlabel{ font-size:11.5px; }
  .rbty__arrow--prev{ left:-4px; } .rbty__arrow--next{ right:-4px; }
}
@media (prefers-reduced-motion:reduce){
  .rbty__card, .rbty__check{ animation-duration:.001s; }
  .rbty__check::after{ animation:none; }
  .rbty__cta:hover{ transform:none; }
  .rbty__slide{ transition:none; }
}
/* ---------- rbhdr-sticky-fix ---------- */
/* 修正：.webinar-page > * 把 header 覆寫成 position:relative，導致捲動時消失。
   header 本身已內建 fixed + glassmorphism + --scrolled 狀態，這裡以更高優先權恢復固定定位。 */
header.webinar-header{
  position:fixed !important; top:0 !important; left:0 !important; right:0 !important;
  z-index:1000 !important;
}
/* 固定 header 後，錨點跳轉時不被蓋住 */
.webinar-page [id]{ scroll-margin-top:88px; }
@media (max-width:768px){ .webinar-page [id]{ scroll-margin-top:76px; } }
/* ---------- rb-scroll-anchor-fix ---------- */
/* 防禦：避免圖片/carousel 載入時的 scroll anchoring 把畫面錨定到中段區塊 */
#webinar-countdown-band, #circle-sections-root .rb-tools, #circle-sections-root .pint{ overflow-anchor:none; }
