@charset "utf-8";
/*
---------------------------------------------------------
combine/combine-eea9d5ae.css
---------------------------------------------------------
00. /var/www/archibm/public/css/site/app/app-shell.css
01. /var/www/archibm/public/css/site/app/plans.css
*/

/*
---------------------------------------------------------
00. /var/www/archibm/public/css/site/app/app-shell.css
---------------------------------------------------------
*/

/* ============================================================
   BIMTeki 新版網站：應用頁（plans／addons／downloads／my-applications／contact）共用的外殼微調
   ------------------------------------------------------------
   來源：Sara 115.09.17 v5 四個複刻頁 <style id="bt-app-css"> 的最後一段（四頁內容相同）。
   應用頁的內容卡片沿用正式站的 .inner（寬 92%，左右各 4%），不是設計頁的 5vw，
   所以 header 膠囊與公告列留白在窄螢幕跟著 4% 走，才會與下方卡片切齊。
   公告列其餘樣式在 shell.css。
   ============================================================ */

@media screen and (max-width:1024px){
  #app-homepage #header-inner{ width:92%; box-sizing:border-box; }
}
@media screen and (max-width:720px){
  .ann-bar{ --ann-gutter:4vw; }
  .ann-in{ padding-left:4vw; padding-right:4vw; }
  .ann-x{ right:calc(4vw - 8px); }
}


/*
---------------------------------------------------------
01. /var/www/archibm/public/css/site/app/plans.css
---------------------------------------------------------
*/

/* ============================================================
   BIMTeki 新版網站：購買方案頁內容區（.bt-app）
   ------------------------------------------------------------
   來源：Sara 115.09.17 v5 複刻稿 plans.html 的 <style id="bt-app-css">
   （正式站內容區樣式以 :where(.bt-app) 範圍化，外加 115.09.15 起的中性色與卡片調整）。
   公告列樣式在 shell.css；應用頁共用的 header／公告列寬度在 app-shell.css。
   ============================================================ */
/* ===== 正式站內容區樣式（115.09.14 從 bim.arkiteki.com 存檔頁自動抽出）=====
   只收「內容區元素實際會套到」的規則，選擇器一律加 :where(.bt-app) 前綴（:where 不增加權重，與正式站原本的權重一致，
   才不會蓋掉 Font Awesome 之類其他樣式表的 class 規則），
   不影響 header／footer（那兩塊沿用首頁的中性化外殼）。
   ⚠️ .bt-app 上的 font／color 是正式站 body 繼承下來的值，外殼 body 的設定不同，所以要在這裡補回。
   ⚠️ 顏色變數在這裡重新宣告：外殼的 .neutral 覆寫只作用在 header／nav／footer，內容區要維持品牌紫。 */
.bt-app{font-family:"Noto Sans TC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial;font-size:14px;line-height:1;color:var(--default-text-color);--theme-text-color:#7872E0;--theme-button-color:#7872E0;--scrollbar-track:#E4E3FF;--scrollbar-thumb:#AAA5FF;--gray-border-color:#C8C8C8;--default-title-color:#222222;--softer-bg-color:#F2F1FF;--default-text-color:#222222;--tooltipster-scrollbar-track:#ffffff;--tooltipster-scrollbar-thumb:#AAA5FF;--theme-border-color:#7872E0;--gray-button-color:#C8C8C8;--theme-bg-color:#7872E0;--theme-title-color:#7872E0;--page-header-padding:50px;--page-header-fontsize:1.8em;--mid-border-color:#958FFF;--sharp-text-color:#222222;--mid2-border-color:#AAA5FF;--light-border-color:#CAC7FF;--mid-text-color:#958FFF;--highlight-border-color:#958FFF;}
.bt-app{--light-border-color:var(--color-theme-300);--mid2-border-color:var(--color-theme-400);--mid-border-color:var(--color-theme-500);--theme-border-color:var(--color-theme-600);--gray-border-color:var(--color-black-50);--highlight-border-color:var(--color-theme-500);--default-text-color:var(--color-black-500);--sharp-text-color:var(--color-black-500);--default-title-color:var(--color-black-500);--theme-title-color:var(--color-theme-600);--mid-text-color:var(--color-theme-500);--theme-text-color:var(--color-theme-600);--softer-bg-color:var(--color-theme-100);--theme-bg-color:var(--color-theme-600);--scrollbar-track:var(--color-theme-200);--scrollbar-thumb:var(--color-theme-400);--tooltipster-scrollbar-track:#ffffff;--tooltipster-scrollbar-thumb:var(--color-theme-400);--gray-button-color:var(--color-black-50);--theme-button-color:var(--color-theme-600);--page-header-padding:90px;--page-header-fontsize:2.6em}
@media screen and (max-width: 1600px){
.bt-app{--page-header-padding:60px;--page-header-fontsize:2.2em}
}
@media screen and (max-width: 1440px){
.bt-app{--page-header-padding:50px;--page-header-fontsize:1.8em}
}
@media screen and (max-width: 1024px){
.bt-app{--page-header-padding:40px;--page-header-fontsize:1.5em}
}
@media screen and (max-width: 640px){
.bt-app{--page-header-padding:30px;--page-header-fontsize:1.5em}
}
/* 外殼（快速上手頁）有 h1,h2,h3{letter-spacing:.05em}、p{letter-spacing:.05em}，正式站沒有，會漏進內容區把字撐寬 */
.bt-app{letter-spacing:normal;}
:where(.bt-app) h1,:where(.bt-app) h2,:where(.bt-app) h3,:where(.bt-app) p{letter-spacing:normal;}
/* === combine-defer-2bb055b5.css === */
:where(.bt-app) .select2-container{box-sizing: border-box; display: inline-block; margin: 0px; position: relative; vertical-align: middle;}
:where(.bt-app) .select2-container .select2-selection--single{box-sizing: border-box; cursor: pointer; display: block; height: 28px; user-select: none;}
:where(.bt-app) .select2-container .select2-selection--single .select2-selection__rendered{display: block; padding-left: 8px; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
:where(.bt-app) .select2-dropdown{background-color: white; border: 1px solid rgb(170, 170, 170); border-radius: 4px; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051;}
:where(.bt-app) .select2-results{display: block;}
:where(.bt-app) .select2-results__options{list-style: none; margin: 0px; padding: 0px;}
:where(.bt-app) .select2-results__option{padding: 6px; user-select: none;}
:where(.bt-app) .select2-results__option--selectable{cursor: pointer;}
:where(.bt-app) .select2-container--open .select2-dropdown{left: 0px;}
:where(.bt-app) .select2-container--open .select2-dropdown--below{border-top-width: medium; border-top-style: none; border-top-color: currentcolor; border-top-left-radius: 0px; border-top-right-radius: 0px;}
:where(.bt-app) .select2-search--dropdown{display: block; padding: 4px;}
:where(.bt-app) .select2-search--dropdown .select2-search__field{padding: 4px; width: 100%; box-sizing: border-box;}
:where(.bt-app) .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{appearance: none;}
:where(.bt-app) .select2-search--dropdown.select2-search--hide{display: none;}
:where(.bt-app) .select2-hidden-accessible{border: 0px !important; clip: rect(0px, 0px, 0px, 0px) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0px !important; position: absolute !important; width: 1px !important; white-space: nowrap !important;}
:where(.bt-app) .select2-container--default .select2-selection--single{background-color: rgb(255, 255, 255); border: 1px solid rgb(170, 170, 170); border-radius: 4px;}
:where(.bt-app) .select2-container--default .select2-selection--single .select2-selection__rendered{color: rgb(68, 68, 68); line-height: 28px;}
:where(.bt-app) .select2-container--default .select2-selection--single .select2-selection__arrow{height: 26px; position: absolute; top: 1px; right: 1px; width: 20px;}
:where(.bt-app) .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color: rgb(136, 136, 136) transparent transparent; border-style: solid; border-width: 5px 4px 0px; height: 0px; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0px;}
:where(.bt-app) .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color: transparent transparent rgb(136, 136, 136); border-width: 0px 4px 5px;}
:where(.bt-app) .select2-container--default.select2-container--open.select2-container--below .select2-selection--single{border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;}
:where(.bt-app) .select2-container--default .select2-search--dropdown .select2-search__field{border: 1px solid rgb(170, 170, 170);}
:where(.bt-app) .select2-container--default .select2-results > .select2-results__options{max-height: 200px; overflow-y: auto;}
:where(.bt-app) .select2-container--default .select2-results__option--selected{background-color: rgb(221, 221, 221);}
:where(.bt-app) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color: rgb(88, 151, 251); color: white;}
:where(.bt-app) .fr-view{overflow-wrap: break-word;}
:where(.bt-app) .fr-view strong{font-weight: 700;}
:where(.bt-app) .tooltipster-base{display: flex; pointer-events: none; position: absolute;}
:where(.bt-app) .tooltipster-box{flex: 1 1 auto;}
:where(.bt-app) .tooltipster-content{box-sizing: border-box; max-height: 100%; max-width: 100%; overflow: auto;}
:where(.bt-app) .tooltipster-fade{opacity: 0; transition-property: opacity;}
:where(.bt-app) .tooltipster-fade.tooltipster-show{opacity: 1;}
:where(.bt-app) .tooltipster-sidetip .tooltipster-box{background: rgb(86, 86, 86); border: 2px solid rgb(0, 0, 0); border-radius: 4px;}
:where(.bt-app) .tooltipster-sidetip.tooltipster-right .tooltipster-box{margin-left: 8px;}
:where(.bt-app) .tooltipster-sidetip .tooltipster-content{color: rgb(255, 255, 255); line-height: 18px; padding: 6px 14px;}
:where(.bt-app) .tooltipster-sidetip .tooltipster-arrow{overflow: hidden; position: absolute;}
:where(.bt-app) .tooltipster-sidetip.tooltipster-right .tooltipster-arrow{height: 20px; margin-top: -10px; left: 0px; top: 0px; width: 10px;}
:where(.bt-app) .tooltipster-sidetip .tooltipster-arrow-background,
:where(.bt-app) .tooltipster-sidetip .tooltipster-arrow-border{height: 0px; position: absolute; width: 0px;}
:where(.bt-app) .tooltipster-sidetip .tooltipster-arrow-background{border: 10px solid transparent;}
:where(.bt-app) .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background{border-right-color: rgb(86, 86, 86); left: 3px; top: 0px;}
:where(.bt-app) .tooltipster-sidetip .tooltipster-arrow-border{border: 10px solid transparent; left: 0px; top: 0px;}
:where(.bt-app) .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border{border-right-color: rgb(0, 0, 0);}
:where(.bt-app) .tooltipster-sidetip .tooltipster-arrow-uncropped{position: relative;}
:where(.bt-app) .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped{left: -10px;}
:where(.bt-app) .tooltipster-sidetip.tooltipster-shadow .tooltipster-box{border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 5px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 6px;}
:where(.bt-app) .tooltipster-sidetip.tooltipster-shadow.tooltipster-right .tooltipster-box{margin-left: 6px;}
:where(.bt-app) .tooltipster-sidetip.tooltipster-shadow .tooltipster-content{color: rgb(141, 141, 141);}
:where(.bt-app) .tooltipster-sidetip.tooltipster-shadow .tooltipster-arrow{height: 6px; margin-left: -6px; width: 12px;}
:where(.bt-app) .tooltipster-sidetip.tooltipster-shadow.tooltipster-right .tooltipster-arrow{height: 12px; margin-left: 0px; margin-top: -6px; width: 6px;}
:where(.bt-app) .tooltipster-sidetip.tooltipster-shadow .tooltipster-arrow-background{display: none;}
:where(.bt-app) .tooltipster-sidetip.tooltipster-shadow .tooltipster-arrow-border{border: 6px solid transparent;}
:where(.bt-app) .tooltipster-sidetip.tooltipster-shadow.tooltipster-right .tooltipster-arrow-border{border-right-color: rgb(255, 255, 255);}
:where(.bt-app) .tooltipster-sidetip.tooltipster-shadow.tooltipster-right .tooltipster-arrow-uncropped{left: -6px;}
/* === combine-af57e642.css === */
:where(.bt-app) div,
:where(.bt-app) span,
:where(.bt-app) h2,
:where(.bt-app) h3,
:where(.bt-app) p,
:where(.bt-app) a,
:where(.bt-app) img,
:where(.bt-app) strong,
:where(.bt-app) b,
:where(.bt-app) i,
:where(.bt-app) ul,
:where(.bt-app) li,
:where(.bt-app) form,
:where(.bt-app) table,
:where(.bt-app) tbody,
:where(.bt-app) tr,
:where(.bt-app) th,
:where(.bt-app) td{margin: 0px; padding: 0px; border: 0px; font: inherit; vertical-align: baseline;}
:where(.bt-app) main{display: block;}
:where(.bt-app) ul{list-style: none;}
:where(.bt-app) table{border-collapse: collapse; border-spacing: 0px;}
:where(.bt-app) *{box-sizing: border-box;}
:where(.bt-app) a{color: inherit; text-decoration: none; transition: 0.2s;}
:where(.bt-app) strong,
:where(.bt-app) b{font-weight: 500;}
:where(.bt-app) table{width: 100%; border-width: medium 1px 1px medium; border-style: none solid solid none; border-color: currentcolor rgb(204, 204, 204) rgb(204, 204, 204) currentcolor; border-image: initial; position: relative;}
:where(.bt-app) table th,
:where(.bt-app) table td{padding: 8px 10px; min-width: 40px; border-width: 1px medium medium 1px; border-style: solid none none solid; border-color: rgb(204, 204, 204) currentcolor currentcolor rgb(204, 204, 204); border-image: initial; text-align: left;}
:where(.bt-app) img{max-width: 100%;}
:where(.bt-app) h2,
:where(.bt-app) h3{font-weight: 500; color: var(--theme-text-color);}
:where(.bt-app) hr{margin: 40px 0px; border-width: 1px medium medium; border-style: solid none none; border-color: rgb(221, 221, 221) currentcolor currentcolor; border-image: initial;}
:where(.bt-app) form{}
:where(.bt-app) form select{width: 100%; height: 42px; padding: 0.6em 1em; background: rgb(247, 247, 247); border: 1px solid rgb(223, 223, 223); border-radius: 4px; font-family: inherit; outline: none; appearance: none;}
:where(.bt-app) form select{padding: 5px;}
:where(.bt-app) form button{font-family: inherit; outline: none;}
:where(.bt-app) form button[type="submit"]{display: inline-block;}
:where(.bt-app) form input:-webkit-autofill,
:where(.bt-app) form input:-webkit-autofill:hover,
:where(.bt-app) form input:-webkit-autofill:focus{-webkit-text-fill-color: rgb(0, 0, 0); box-shadow: rgb(255, 255, 255) 0px 0px 0px 1000px inset; transition: background-color 5000s ease-in-out;}
:where(.bt-app) form input::placeholder{color: rgb(170, 170, 170); font-weight: 400;}
:where(.bt-app) form input:disabled,
:where(.bt-app) form input.disabled,
:where(.bt-app) form button:disabled,
:where(.bt-app) form button.disabled{pointer-events: none; opacity: 0.5;}
:where(.bt-app) button{font-family: inherit; font-weight: 500 !important;}
:where(.bt-app) .center{text-align: center;}
:where(.bt-app) .fr-view{font-size: 1rem; line-height: 1.7em;}
:where(.bt-app) .fr-view ul{list-style: disc; padding-left: 0px;}
:where(.bt-app) .fr-view ul li{list-style: inherit; margin: 0px 0px 5px 20px;}
:where(.bt-app) .fr-view strong{font-weight: 500;}
:where(.bt-app) .flex-center{display: flex; align-items: center;}
:where(.bt-app) .flex-justify{display: flex; justify-content: space-between;}
:where(.bt-app) .column-3{display: flex; flex-wrap: wrap;}
:where(.bt-app) .column-3 .col-item{width: 30%; margin-right: 5%; margin-top: 2%;}
:where(.bt-app) .column-3 .col-item:nth-child(3n){margin-right: 0px;}
:where(.bt-app) .column-3 .col-item:nth-child(-n+3){margin-top: 0px;}
:where(.bt-app) .thumb,
:where(.bt-app) .thumb-rect{width: 100%; overflow: hidden; position: relative; display: block;}
:where(.bt-app) .thumb img,
:where(.bt-app) .thumb-rect img{width: 100%; transition: 0.6s;}
:where(.bt-app) .thumb-rect{height: 0px; padding-top: 67%;}
:where(.bt-app) .thumb-rect img{position: absolute; inset: 0px; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto;}
:where(.bt-app) .thumb.fill img,
:where(.bt-app) .thumb-rect.fill img{object-fit: cover; width: 100%; height: 100%; max-width: none; max-height: none;}
:where(.bt-app) .button-md{display: inline-block; padding: 0px 1.1em; white-space: nowrap; cursor: pointer; transition: 0.2s; background: var(--theme-button-color); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; text-align: center; text-decoration: none !important;}
:where(.bt-app) .button-md{height: 42px; line-height: 40px; border-radius: 6px; font-size: 1.1em;}
:where(.bt-app) .button-md:hover{}
:where(.bt-app) .button-md.disabled{pointer-events: none; opacity: 0.6;}
:where(.bt-app) .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar{width: 5px; height: 5px;}
:where(.bt-app) .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track{background: var(--scrollbar-track) !important;}
:where(.bt-app) .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb{border-radius: 5px; background: var(--scrollbar-thumb) !important;}
:where(.bt-app) .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb:hover{background: var(--scrollbar-thumb) !important;}
:where(.bt-app) .expandable{border-top: 1px solid var(--gray-border-color); transition: opacity 0.4s;}
:where(.bt-app) .expandable:last-child{border-bottom: 1px solid var(--gray-border-color);}
:where(.bt-app) .expandable-title{padding: 25px 3px;}
:where(.bt-app) .expandable-title .expandable-handle{position: relative; display: inline-block; flex-shrink: 0; flex-grow: 0; width: 24px; height: 24px; margin-right: 5px; margin-left: 10px; color: rgb(153, 153, 153); cursor: pointer;}
:where(.bt-app) .expandable-title .expandable-handle i{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); transition: 0.4s;}
:where(.bt-app) .expandable-body{padding: 0px 0px 20px; display: none;}
:where(.bt-app) .expandable.show .expandable-title .expandable-handle i{transform: translate(-50%, -50%) rotate(90deg);}
:where(.bt-app) .expandable.show .expandable-body{display: block;}
:where(.bt-app) .expandable.show .expandable-handle i{transform: rotate(180deg);}
:where(.bt-app) .box-shadow-soft{box-shadow: rgba(122, 115, 255, 0.2) 3px 3px 10px;}
@media screen and (max-width: 1024px){
:where(.bt-app) form select{height: 36px; padding: 0.4em 0.7em;}
}
:where(.bt-app) h2,
:where(.bt-app) h3{color: var(--default-title-color); font-weight: 700;}
:where(.bt-app) h2{font-size: 2.7em; line-height: 1.2em;}
:where(.bt-app) h3{font-size: 1.4em;}
:where(.bt-app) .select2-container{width: 100% !important;}
:where(.bt-app) .select2-container--default .select2-selection--single{height: 36px; border: 1px solid rgb(210, 210, 210); outline: none;}
:where(.bt-app) .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 36px; padding-left: 12px;}
:where(.bt-app) .select2-container--default .select2-selection--single .select2-selection__arrow{height: 36px; width: 36px;}
:where(.bt-app) .select2-container--default .select2-results__option--selected{background-color: var(--softer-bg-color) !important; color: var(--theme-text-color) !important;}
:where(.bt-app) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color: rgb(247, 247, 247); color: var(--default-text-color);}
:where(.bt-app) .select2-dropdown{z-index: 99999999; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: rgba(0, 63, 64, 0.12) 3px 3px 10px;}
:where(.bt-app) .select2-results__option{white-space: nowrap; color: var(--default-text-color); padding: 0.7em 15px;}
:where(.bt-app) .select2-container--default .select2-search--dropdown .select2-search__field{outline: none; border-radius: 3px;}
:where(.bt-app) .tooltipster-content::-webkit-scrollbar{width: 5px; height: 5px;}
:where(.bt-app) .tooltipster-content::-webkit-scrollbar-track{background: var(--tooltipster-scrollbar-track);}
:where(.bt-app) .tooltipster-content::-webkit-scrollbar-thumb{background: var(--tooltipster-scrollbar-thumb); border-radius: 5px;}
:where(.bt-app) .tooltipster-content::-webkit-scrollbar-thumb:hover{background: var(--tooltipster-scrollbar-thumb);}
:where(.bt-app) .tooltipster-box{width: 100%;}
:where(.bt-app) .tooltipster-show{z-index: 999999998 !important;}
:where(.bt-app) .tooltipster-sidetip.tooltipster-shadow .tooltipster-box{overflow: hidden; box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 7px 3px;}
:where(.bt-app) .expandable-title{color: var(--gray-text-color); padding: 12px 3px; cursor: pointer; transition: 0.2s;}
:where(.bt-app) .expandable-title .no{flex-shrink: 0; flex-grow: 0; margin-right: 20px; width: 34px; height: 34px; line-height: 32px; text-align: center; border-radius: 50%; color: var(--theme-text-color); border: 1px solid var(--theme-border-color); background-color: rgb(255, 255, 255); transition: 0.2s;}
:where(.bt-app) .expandable-title .text{margin-right: auto; font-size: 1.2em; line-height: 1.3em; letter-spacing: 0.06em; color: var(--default-title-color);}
:where(.bt-app) .expandable-title .expandable-handle{color: var(--gray-button-color);}
:where(.bt-app) .expandable-body .text{margin: 0px 4.5%;}
:where(.bt-app) .expandable-body .fr-view{font-size: 1rem;}
:where(.bt-app) .expandable.show .expandable-title .no{background-color: var(--theme-bg-color); color: rgb(255, 255, 255);}
:where(.bt-app) .expandable.show .expandable-handle{color: var(--theme-button-color);}
:where(.bt-app) .button-md{border-radius: 50px;}
:where(.bt-app) .button-outline{background-color: rgb(255, 255, 255); border: 1px solid var(--theme-button-color); color: var(--theme-button-color);}
:where(.bt-app) .button-outline:hover,
:where(.bt-app) .button-outline.active{background-color: var(--theme-button-color); border: 1px solid var(--theme-button-color); color: rgb(255, 255, 255);}
:where(.bt-app) .faq-section{margin-top: 70px;}
:where(.bt-app) .faq-section h3{margin-bottom: 30px; font-weight: 500; font-size: 1.6em; color: var(--theme-title-color);}
:where(.bt-app) .inner{width: 92%; max-width: 1440px; margin: auto;}
:where(.bt-app) .inner-lg{width: 92%; max-width: 1350px; margin: auto;}
:where(.bt-app) #page-header-inner{padding: var(--page-header-padding) 15px calc(var(--page-header-padding) * .65) 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;}
:where(.bt-app) #page-header-inner h2{color: var(--default-title-color); font-weight: 500; font-size: var(--page-header-fontsize);}
:where(.bt-app) #main-wrapper{min-height: 50vh;}
:where(.bt-app) .main-content-wrapper{position: relative;}
:where(.bt-app) .main-content-wrapper .main-content{padding-bottom: 60px;}
@media screen and (max-width: 1600px){
:where(.bt-app) h2{font-size: 2.4em;}
}
@media screen and (max-width: 1280px){
:where(.bt-app) .expandable-title{padding: 10px 3px;}
:where(.bt-app) .expandable-title .text{font-size: 1.05em;}
}
@media screen and (max-width: 1024px){
:where(.bt-app) h2{font-size: 2.1em;}
:where(.bt-app) .inner{width: 92%; margin: auto;}
:where(.bt-app) .faq-section{margin-top: 50px;}
:where(.bt-app) .faq-section h3{margin-bottom: 20px; font-size: 1.6em;}
:where(.bt-app) .main-content-wrapper .main-content{padding: 0px 0px 40px;}
}
@media screen and (max-width: 920px){
:where(.bt-app) .column-3 .col-item{width: 49%; margin-right: 2%; margin-top: 2%;}
:where(.bt-app) .column-3 .col-item:nth-child(3n){margin-right: 2%;}
:where(.bt-app) .column-3 .col-item:nth-child(-n+3){margin-top: 2%;}
:where(.bt-app) .column-3 .col-item:nth-child(2n){margin-right: 0px;}
:where(.bt-app) .column-3 .col-item:nth-child(-n+2){margin-top: 0px;}
}
@media screen and (max-width: 768px){
:where(.bt-app) .expandable-title .no{margin-right: 15px; width: 30px; height: 30px; line-height: 26px; font-size: 0.92em;}
}
@media screen and (max-width: 640px){
:where(.bt-app) h2{font-size: 1.9em;}
:where(.bt-app) .expandable-title{padding: 8px 3px;}
:where(.bt-app) #page-header-inner{padding: var(--page-header-padding) 10px calc(var(--page-header-padding) * .25) 10px;}
}
@media screen and (max-width: 480px){
:where(.bt-app) h2{font-size: 1.7em;}
:where(.bt-app) .column-3 .col-item{width: 100%; margin-right: 0px; margin-top: 2%;}
:where(.bt-app) .column-3 .col-item:nth-child(3n){margin-right: 0px;}
:where(.bt-app) .column-3 .col-item:nth-child(-n+3){margin-top: 2%;}
:where(.bt-app) .column-3 .col-item:nth-child(2n){margin-right: 0px;}
:where(.bt-app) .column-3 .col-item:nth-child(-n+2){margin-top: 2%;}
:where(.bt-app) .column-3 .col-item:nth-child(1){margin-top: 0px;}
}
@media screen and (max-width: 360px){
:where(.bt-app) h2{font-size: 1.5em;}
}
:where(.bt-app) #plan-list-wrapper{}
:where(.bt-app) .plan-table{}
:where(.bt-app) .plan-table .col-item{width: 30%; margin-right: 5%; position: relative;}
:where(.bt-app) .plan-table .plan-box{min-height: 100%; background-color: rgb(255, 255, 255); border: 1px solid var(--gray-border-color); box-shadow: rgba(0, 0, 0, 0.08) 3px 3px 6px; border-radius: 15px;}
:where(.bt-app) .plan-table .plan-box:hover{border: 1px solid var(--mid-border-color); box-shadow: rgba(122, 115, 255, 0.2) 3px 3px 6px;}
:where(.bt-app) .plan-table .plan-box.is-preview{opacity: 0.6;}
:where(.bt-app) .plan-table .plan-box.hide-button .body{padding-top: 0px;}
:where(.bt-app) .plan-table .header{padding: 25px 8% 0px;}
:where(.bt-app) .plan-table .thumb{margin-bottom: 15px; height: auto !important; padding-top: 0px !important;}
:where(.bt-app) .plan-table .thumb img{position: static !important;}
:where(.bt-app) .plan-table .title{font-size: 1.8em; font-weight: 500; letter-spacing: 0.08em; color: var(--default-text-color);}
:where(.bt-app) .plan-table hr{margin: 20px 0px; border-bottom: 1px solid var(--gray-border-color);}
:where(.bt-app) .plan-table .plan-box:hover hr{border-bottom: 1px solid var(--mid-border-color);}
:where(.bt-app) .plan-table .price{display: flex; align-items: flex-end; margin-bottom: 5px;}
:where(.bt-app) .plan-table .price-value{}
:where(.bt-app) .plan-table .amount{font-size: 2.2em; letter-spacing: 0.08em; color: var(--theme-text-color);}
:where(.bt-app) .plan-table .period{font-size: 0.9em; color: var(--sharp-text-color); margin-left: 0.5em;}
:where(.bt-app) .plan-table .price-note{font-size: 0.9em; color: var(--default-text-color); margin-left: auto; letter-spacing: 0.08em;}
:where(.bt-app) .plan-table .inquire-price{font-size: 1.4em; font-weight: 500; letter-spacing: 0.08em; color: var(--theme-text-color);}
:where(.bt-app) .plan-table .buy{margin-top: 20px;}
:where(.bt-app) .plan-table .buy .buttons{position: absolute; bottom: 40px; width: 84%; gap: 8px;}
:where(.bt-app) .plan-table .buy .buttons button,
:where(.bt-app) .plan-table .buy .buttons a{flex-grow: 1; border-radius: 8px; color: var(--theme-text-color); background: none; transition: 0.2s; cursor: pointer; font-weight: 400 !important;}
:where(.bt-app) .plan-table .buy .buttons button:hover,
:where(.bt-app) .plan-table .buy .buttons a:hover{background-color: var(--mid2-border-color); border: 1px solid var(--mid2-border-color); color: rgb(255, 255, 255);}
:where(.bt-app) .plan-table .option-selector-wrapper{margin-top: 18px;}
:where(.bt-app) .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single{height: 38px; border: 1px solid var(--mid-border-color); border-radius: 6px;}
:where(.bt-app) .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 36px; color: rgb(136, 136, 136); padding-left: 25px;}
:where(.bt-app) .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow{width: 38px; height: 38px;}
:where(.bt-app) .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color: var(--mid-border-color) transparent transparent transparent;}
:where(.bt-app) .plan-table .body{padding: 15px 8% 110px;}
:where(.bt-app) .plan-table .spec{color: var(--default-text-color); margin-bottom: 10px; font-size: 1.02em; line-height: 1.4em;}
:where(.bt-app) .plan-table .features{}
:where(.bt-app) .plan-table .features li{padding: 0.7em 0.5em 0.7em 0px; font-size: 1.05em; color: var(--default-text-color);}
:where(.bt-app) .plan-table .features .fa-check{font-size: 0.8em; margin-right: 4px; color: var(--theme-text-color);}
:where(.bt-app) .plan-table .features .tooltip{color: rgb(221, 221, 221); font-size: 0.88em; margin-left: 1px;}
.bt-app .plan-table .plan-group-switch{position: absolute; right: 8%; top: 27px; border-radius: 40px; background-color: rgb(247, 247, 247); cursor: pointer;}
:where(.bt-app) .plan-table .plan-group-switch .switch-button{position: absolute; left: 0px; top: 0px; width: 60px; height: 100%; background-color: rgb(255, 255, 255); border: 1px solid var(--light-border-color); border-radius: 40px; transition: 0.3s;}
:where(.bt-app) .plan-table .plan-group-switch ul{display: flex; position: relative; z-index: 1;}
:where(.bt-app) .plan-table .plan-group-switch li{white-space: nowrap; padding: 0.7em 1.1em; color: rgb(102, 102, 102); font-weight: 500; transition: 0.2s;}
:where(.bt-app) .plan-table .plan-group-switch li.active{color: var(--mid-text-color);}
:where(.bt-app) .plan-table .plan-box.highlighted{border: 1px solid var(--highlight-border-color); box-shadow: rgba(122, 115, 255, 0.15) 3px 3px 10px;}
:where(.bt-app) .plan-table .plan-box.highlighted .title{color: var(--highlight-mid-text-color); border-bottom: 2px solid var(--highlight-text-color);}
:where(.bt-app) .plan-table .plan-box.highlighted .amount{color: var(--highlight-dark-text-color);}
:where(.bt-app) .plan-table .plan-box.highlighted button{border: 1px solid var(--highlight-border-color);}
:where(.bt-app) .plan-table .plan-box.highlighted button:hover{background-color: var(--highlight-border-color); border: 1px solid var(--highlight-border-color); color: rgb(255, 255, 255);}
:where(.bt-app) .plan-table .plan-box.highlighted .features{}
:where(.bt-app) .plan-table .plan-box.highlighted .features .fa-check{color: var(--highlight-text-color);}
:where(.bt-app) .plan-table .plan-group-switch.highlighted{background-color: var(--highlight-bg-color);}
:where(.bt-app) .plan-table .plan-group-switch li{color: rgb(136, 136, 136);}
:where(.bt-app) .plan-table .plan-group-switch li.active.highlighted{color: var(--highlight-mid-text-color);}
:where(.bt-app) .plan-table .plan-group-switch .switch-button.highlighted{border: 1px solid var(--highlight-border-color);}
:where(.bt-app) .plan-table .remark{margin-top: 12px; font-size: 0.92em; color: var(--theme-text-color);}
:where(.bt-app) .plan-table .remark i{font-size: 1.1em; margin-right: 3px;}
:where(.bt-app) #comparison-table-nav{display: none;}
:where(.bt-app) #comparison-table-nav li{flex-grow: 1; text-align: center;}
:where(.bt-app) #comparison-table-wrapper{margin: 80px auto; overflow: hidden; background-color: rgb(255, 255, 255); border: 1px solid var(--gray-border-color); box-shadow: none; border-radius: 15px;}
:where(.bt-app) .comparison-table{border-width: medium; border-style: none; border-color: currentcolor; border-image: initial;}
:where(.bt-app) .comparison-table tr{transition: 0.2s;}
:where(.bt-app) .comparison-table tr:not(.header-row):hover{background-color: var(--softer-bg-color);}
:where(.bt-app) .comparison-table th,
:where(.bt-app) .comparison-table td{padding: 1.2em 0px; border-top-width: medium; border-right-width: medium; border-left-width: medium; border-top-style: none; border-right-style: none; border-left-style: none; border-top-color: currentcolor; border-right-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-bottom: 1px solid var(--gray-border-color);}
:where(.bt-app) .comparison-table tr:last-child td{border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor;}
:where(.bt-app) .comparison-table th{font-size: 1.2em; font-weight: 500; letter-spacing: 0.08em; text-align: center; padding: 1.8em 0px; border-bottom: 1px solid var(--gray-border-color); color: var(--default-text-color);}
:where(.bt-app) .comparison-table td{text-align: center; color: var(--mid-text-color); font-weight: 500;}
:where(.bt-app) .comparison-table td:first-child{padding-left: 5%; text-align: left; color: var(--default-text-color); font-weight: normal;}
:where(.bt-app) .comparison-table th.highlighted{background-color: var(--highlight-bg-color); color: var(--theme-text-color);}
:where(.bt-app) .comparison-table td.highlighted{background-color: var(--highlight-bg-color);}
@media screen and (max-width: 1280px){
:where(.bt-app) .plan-table .col-item{width: 32%; margin-right: 2%;}
:where(.bt-app) .plan-table .title{font-size: 1.5em;}
:where(.bt-app) .plan-table .price{flex-wrap: wrap;}
:where(.bt-app) .plan-table .price-note{margin-left: 0px; margin-top: 10px;}
:where(.bt-app) .plan-table .amount{font-size: 2em;}
:where(.bt-app) .plan-table .plan-group-switch{top: 24px;}
:where(.bt-app) .plan-table .plan-group-switch li{padding: 0.5em 0.9em;}
:where(.bt-app) .plan-table .spec{font-size: 1.05em;}
:where(.bt-app) .plan-table .features li{font-size: 1.05em;}
:where(.bt-app) .plan-table .buy .buttons button,
:where(.bt-app) .plan-table .buy .buttons a{font-size: 1em; padding: 0px 0.6em; height: 36px; line-height: 34px;}
:where(.bt-app) #comparison-table-wrapper{margin: 50px auto 0px;}
:where(.bt-app) .comparison-table th{font-size: 1.2em;}
:where(.bt-app) .comparison-table td{font-size: 1.05em;}
}
@media screen and (max-width: 920px){
:where(.bt-app) .plan-table .buy .buttons{flex-direction: column; bottom: 20px;}
:where(.bt-app) .plan-table .buy .buttons button,
:where(.bt-app) .plan-table .buy .buttons a{width: 100%;}
}
@media screen and (max-width: 768px){
:where(.bt-app) .plan-table .col-item{width: 100% !important; margin: 10px 0px !important;}
:where(.bt-app) .plan-table .header{padding: 20px 6% 0px;}
:where(.bt-app) .plan-table .body{padding: 15px 6% 90px;}
:where(.bt-app) .plan-table .features li{padding: 0.6em 0.4em 0.6em 0px; font-size: 1em;}
:where(.bt-app) .plan-table .plan-group-switch{top: 18px; right: 6%;}
:where(.bt-app) .plan-table .buy .buttons{flex-direction: row; bottom: 30px; width: 88%;}
:where(.bt-app) .plan-table .buy .buttons button,
:where(.bt-app) .plan-table .buy .buttons a{width: auto;}
:where(.bt-app) #comparison-table-nav{display: flex; justify-content: space-between; margin: 40px 0px 25px;}
:where(.bt-app) #comparison-table-nav li{margin: 0px 5%; font-size: 1.2em; font-weight: 500; color: rgb(68, 68, 68); cursor: pointer;}
:where(.bt-app) #comparison-table-nav li.mobile-active{color: var(--theme-text-color);}
:where(.bt-app) #comparison-table-wrapper{margin-top: 0px;}
:where(.bt-app) .comparison-table th{width: 50% !important; font-size: 1.1em;}
:where(.bt-app) .comparison-table td{width: 50% !important; font-size: 1em;}
}
@media screen and (max-width: 640px){
:where(.bt-app) .plan-table .title{font-size: 1.33em;}
:where(.bt-app) .plan-table .amount{font-size: 1.8em;}
:where(.bt-app) .plan-table .plan-group-switch{top: 16px;}
:where(.bt-app) #comparison-table-nav{margin: 20px 0px;}
:where(.bt-app) #comparison-table-nav li{font-size: 1.1em;}
:where(.bt-app) #comparison-table-wrapper{border-left-width: medium; border-left-style: none; border-left-color: currentcolor; border-right-width: medium; border-right-style: none; border-right-color: currentcolor; background: none; border-radius: 0px; box-shadow: none;}
:where(.bt-app) .comparison-table th{display: none !important;}
:where(.bt-app) .comparison-table th,
:where(.bt-app) .comparison-table td{padding: 1.15em 0px;}
}


/* ===== 以下是抽取之後手動補的 ===== */
/* 115.09.15 Sara：手機（375）有橫向捲動，正式站沒有。
   真因不是樣式抄錯，是**方案數量不同**：正式站公開頁只有標準版／專業版兩個分頁，
   Sara 存檔時是登入狀態，比較表分頁有五個。正式站那條 `#comparison-table-nav li{margin:0 5%}`
   是為兩個項目寫的，五個項目時光是左右邊距就吃掉 10 個 5%＝半個容器寬，整列撐到 460px。
   ⇒ 只在 ≤1024 改成「可換行、邊距改成固定小值」：項目少時與正式站完全一樣（兩個項目仍平均分佈），
     項目多時自動折行，不會再有橫向捲動。
   ⚠️ 不用 overflow-x:auto：那會把後面的方案藏起來，使用者不知道還有別的可以比。 */
@media screen and (max-width:1024px){
  :where(.bt-app) #comparison-table-nav{ flex-wrap:wrap; justify-content:center; row-gap:10px; }
  :where(.bt-app) #comparison-table-nav li{ margin:0; padding:0 14px; }
}

/* 正式站的 header 在文件流裡（桌機 100px、≤1024 為 80px），外殼的 header 是 fixed，內容區要自己讓出這段 */
.bt-app:not(.bt-app-layer){padding-top:100px;}
@media (max-width:1024px){.bt-app:not(.bt-app-layer){padding-top:80px;}}

/* ═══════════════════════════════════════════════════════════════════════════
   115.09.16 Sara 二修：「訂閱那三塊希望像首頁的毛玻璃霧霧卡片」「文字都偏小」
   「切換鈕太小」「標題不要跟按鈕打架」「比較區太 AI 味，用我原本的調性與文字大小」
   「FAQ 也用原本的比例」

   一修參考的是 ArkiTeki 會員方案頁的玻璃（半透明白 .55、紫框），太透、偏冷。
   二修改抄**首頁 .feat-card／.tg-card 那一套**（home/iterations/115.09.02_home2-1g-neutral.html）：
     155° 漸層 rgba(255,255,255,.94) → #F2F2F5 ＋ blur(10px) ＋ 白細邊 ＋ 深色柔影。
   差別在「霧」不在「透」——.94 幾乎不透光，質感來自那道斜向明暗與白邊，不是靠看穿背景。

   ⚠️ 玻璃仍然要有東西可以模糊，所以底下留一層光暈；濃度照首頁 #features::before／::after
      抄過來（紫 .055、墨 .035），而且**不飄動**——一修那組會飄的暈影在這種安靜的
      商品頁上太搶戲。
   ⚠️ 模糊寫在 ::before 不寫在本體：本體帶 backdrop-filter 會把整個子樹推進合成層，
      中文次像素抗鋸齒降級成灰階，整片字看起來是糊的（115.09.15 header 下拉踩過同一個坑）。
      ::before 用 z-index:-1，所以本體一定要 isolation:isolate，否則它會掉到背景後面。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- 內容區基準字級 14px → 16px ---------- */
/* 正式站存檔下來的 .bt-app 是 14px，整個內容區（卡片標題 1.8em、條列 1.05em、
   FAQ 題目 1.2em…）全部是這個基準的倍數，所以 Sara 覺得「文字都偏小」的根源在這一個數字。
   改 16px＝外殼既有的 .btn-lg／內文字級，跟 header、footer、其他 BIMTeki 頁面同一個尺度；
   所有 em 值原樣不動，等比放大 14%，版面比例完全保留。 */
.bt-app{ font-size:16px; }

/* ---------- 背景光暈：給玻璃一點可以模糊的東西 ---------- */
/* 照抄首頁 #features 的兩顆（紫 .055、墨 .035）。濃度刻意壓到幾乎看不見——
   它不是裝飾，沒有它的話半透明卡疊在純白上跟實心白卡完全一樣。 */
.bt-glass-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.bt-blob{ position:absolute; border-radius:50%; }
.bt-blob-a{ top:-6%; right:-4%; width:min(46vw,620px); aspect-ratio:1; filter:blur(72px);
  background:radial-gradient(circle, rgba(120,114,224,.055), rgba(120,114,224,0) 70%); }
.bt-blob-b{ top:34%; left:-6%; width:min(44vw,560px); aspect-ratio:1; filter:blur(70px);
  background:radial-gradient(circle, rgba(120,114,224,.05), rgba(120,114,224,0) 70%); }
.bt-blob-c{ bottom:-8%; right:8%; width:min(38vw,480px); aspect-ratio:1; filter:blur(76px);
  background:radial-gradient(circle, rgba(34,34,34,.035), rgba(34,34,34,0) 72%); }
.bt-blob-d{ bottom:18%; left:22%; width:min(34vw,420px); aspect-ratio:1; filter:blur(76px);
  background:radial-gradient(circle, rgba(34,34,34,.028), rgba(34,34,34,0) 72%); }

/* ---------- 方案卡片：首頁 .feat-card 同款霧玻璃 ---------- */
/* 正式站原本是實心白＋#C8C8C8 灰框（用 :where() 寫的，零特異性，這裡一條就蓋掉） */
.bt-app .plan-table .plan-box{
  position:relative; isolation:isolate;
  background-color:transparent;
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  box-shadow:0 2px 6px rgba(33,29,58,.05), 0 20px 48px rgba(33,29,58,.10);
  transition:box-shadow .3s ease;
}
.bt-app .plan-table .plan-box::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(155deg, rgba(255,255,255,.94) 0%, #F2F2F5 100%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.bt-app .plan-table .plan-box:hover{ box-shadow:0 4px 10px rgba(33,29,58,.06), 0 26px 56px rgba(33,29,58,.13); }
/* 免費試用卡的 .is-preview 在正式站是 opacity:.6（登入狀態下「目前方案」灰掉）。
   這頁三張卡是並列的商品，第一張不該比別人淡——而且 opacity<1 會讓它變成 backdrop root，
   玻璃直接失效。 */
.bt-app .plan-table .plan-box.is-preview{ opacity:1; }
.bt-app .plan-table hr{ border-bottom:1px solid rgba(33,29,58,.10); }
.bt-app .plan-table .plan-box:hover hr{ border-bottom:1px solid rgba(33,29,58,.10); }

/* ---------- 固定／浮動許可切換：移到卡片上方，不再壓著標題 ---------- */
/* Sara 二修：「切換鈕文字太小」「BIMTeki Studio 浮動許可 不要跟按鈕打架」。
   一修用「鈕縮小＋標題右邊留白」硬擠，兩個問題其實是同一個：
   鈕是 position:absolute 蓋在標題那一行上，標題再怎麼讓都是在跟它搶同一條線。
   二修把鈕拿出那一行——改成文件流，排在卡片**上方**、靠右，像一組分頁標籤。
   標題因此拿回整個卡寬，鈕也可以做回原本的大小（甚至更大）。
   ⚠️ .col-item 要 flex column，鈕用 order:-1 排到卡片前面（DOM 上它在卡片後面，
      而且不能搬——四張 plan-box 只顯示一張，鈕搬進任何一張都會跟著被藏起來）。
   ⚠️ 鈕要 position:relative 不能 static：裡面的白色滑塊是 absolute，
      static 的話滑塊會改以 .col-item 為定位基準，直接飛到卡片左上角。 */
.bt-app .plan-table .col-item{ display:flex; flex-direction:column; }
/* min-height:100% 一定要歸零：那是正式站讓卡片撐滿整欄的寫法，
   但欄位裡現在多了 60px 的切換鈕，「100% 欄高 + 60px」會整整溢出欄外 60px
   （症狀是卡片底部穿出去壓到下一區，實測 59.3px）。改由 flex:1 撐滿剩下的高度。 */
.bt-app .plan-table .plan-box{ flex:1 1 auto; min-height:0; }
.bt-app .plan-table .plan-group-switch{
  height:46px; box-sizing:border-box;
  position:relative; order:-1; align-self:flex-end; margin:0 0 14px; top:auto; right:auto;
  isolation:isolate; background-color:transparent;
  border:1px solid rgba(255,255,255,.9); border-radius:50px;
  box-shadow:0 2px 6px rgba(33,29,58,.05), 0 10px 24px rgba(33,29,58,.08);
}
.bt-app .plan-table .plan-group-switch::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(155deg, rgba(255,255,255,.94) 0%, #F2F2F5 100%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
/* 字級回到基準 16px（一修縮到 .9em＝14.4px，Sara 說太小）。
   高度用 line-height 寫死 44px 而不是上下 padding：下面那顆佔位磚要拿同一個數字，
   靠 em 推算的話字型一換就對不齊。 */
.bt-app .plan-table .plan-group-switch li{ padding:0 1.4em; line-height:44px; font-size:1em; }
.bt-app .plan-table .plan-group-switch .switch-button{
  background-color:#FFFFFF; border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 3px rgba(33,29,58,.10);
}
/* 免費試用卡沒有切換鈕，補一塊等高的空佔位，三張卡的標題才會切齊同一條水平線
   （44px 鈕高 + 2px 框 = 46px，margin 與鈕相同） */
.bt-app .plan-table .col-item:not(:has(> .plan-group-switch))::before{
  content:''; display:block; flex:none; height:46px; margin-bottom:14px;
}
/* 中文預設每個字都能斷，會斷出「Studio 固定許／可」這種孤字行；
   keep-all 之後只在空白與連字號斷，變成「BIMTeki Studio／固定許可」。 */
.bt-app .plan-table .title{ word-break:keep-all; text-wrap:pretty;
  /* 115.09.15 Sara：「行高太窄，看起來擠在一起」。原本 line-height 等於字級（28.8/28.8＝1.0），
     兩行標題會黏成一塊。1.45 是這一版字級（1.8em）下中文標題讀起來最鬆得剛好的值；
     ArkiTeki 會員方案頁的 .card-title 也是這個量級。 */
  line-height:1.45; margin-bottom:2px; }

/* 方案套數下拉：跟著卡片換成霧面，但**不加 backdrop-filter**——
   它在 .plan-box（玻璃卡）裡面，祖先已經是 backdrop root，子層再模糊只會糊到卡片內部。 */
.bt-app .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single{
  background-color:rgba(255,255,255,.72); border:1px solid rgba(33,29,58,.12); border-radius:8px;
}

/* ---------- 方案價格比較（115.09.16 換掉原本的功能對照表）---------- */
/* Sara 二修：「太 AI 味道，請用我原本的調性、文字大小」。
   一修自己另開了一套小字系統（欄頭 1.05em、說明 .9em）、置中大標＋副標、彩色圓點圖例、
   膠囊標籤、橘底徽章——那幾樣就是 AI 味的來源。
   二修全部退回這頁既有的元件語彙：
     ‧ 區塊標題＝FAQ 那顆 h3（1.6em / 500 / 品牌紫 / 靠左）
     ‧ 表格＝正式站 .comparison-table 的既有尺寸（欄頭 1.2em、儲存格 1.2em、首欄靠左 5%）
     ‧ 價格＝卡片 .amount 的語彙（品牌紫），不另造顏色
     ‧ 群組標籤與折扣幅度＝純文字灰字，不做膠囊、不做色塊徽章
   剩下的只有「淺紫群組列」一項是新的，用的也是站上既有的 --softer-bg-color。 */
.price-compare-section{ margin-top:70px; }
.price-compare-section > h3{ margin:0 0 30px; font-weight:500; font-size:1.6em; letter-spacing:.06em; color:var(--theme-title-color); }

/* 表格外框：跟卡片同一片霧玻璃。正式站是實心白＋灰框（:where()，零特異性） */
.bt-app #comparison-table-wrapper{
  position:relative; isolation:isolate;
  margin:0 auto; overflow:hidden;
  background-color:transparent;
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  box-shadow:0 2px 6px rgba(33,29,58,.05), 0 20px 48px rgba(33,29,58,.10);
}
.bt-app #comparison-table-wrapper::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(155deg, rgba(255,255,255,.94) 0%, #F2F2F5 100%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}

.bt-app .comparison-table.price-compare{ table-layout:fixed; width:100%; }
.bt-app .price-compare th,
.bt-app .price-compare td{ border-bottom:1px solid rgba(33,29,58,.10); }
.bt-app .price-compare tr:last-child td{ border-bottom:none; }
/* 欄頭沿用正式站 .comparison-table th 的 1.2em / 500 / 1.8em 上下內距 */
/* 115.09.19 二修：三欄——方案 50%、折扣價／折扣金額各 25% */
.bt-app .price-compare .header-row th{ width:25%; }
.bt-app .price-compare .header-row th.pc-col-name{ width:50%; text-align:left; padding-left:5%; }
/* 群組列：站上既有的最淺紫 --softer-bg-color（#F2F1FF），不自己調色 */
.bt-app .price-compare tr.pc-group td{ padding:1em 0 1em 5%; background:var(--softer-bg-color); text-align:left; }
.bt-app .price-compare tr.pc-group:hover td{ background:var(--softer-bg-color); }
.bt-app .price-compare tr:not(.header-row):not(.pc-group):hover{ background-color:rgba(242,241,255,.55); }
.pc-group-name{ font-size:1.2em; font-weight:500; letter-spacing:.08em; color:var(--default-title-color); }
.pc-group-note{ margin-left:12px; font-size:1em; letter-spacing:.06em; color:var(--color-black-100); }

.bt-app .price-compare td{ padding:1.4em 0; vertical-align:middle; }
.bt-app .price-compare td.pc-name{ padding-left:5%; padding-right:3%; text-align:left; }
.pc-title{ display:block; font-size:1.2em; font-weight:500; letter-spacing:.08em; color:var(--default-title-color); }
.pc-note{ display:block; margin-top:8px; font-size:1em; line-height:1.6em; letter-spacing:.06em; color:var(--color-black-100); font-weight:400; }
/* 原價用 black-100 #666 不用 black-50 #C8C8C8：DESIGN-bimteki §七.3「#C8C8C8 與更淺灰禁做文字色」。
   已經有刪除線做語意，不需要再靠淺到看不清來表示「這個價格作廢」 */
.pc-was{ display:block; margin-bottom:2px; font-size:1em; letter-spacing:.04em; color:var(--color-black-100); text-decoration:line-through; }
/* 價格＝卡片 .amount 的語彙：品牌紫、字重 normal、Lato 走數字 */
.pc-now{ font-family:'Lato','Noto Sans TC',sans-serif; font-size:1.7em; letter-spacing:.06em; color:var(--theme-text-color); white-space:nowrap; }
.pc-unit{ font-family:'Noto Sans TC',sans-serif; font-size:.55em; letter-spacing:.06em; color:var(--color-black-100); margin-left:.4em; }
.pc-per{ display:block; margin-top:6px; font-size:1em; letter-spacing:.06em; color:var(--color-black-100); }
.pc-save{ display:block; margin-top:6px; font-size:1em; letter-spacing:.06em; color:var(--color-black-100); }

.pc-foot{ margin:24px 0 0; padding-left:1.4em; list-style:disc; }
.pc-foot li{ margin-top:10px; font-size:1rem; line-height:1.7em; letter-spacing:.06em; color:var(--color-black-100); }
.pc-foot li strong{ font-weight:500; color:var(--default-title-color); }

/* ---------- 響應式 ---------- */
@media screen and (max-width:1280px){
  .bt-app .plan-table .plan-group-switch li{ padding:0 1.15em; line-height:40px; }
  .bt-app .plan-table .col-item:not(:has(> .plan-group-switch))::before{ height:42px; }
  /* 欄距與列距在 769–1280 之間是錯的（正式站存檔就有，只是原本看不太出來）：
     通用的 .column-3 規則是為「一列兩欄、會換到第二列」寫的，所以給第 3 欄加了
     margin-top:2%（第二列的列距）並把第 2 欄的 margin-right 歸零（那是該列的最後一欄）。
     但 .plan-table 自己又把欄寬蓋成 32%，三欄其實還是排在同一列——
     於是第三張卡整個往下掉 17px，而且第 2、3 張卡中間沒有間隙、直接黏在一起。
     切換鈕移到卡片上方之後這個歪斜變得很明顯（三顆鈕不在同一條線上），所以在這裡改正。 */
  .bt-app .plan-table.column-3 .col-item{ margin-top:0; margin-right:2%; }
  .bt-app .plan-table.column-3 .col-item:nth-child(3n){ margin-right:0; }
}
@media screen and (max-width:1024px){
  .price-compare-section{ margin-top:50px; }
}
@media screen and (max-width:768px){
  /* 一欄一張卡之後三張不再並排，沒有要對齊的水平線了，佔位磚拿掉免得第一張卡上面多一塊空白 */
  .bt-app .plan-table .col-item:not(:has(> .plan-group-switch))::before{ display:none; }
}
/* ≤640 正式站會把 th 整排 display:none 再讓 td 各佔 50%（那是「一次只看一個方案」的分頁表），
   這張表只有三欄、而且欄頭「固定許可／浮動許可」不能藏。改成堆疊卡片：
   一列變一張小卡，兩個價格各自帶著自己的欄名（data-col 用 ::before 印出來）。 */
@media screen and (max-width:640px){
  .bt-app .comparison-table.price-compare,
  .bt-app .price-compare tbody,
  .bt-app .price-compare tr,
  .bt-app .price-compare td{ display:block; width:auto !important; }
  .bt-app .price-compare .header-row{ display:none; }
  .bt-app .price-compare tr.pc-group td{ padding:.9em 20px; }
  .bt-app .price-compare td{ padding:14px 20px; border-bottom:none; text-align:left; }
  .bt-app .price-compare td.pc-name{ padding:18px 20px 8px; }
  .bt-app .price-compare tr:not(.header-row):not(.pc-group){ border-bottom:1px solid rgba(33,29,58,.10); }
  .bt-app .price-compare tr:last-child{ border-bottom:none; }
  /* 欄名放左、該欄的原價／現價／年均／省 % 疊在右邊。
     用 grid 不用 flex：::before 佔第 1 欄第 1 列，子元素全部指到第 2 欄，
     自動往下排成一疊，四項資訊一項都不用砍。 */
  .bt-app .price-compare td[data-col]{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:baseline; padding-top:8px; padding-bottom:8px; }
  .bt-app .price-compare td[data-col]::before{ content:attr(data-col); grid-column:1; font-size:1em; letter-spacing:.06em; color:var(--color-black-100); }
  .bt-app .price-compare td[data-col] > *{ grid-column:2; text-align:right; }
  .pc-group-note{ display:block; margin:6px 0 0; }
}
@media screen and (max-width:480px){
  .bt-app .plan-table .plan-box{ border-radius:18px; }
  .bt-app #comparison-table-wrapper{ border-radius:18px; }
}
/* 115.09.15 三修 Sara：「價格的粗細希望像 ArkiTeki 會員方案頁」。
   量過那一頁：價格 .plan-price-num 是 Lato **700**、34px，貨幣符號也是 700（只有比數字小一階）。
   ⇒ 這裡把 .pc-now 從 normal 改 700。字級不動——那一頁是 34px 固定值，這裡用 em 跟著卡片縮放，
     兩邊的版面尺度不同，硬套 34px 在窄卡上會換行。
   ⚠️ 原價 .pc-was 維持 400：ArkiTeki 那頁的 .plan-price-orig 也是 400，
      粗體的刪除線價格會跟現價搶。 */
:where(.bt-app) .pc-now{ font-weight:700; }

/* 115.09.15 四修 Sara（附 ArkiTeki 會員方案頁的月繳／年繳截圖）：切換鈕照那一顆做。
   量過那一顆的規格：容器＝半透明白 .55＋blur(10)＋1px 淺灰框＋大圓角＋柔和外陰影；
   選中的那格＝**實心填色膠囊＋白字**；未選中＝灰字。
   ⇒ 這裡把滑塊（.switch-button）從白底換成品牌紫、選中的文字轉白，容器改成同一種玻璃。
   ⚠️ 滑塊寬度由頁面既有的 JS 依文字寬度算（refreshThumbs），這裡只換顏色，不碰尺寸。
   ⚠️ 未選中的字用 #888：ArkiTeki 那顆是 #4E6B6C（深綠灰），對應到這套灰階就是輔助文字色。 */
:where(.bt-app) .plan-table .plan-group-switch{
  background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid #E4E4E4; box-shadow:0 1px 2px rgba(33,29,58,.04), 4px 6px 14px rgba(33,29,58,.06);
}
/* ⚠️ 選擇器要用 .bt-app 不用 :where(.bt-app)：Sara 這一版的規則寫的是 .bt-app .plan-table …（四個 class），
     :where() 權重是 0，我的覆寫少一個 class 就輸了——實測滑塊仍是白底、白字直接消失。 */
/* ═══ 115.09.15 十修 Sara：「按鈕很醜，希望簡單優雅」═══
   兩個問題：
     ① 滑塊沒對齊——容器有內距，但滑塊的 left 只吃 li.offsetLeft（相對 ul），少算了 ul 的偏移，
        所以整顆往左凸出容器的圓角外（見 Sara 截圖）。JS 那邊補上 ul.offsetLeft。
     ② 實心紫太重——紫是全站「要按下去」的顏色，這裡只是切換檢視，不是行動。
   ⇒ 改成分段控制的標準做法：淺灰槽＋白色滑塊＋深色字（iOS segmented control 那一套）。
     選中靠「浮起來的白」表示，不靠色塊搶眼；未選中是灰字。整顆安靜很多，也不再與訂閱鈕爭。 */
.bt-app .plan-table .plan-group-switch{ padding:3px; background:#F1F1F5; border:1px solid #E6E6EC; box-shadow:none; }
.bt-app .plan-table .plan-group-switch .switch-button{
  top:3px; height:calc(100% - 6px); background-color:#FFFFFF; border:1px solid #E6E6EC;
  box-shadow:0 1px 2px rgba(33,29,58,.10); }
/* 115.09.15 Sara：「文字要在置中位置」——原本 li 只有上下 padding，字沿著基線排，
   在 46px 高的槽裡會偏下（Sara 截圖）。改成每一格自己是 flex 並置中，字就永遠在正中間。
   ⚠️ 連 ul 也要 stretch：li 要撐滿槽的高度，置中才有意義。 */
.bt-app .plan-table .plan-group-switch ul{ align-items:stretch; }
.bt-app .plan-table .plan-group-switch li{ display:flex; align-items:center; justify-content:center;
  color:#888888; font-size:.97em; padding:0.4em 0.6em; line-height:1.2; }
.bt-app .plan-table .plan-group-switch li.active{ color:#222222; font-weight:500; }
/* ═══ 115.09.15 Sara：「固定許可／浮動許可 放進卡片內，在外面有一點怪」═══
   原本它是 .col-item 的子層、浮在卡片上方，看起來像沒有歸屬的浮件。
   ⇒ 由 JS 搬進「目前顯示的那張卡」的標題下方（見下方 placeSwitch），並改成滿版的分段控制項：
     兩格等寬、貼齊卡片內距，讀起來就是這張卡的選項，不是頁面上的獨立元件。
   ⚠️ 滑塊寬度由 updateThumb 依 li 的實際寬度算，滿版之後照樣正確，不必另外處理。 */
.bt-app .plan-box .plan-group-switch{ position:static; display:block; width:100%; margin:14px 0 4px; }
/* ⚠️ 保險：JS 還沒把它搬進卡片時（例如交付包還沒重出、或 JS 出錯），
   舊的絕對定位會讓它壓在標題上。在 .col-item 底下時一律改成一般流排版，
   最差的情況是「浮在卡片上方」——那是可讀的，壓在標題上不是。 */
.bt-app .plan-table .col-item > .plan-group-switch{ position:static; margin:0 auto 12px; width:fit-content; }
.bt-app .plan-box .plan-group-switch ul{ width:100%; }
.bt-app .plan-box .plan-group-switch li{ flex:1 1 0; text-align:center; padding:0.62em 0.6em; }

/* ═══ 115.09.15 二修：購買方案頁的卡片玻璃與底色，與下載／我的應用程式／聯絡我們三頁同一套 ═══
   ⚠️ **價格數字的紫保留**：Sara 這一版刻意把價格定成品牌紫（見上面 .pc-now 的註解），
      而且價格正是這一頁「要看過去的點」，符合全站「紫只留在要按或要看的點」那條規則。
      所以這裡只動底色、卡片材質與陰影，不動文字顏色。 */
/* ═══ 115.09.15 五修 Sara：背景一起拿掉（與聯絡我們／下載／我的應用程式同步）═══
   底色沒了，卡片的毛玻璃就沒有東西可透（背後是純白，模糊出來還是白），所以卡片一起改回實體卡。
   ⚠️ 切換鈕的容器仍保留半透明白＋模糊：那一顆是照 ArkiTeki 會員方案頁的月繳／年繳做的，
      它的玻璃是疊在**卡片與底色的交界**上，不是疊在純白上，拿掉會變成一塊實心灰。 */
:where(.bt-app) .plan-box,
:where(.bt-app) .price-compare-wrapper{
  background:linear-gradient(155deg, #FFFFFF 0%, #FCFCFD 100%) !important;
  border:1px solid #E8E8EC !important;
  box-shadow:0 1px 2px rgba(33,29,58,.04), 0 10px 24px rgba(33,29,58,.06) !important;
}
/* 正式站的陰影帶紫，在這個版面上會透出一層紫霧 */
:where(.bt-app) .box-shadow-md{ box-shadow:0 4px 10px rgba(33,29,58,.10); }
:where(.bt-app) .box-shadow-soft{ box-shadow:3px 3px 10px rgba(33,29,58,.12); }
:where(.bt-app) .box-shadow-lg{ box-shadow:0 10px 30px rgba(33,29,58,.12); }

/* ═══ 115.09.15 Sara：比較表照 ArkiTeki 會員方案頁「精美一點」═══
   逐項比對兩張表之後，差在四件事（不是顏色，是結構）：
     ① ArkiTeki 有**直向分隔線**，每一欄都被框出來，橫著讀不會串行；我們原本只有橫線。
     ② 整張表包在一張圓角卡裡（1px 細框＋輕陰影＋裁切圓角），不是裸表格。
     ③ 欄高與字級更緊緻：他的 td 是 13px 上下內距、14–15px 字；我們原本 1.2em 內距、16px 字，鬆散。
     ④ 表頭與群組列的層級更清楚：表頭字大一階、群組列整列淺底。
   ⚠️ 直向線只加在「非第一欄」：第一欄是項目名稱，左邊再來一條線會把表格框死。
   ⚠️ 線色用 rgba(33,29,58,.08) 不用實色灰：疊在群組列的淺底上才不會變成深一階的格線。
   ⚠️ 橫向捲動時捲軸也要修飾（ArkiTeki 有做）：窄螢幕下這張表一定要橫捲，預設捲軸很醜。 */
#comparison-table-wrapper{
  border:1px solid #E8E8EC !important; border-radius:15px !important; overflow:hidden auto !important;
  box-shadow:0 1px 2px rgba(33,29,58,.04), 0 10px 24px rgba(33,29,58,.06) !important;
}
.bt-app .comparison-table th:not(:first-child),
.bt-app .comparison-table td:not(:first-child){ border-left:1px solid rgba(33,29,58,.08); }
.bt-app .comparison-table th{ padding:1.5em 0.6em; font-size:1.12em; }
.bt-app .comparison-table td{ padding:1.05em 0.6em; font-size:1em; }
.bt-app .comparison-table td:first-child{ padding-left:4%; padding-right:2.5%; }
.bt-app .price-compare tr.pc-group td{ padding-top:.85em; padding-bottom:.85em; }
/* 群組列橫跨整張表，直向線在這一列反而把標題切開 */
.bt-app .price-compare tr.pc-group td:not(:first-child){ border-left:0; }
@media screen and (max-width:1024px){
  #comparison-table-wrapper{ overflow-x:auto !important; }
  #comparison-table-wrapper::-webkit-scrollbar{ height:8px; }
  #comparison-table-wrapper::-webkit-scrollbar-track{ background:transparent; margin:0 15px; }
  #comparison-table-wrapper::-webkit-scrollbar-thumb{ background:#D8D6EC; border-radius:4px; }
  #comparison-table-wrapper::-webkit-scrollbar-thumb:hover{ background:#B9B5E0; }
}

/* ═══ 115.09.15 Sara：比較表再往 ArkiTeki 方案頁靠 ═══
   把兩張表並排逐項比，剩下的差距是「顏色與字級的層級」，不是版型：
     ① 群組列：ArkiTeki 用**中性淺灰**，我們是淡紫。紫在這張表裡已經用在價格上，
        群組列再用紫，整張表就只剩一種顏色在講兩件事。群組列改灰，紫只留給價格。
     ② 價格字級：ArkiTeki 的表內價格只有 20px（卡片上才 34px），我們原本跟卡片一樣大，
        整張表被價格塞滿、看不出哪裡是重點。收到 1.28em。
     ③ 原價與省幾成：他用灰階小字，我們也改灰（原本跟著繼承較深的色）。
     ④ 表頭：欄名用深色粗體、欄寬固定，第一欄左對齊——與他的 .cmp-table thead 同一套。
   ⚠️ 進行中的檔期那一列給極淡的紫底：這是「現在買最划算」的資訊，
      ArkiTeki 用的是整欄外框，我們的表是「一列一個檔期」，所以對應到列。 */
.bt-app .price-compare tr.pc-group td{ background:#F2F2F5; }
.bt-app .price-compare tr.pc-group:hover td{ background:#F2F2F5; }
.bt-app .price-compare .pc-group-name{ color:#222222; font-weight:600; }
.bt-app .price-compare .pc-group-note{ color:#777777; }
.bt-app .price-compare .pc-now{ font-size:1.28em; letter-spacing:.02em; }
.bt-app .price-compare .pc-unit{ font-size:.62em; color:#777777; }
.bt-app .price-compare .pc-was{ color:#999999; font-size:.9em; }
.bt-app .price-compare .pc-save{ color:#777777; font-size:.9em; }
.bt-app .price-compare .header-row th{ color:#222222; font-weight:600; letter-spacing:.06em; }
.bt-app .price-compare .header-row th.pc-col-name{ color:#555555; font-weight:500; }
.bt-app .price-compare tr:not(.header-row):not(.pc-group):hover{ background-color:#FAFAFB; }
/* 進行中的檔期（超早鳥）：極淡紫底，讓人一眼看到現在適用哪一列 */
.bt-app .price-compare tr.is-now td{ background:#FAF9FF; }
.bt-app .price-compare tr.is-now .pc-title{ color:#4A44A8; }

/* ═══ 115.09.15 Sara：「價格文字要中性色」「希望有兩個矩形包覆住，像 ArkiTeki 價格比較區塊」═══
   ① 價格轉中性：這張表是「同一個方案的不同價格」，每一格都是紫的時候，紫就不再代表重點。
      數字改 #222，單位與附註維持灰階；紫只留在「進行中檔期」那一列的標題上。
   ② 兩欄各用一個矩形框起來（ArkiTeki 用外框把方案欄框住，讀的時候眼睛不會串欄）：
      固定許可、浮動許可各自從表頭一路框到最後一列。
   ⚠️ 矩形要連續，群組列就不能是 colspan=3——跨欄的那一格會把兩條直線切斷。
      所以群組列拆成「標題格＋兩個空白格」，底色照樣鋪滿整列，視覺不變但框線接得上。
   ⚠️ 圓角只給頭尾兩格（表頭上緣、最後一列下緣），中間各列不給，接起來才是一個完整的矩形。 */
/* 115.09.19：兩個數值欄（折扣價／折扣金額）合成**一個**矩形——
   固定與浮動已由右上角切換、不再並排，一次只看一種許可，兩欄合框讀起來才是「這種許可的價格」；
   欄與欄之間仍有 .comparison-table 的淡直線分格，眼睛不會串欄。 */
.bt-app .price-compare .header-row th:nth-child(2),
.bt-app .price-compare td:nth-child(2){ border-left:1px solid #E0E0E8; }
.bt-app .price-compare .header-row th:nth-child(3),
.bt-app .price-compare td:nth-child(3){ border-right:1px solid #E0E0E8; }
.bt-app .price-compare .header-row th:nth-child(2),
.bt-app .price-compare .header-row th:nth-child(3){ border-top:1px solid #E0E0E8; }
.bt-app .price-compare .header-row th:nth-child(2){ border-top-left-radius:12px; }
.bt-app .price-compare .header-row th:nth-child(3){ border-top-right-radius:12px; }
.bt-app .price-compare tbody tr:last-child td:nth-child(2),
.bt-app .price-compare tbody tr:last-child td:nth-child(3){ border-bottom:1px solid #E0E0E8; }
.bt-app .price-compare tbody tr:last-child td:nth-child(2){ border-bottom-left-radius:12px; }
.bt-app .price-compare tbody tr:last-child td:nth-child(3){ border-bottom-right-radius:12px; }
/* 群組列的兩個空白格：只留左右框線，底色與標題格同一階 */
.bt-app .price-compare tr.pc-group td{ background:#F2F2F5; }
/* 價格與文字一律中性 */
.bt-app .price-compare .pc-now{ color:#222222; }
.bt-app .price-compare .pc-unit,
.bt-app .price-compare .pc-was,
.bt-app .price-compare .pc-save,
.bt-app .price-compare .pc-per{ color:#777777; }
.bt-app .price-compare .pc-was{ color:#999999; }
/* 進行中的檔期：底色淡一階＋標題留紫，是這張表唯一的重點 */
.bt-app .price-compare tr.is-now td{ background:#FAF9FF; }
.bt-app .price-compare tr.is-now .pc-title{ color:#4A44A8; }

/* ═══ 115.09.15 Sara：「方案卡沒有優惠後的價格與原價，需要加入」「早鳥方案可以有獨立設計」═══
   ⚠️ 兩種卡的金額語意不同，所以呈現方式也不同——這不是版型不一致，是誠實：
     ‧ 標準方案的折扣走**結帳折扣碼**，卡片上的主價格必須是定價，否則與實際結帳金額對不上。
       折後價放在下面一行，連同折扣碼與到期日一起講清楚。
     ‧ 早鳥三年期本身就是 65 折的方案價，不需折扣碼，所以是「原價刪除線＋現價＋省 35%」。
   ⚠️ 原價用 #999 不用更淺：DESIGN-bimteki §七.3「#C8C8C8 與更淺的灰禁做文字色」，
      而且已經有刪除線表示作廢，不需要再靠淺到看不清來強調。 */
.bt-app .pb-promo{ display:block; margin-top:10px; padding-top:10px; border-top:1px dashed #E4E4E4; }
.bt-app .pb-promo-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.bt-app .pb-promo-tag{ padding:2px 8px; border-radius:5px; background:#F1F0FF; color:#4A44A8; font-size:.86em; font-weight:500; letter-spacing:.04em; }
.bt-app .pb-promo-row b{ font-family:'Lato','Noto Sans TC',sans-serif; font-size:1.18em; font-weight:700; color:#222222; letter-spacing:.02em; }
.bt-app .pb-promo-unit{ font-size:.86em; color:#777777; }
.bt-app .pb-promo-note{ display:block; margin-top:6px; font-size:.86em; line-height:1.7; color:#777777; }
.bt-app .pb-promo-note code{ padding:1px 6px; border-radius:4px; background:#F2F2F5; font-family:'Lato',ui-monospace,monospace; font-weight:700; letter-spacing:.06em; color:#333333; }
.bt-app .pb-was{ font-family:'Lato','Noto Sans TC',sans-serif; font-size:1.05em; color:#999999; text-decoration:line-through; letter-spacing:.02em; }
.bt-app .pb-save{ padding:2px 8px; border-radius:5px; background:#F1F0FF; color:#4A44A8; font-size:.86em; font-weight:500; }

/* 早鳥卡的獨立設計：一圈品牌紫細框＋右上角一枚標籤。
   ⚠️ 不做整卡換底色或加陰影：三張卡並排時，只要一張的「材質」不同就會看起來像另一個元件；
      框線與標籤是最小的差異，足以讓它跳出來，又不破壞三卡一致的節奏。
   ⚠️ 標籤放卡片內的右上角、不懸在外面：懸出去的徽章在手機上會被裁掉。 */
.bt-app .plan-box.is-earlybird{ position:relative; border-color:#C9C5F5 !important; box-shadow:0 1px 2px rgba(120,114,224,.10), 0 12px 28px rgba(120,114,224,.12) !important; }
/* 115.09.15 三修：標籤改成排在標題上方的一般流，不再用絕對定位。
   ⚠️ 原本釘在卡片右上角，窄螢幕改 position:static 時它會跑到**卡片最下面**——
      ::after 在文件流裡本來就是最後一個子元素（Sara 截圖抓到：標籤跑到訂閱鈕下面）。
   ⇒ 改用 .header::before：位置在標題之前，不管什麼寬度都在標題上方，
      也不必再讓標題 float 出一塊空位給它（那段一併移除）。 */
/* 115.09.15 四修：三張卡的標題要在同一行。
   早鳥卡多了一枚標籤，標題被往下推 38px，另外兩張的標題就比它高一截（Sara 截圖框出來的）。
   ⇒ 所有卡片都保留同高的位置，只有早鳥卡在那個位置放標籤，其餘兩張放一個看不見的佔位。
   ⚠️ 用佔位而不是把標籤改成絕對定位：絕對定位在窄螢幕會跑掉（三修剛修過那個問題）。 */
.bt-app .plan-table .plan-box .header::before{
  content:""; display:inline-block; height:26px; margin:0 0 12px; vertical-align:top;
}
.bt-app .plan-box.is-earlybird .header::before{
  content:"最划算・省 35%"; display:inline-block; margin:0 0 12px;
  height:26px; padding:0 12px; box-sizing:border-box; border-radius:999px; background:#7872E0; color:#fff;
  font-size:12px; font-weight:500; letter-spacing:.06em; line-height:26px;/* 115.09.15：高度鎖 26px，與其餘兩張卡的佔位同高，三張標題才會切齊（實測差 8px 就是這裡來的） */
}

/* 115.09.15：深紫粗框＋深紫欄名那一版 Sara 看過後退回（她偏好上一版的淺灰細框＋中性文字），
   整段移除即可回到上一版；要再試深色框時看 git 記錄。 */

/* 115.09.15 二修 Sara：「優惠價在上面顯示、原價在旁邊，使用者才搞得清楚」。
   ⇒ 主價格直接換成**折後價**，原價縮小、加刪除線放在它右邊；折扣幅度與期限收成一行小標籤。
   ⚠️ 先前是「主價格＝定價、折後價放下面」，理由是折扣碼在結帳才生效。
      Sara 判斷使用者看不懂，改成這一版；期限與折扣幅度仍留在旁邊，不會變成只看到低價。
   ⚠️ 原價用 #999＋刪除線，不用更淺的灰（設計規範禁止 #C8C8C8 以下當文字色）。 */
.bt-app .pb-was-inline{ margin-left:10px; font-family:'Lato','Noto Sans TC',sans-serif; font-size:1.05em; font-weight:400; color:#999999; text-decoration:line-through; letter-spacing:.02em; }
.bt-app .pb-promo{ margin-top:8px; padding-top:8px; }
.bt-app .pb-promo-row{ align-items:center; }
.bt-app .pb-promo .pb-promo-note{ margin-top:0; }

/* ═══ 115.09.15 三修 Sara：「文字靠左對齊」「希望像會員方案頁有兩層矩形」═══
   ① 左對齊：表頭「方案」、群組列標題、項目名稱原本各自有不同的左內距（4%／5%／4%），
      三種列的左緣差了十幾 px，直著看就是歪的（Sara 用一條直線標出來）。三者統一成 4%。
   ② 兩層：ArkiTeki 那張是「外層一張淺色卡，裡面再放一張白色的表卡」，
      兩層之間留 10px，邊界才有厚度，不是一張紙。
      ⚠️ 內卡要 overflow:hidden 才裁得出圓角；表格本身用 border-collapse，圓角切不乾淨，
         所以包一層 div 來裁（只加一層 div，不動表格結構）。 */
/* 115.09.19 七修 Sara（附圖）：「不要雙框，單框就好」。
   外層的淺灰卡與 10px 內距拿掉，只留內層那張白色表卡當唯一的框；
   .pc-inner 這層 div 保留——它負責 overflow:hidden 裁圓角，表格本身裁不乾淨。 */
#comparison-table-wrapper{ padding:0 !important; background:transparent !important; border:0 !important; border-radius:15px !important; box-shadow:none !important; }
.bt-app .pc-inner{ background:#FFFFFF; border:1px solid #E8E8EC; border-radius:15px; overflow:hidden;
  box-shadow:0 1px 2px rgba(33,29,58,.04), 0 10px 24px rgba(33,29,58,.06); }
.bt-app .comparison-table td:first-child,
.bt-app .price-compare tr.pc-group td:first-child,
.bt-app .price-compare .header-row th.pc-col-name{ padding-left:4% !important; }

/* 115.09.15 四修 Sara：「比較表的金額也要跟上面卡片一樣是紫色」。
   （二修時曾改成中性，這次依 Sara 指示改回；上下兩區的金額同色，讀起來才是同一件事。）
   ⚠️ 只有現價轉紫：原價維持灰刪除線、省幾成維持灰，否則一格裡三個數字全都在喊。 */
.bt-app .price-compare .pc-now{ color:#7872E0; }
.bt-app .price-compare .pc-was{ color:#999999; }
.bt-app .price-compare .pc-save,
.bt-app .price-compare .pc-per,
.bt-app .price-compare .pc-unit{ color:#777777; }

/* 115.09.15 Sara：「幾折的部分用矩形框上面放文字的方式設計」。
   原本「超早鳥優惠（8 折）」括號裡的折數跟標題混在一起，掃視時抓不到重點。
   拆成標題＋一枚小方框標籤，與方案卡上的「超早鳥 8 折」用同一組樣式（同一件事只有一種長相）。
   ⚠️ 標籤底色用 #F1F0FF 這種極淡紫：這一欄本來就有紫色的列標題，標籤再用實心紫會有兩個紫在搶。 */
.bt-app .price-compare .pc-badge{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:5px;
  background:#F1F0FF; color:#4A44A8; font-size:.8em; font-weight:500; letter-spacing:.04em; vertical-align:middle; }

/* 115.09.15 Sara：標籤與標題至少留 25px（截圖裡「BIMTeki Studio」直接穿過標籤底下）。
   標籤是絕對定位的，不佔位置，所以標題要自己讓開。
   ⚠️ 讓開的量＝標籤寬（12px 字、7 個全形字約 118px）＋25px 間距 ≒ 145px。
   ⚠️ 只讓開**第一行**：用 padding-right 會讓兩行標題都縮排，第二行「早鳥方案 - 浮動許可」
      右邊就無故少一塊。改用 float 的佔位塊（::before）把第一行推開，第二行照常滿寬。
   ⚠️ 窄螢幕（≤900）改成標籤排在標題上方的一般流：卡片變窄時 145px 會吃掉半行字。 
   （115.09.16：這段規則本體已在 09.15 移除，只留說明；原本殘留的孤兒大括號會讓
     解析器把**下一條規則**一起丟掉——Sara 要的橘色折數標籤因此從沒生效，已刪。） */

/* 115.09.15 Sara：折扣標籤改橘，比較明顯。
   卡片上的「超早鳥 8 折」與比較表裡的「8 折／9 折／65 折」是同一件事，用同一組橘。
   ⚠️ 底色用極淡橘 #FFF1EC、字用深橘 #C2410C（不是直接拿品牌橘 #FF7E5C 當字色——
      那個亮度在白底上只有 2.9:1，小字讀不到；深橘對淡橘底是 5.6:1，過 AA）。
   ⚠️ 只有標籤轉橘，金額仍是紫：橘是「這裡有優惠」的提示，紫是價格本身，兩件事不混色。
   ⚠️ 早鳥卡右上角那枚「最划算・省 35%」維持實心紫：它標的是方案層級，不是折扣幅度。 */
/* 115.09.16：比較表的折數標籤已移出這條規則，維持淡紫——今天起橘色＝「現在進行中」，
   折數標籤若也轉橘，兩個不同意思的東西會同色。卡片上的限時標籤照舊吃橘。 */
.bt-app .pb-promo-tag{ background:#FFF1EC; color:#C2410C; }
.bt-app .pb-save{ background:#FFF1EC; color:#C2410C; }

/* 115.09.15 Sara：「固定許可旁邊加一個驚嘆號，點了出現解釋文字，樣式參考 ArkiTeki 方案頁的 icon」。
   照 ArkiTeki .ark-tip 那一套：15px 線框圓形 icon、白底小浮層、1px 細框、8/12 內距、13px 字。
   ⚠️ hover **與** focus-within 都會開：滑鼠使用者用 hover，鍵盤與觸控使用者用點的（tabindex=0 讓它可聚焦）。
      只做 hover 的話手機點不開，只做 click 又要寫一套開關狀態，這是最省的做法。
   ⚠️ 浮層往**下**展開：表頭上方就是表格容器的邊界，往上會被裁掉一截（ArkiTeki 那顆也踩過同樣的問題）。
   ⚠️ 浮層寬度鎖 220px 並允許換行：欄寬只有 27%，不換行的浮層會超出表格、逼出橫向捲軸。
   ⚠️ font-weight 明確寫 400：th 是 600，不寫會繼承成粗體，跟內文的浮層長得不一樣。 */
.bt-app .pc-tip{ position:relative; display:inline-flex; align-items:center; margin-left:6px; color:#9A97C4; cursor:pointer; vertical-align:middle; }/* 115.09.15 Sara：滑上去不要出現問號游標（cursor:help 會變成箭頭加問號），改成一般的手指游標 */
.bt-app .pc-tip > svg{ display:block; width:15px; height:15px; }
.bt-app .pc-tip:hover, .bt-app .pc-tip:focus-visible{ color:#7872E0; outline:none; }
.bt-app .pc-tip .pc-tip-box{
  visibility:hidden; opacity:0; position:absolute; top:calc(100% + 8px); left:50%; translate:-50% 0;
  /* 115.09.15 Sara：文字短的時候右邊空一截。改成跟著文字長度縮，長文字才封頂換行。 */
  width:max-content; max-width:min(240px, calc(100vw - 72px)); padding:8px 12px; border:1px solid #E4E4E4; border-radius:6px; background:#fff;
  font-size:13px; font-weight:400; line-height:1.7; letter-spacing:.02em; color:#444444; text-align:left; white-space:normal;
  box-shadow:0 2px 4px rgba(33,29,58,.10), 0 10px 24px rgba(33,29,58,.10); z-index:20; pointer-events:none;
  transition:opacity .12s ease; }
.bt-app .pc-tip:hover .pc-tip-box, .bt-app .pc-tip:focus-within .pc-tip-box{ visibility:visible; opacity:1; }

/* 115.09.15 Sara：卡片再高一點點。
   ⚠️ 不用 min-height：三張卡內容長度不同，寫死高度時短的那張底部會留一塊空白、長的會被撐破。
      改成加大卡片下緣內距，每張都往下長一樣多，彼此的高度關係不變。 */
.bt-app .plan-table .body{ padding-bottom:132px; }

/* ═══ 115.09.19 Sara：「右上角新增一個切換按鈕，可以切換固定許可與浮動許可」═══
   原本（115.09.15）這顆分段鈕只在 ≤820 出現，用來在「固定欄／浮動欄」之間分頁；
   現在表格的數值欄改成「折扣價／折扣金額」，固定與浮動不再各佔一欄，
   所以這顆鈕升格成常駐控制項：任何寬度都顯示，放在區塊標題同一列、靠右。
   ⚠️ 只換 section 的 data-lic 與按鈕狀態，顯示哪一組數字交給 CSS（.pc-lic-fixed／.pc-lic-float）。
   ⚠️ 樣式仍沿用卡片上那顆分段控制的語彙（淺灰槽＋白滑塊），整頁只有一種「切換」的長相；
      字級由 14 → 15px、鈕加寬：它現在是桌機也看得到的主控制項，不再是手機版的小分頁。
   ⚠️ 說明浮層改掛在切換鈕右側（原本掛在表頭的固定／浮動兩格，那兩格已不存在），
      浮層靠右對齊而不是置中：它貼著區塊右緣，置中會有一半跑出視窗。 */
.price-compare-section .pc-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin:0 0 30px; }
.price-compare-section .pc-head > h3{ margin:0; }
.bt-app .pc-switch{ display:inline-flex; align-items:center; gap:2px; margin-left:auto; }
.bt-app .pc-tabs{ display:inline-flex; gap:4px; padding:3px; margin:0; background:#F1F1F5; border:1px solid #E6E6EC; border-radius:999px; }
.bt-app .pc-tabs button{ flex:1 1 0; padding:8px 22px; border:1px solid transparent; border-radius:999px; background:transparent; white-space:nowrap;
  font-family:inherit; font-size:15px; font-weight:500; letter-spacing:.04em; color:#888888; cursor:pointer; transition:background .2s ease, color .2s ease; }
.bt-app .pc-tabs button.active{ background:#FFFFFF; border-color:#E6E6EC; color:#222222; box-shadow:0 1px 2px rgba(33,29,58,.10); }
.bt-app .pc-tabs button:focus-visible{ outline:2px solid #7872E0; outline-offset:2px; }
.bt-app .pc-switch .pc-tip{ margin-left:8px; }
.bt-app .pc-switch .pc-tip .pc-tip-box{ left:auto; right:0; translate:0 0; max-width:min(300px, calc(100vw - 48px)); }

/* 固定／浮動兩組數字同放一格，由 <section> 的 data-lic 決定顯示哪一組
   （屬性掛在 section 而不是表格容器，表格上方的標準價格才能用同一套切換） */
.bt-app .price-compare-section .pc-lic{ display:none; }
.bt-app .price-compare-section[data-lic="fixed"] .pc-lic-fixed,
.bt-app .price-compare-section[data-lic="float"] .pc-lic-float{ display:block; }
/* 折扣金額：深色，與折扣價的紫各自一階，兩欄一眼分得開 */
.bt-app .price-compare .pc-save-amt{ display:block; font-family:'Lato','Noto Sans TC',sans-serif; font-size:1.28em; letter-spacing:.02em; color:#222222; white-space:nowrap; }
.bt-app .price-compare .pc-save-amt + .pc-save{ margin-top:6px; }

/* 115.09.19 二修 Sara：「把標準方案、標準價格兩列拿掉，原價整欄也拿掉；標準價格提到表格上方」。
   表格裡剩下的全是折扣，標準價格是它們共同的基準，放在表頭與表格之間一行：
   「標準價格 ⓘ NT$18,000 / 年」，數字沿用表內折扣價的語彙（Lato、品牌紫），
   字級比表內大一階（1.5em 對 1.28em）——它是基準，不是其中一列。
   ⚠️ 用 <p> 不用表格列：它不屬於任何群組，塞回表格就又變成一列。
   ⚠️ 與標題列的間距縮到 14px、與表格留 22px：讓它讀成標題的補充，而不是表格外另一個區塊。 */
.price-compare-section .pc-head{ margin-bottom:14px; }
.bt-app .pc-std{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin:0 0 22px; padding:0 0 0 4px; }
.bt-app .pc-std .pc-std-label{ display:inline-flex; align-items:center; font-size:1.05em; letter-spacing:.06em; color:#555555; }
/* 115.09.19 三修 Sara：「標準價格這邊幫我標註是固定許可還是浮動許可」。
   「標準價格」右邊掛一枚小標籤寫許可名稱，跟著右上角的切換一起換字（同一套 .pc-lic 機制）。
   樣式沿用表內「8 折／9 折」那枚淡紫標籤（.pc-badge 同一組色），整頁的小標籤只有一種長相。 */
.bt-app .pc-std .pc-std-lic{ display:inline-flex; margin-left:8px; }
.bt-app .pc-std .pc-std-lic .pc-lic{ padding:2px 8px; border-radius:5px; background:#F1F0FF; color:#4A44A8; font-size:.8em; font-weight:500; letter-spacing:.04em; line-height:1.6; }
/* 115.09.19 四修 Sara（附圖）：標準價格單位補「/ 每套」。 */
.bt-app .pc-std .pc-std-price{ font-family:'Lato','Noto Sans TC',sans-serif; font-size:1.5em; letter-spacing:.02em; color:#7872E0; white-space:nowrap; }
.bt-app .pc-std .pc-unit{ font-family:'Noto Sans TC',sans-serif; font-size:.55em; letter-spacing:.06em; color:#777777; margin-left:.4em; }

/* ≤640 的堆疊卡片模式（上面 640 斷點那一套）在三欄之後補三件事：
     ① 群組列的空白佔位格是 block，會各留一段 .9em 的空白——收掉；
     ② 兩個數值欄的矩形框線（左右框、圓角）在堆疊時變成每格一個框——拿掉；
     ③ 兩組數字裡顯示中的那組是 block，格子的 grid 要把它整個放到第 2 欄。 */
@media screen and (max-width:640px){
  .bt-app .price-compare tr.pc-group td.pc-group-pad{ display:none; }
  .bt-app .price-compare td[data-col]{ border-left:0 !important; border-right:0 !important; border-radius:0 !important; padding-left:20px; }
  .bt-app .price-compare tbody tr:last-child td[data-col]{ border-bottom:0 !important; }
  .bt-app .price-compare td[data-col] .pc-lic{ grid-column:2; }
  .bt-app .price-compare .pc-now,
  .bt-app .price-compare .pc-save-amt{ font-size:1.1em; }
  .bt-app .pc-std .pc-std-price{ font-size:1.3em; }
  .bt-app .pc-tabs button{ padding:7px 16px; font-size:14px; }
}

/* ═══ 115.09.15 Sara：浮動許可「先保留，給功達隱藏」═══
   初期若只賣固定許可，功達只要在 <body> 加一個 class 就能整組收掉，不必刪任何 markup：
       <body id="app-homepage" class="not-login custom-scrollbar hide-float">
   收掉的東西（三處，缺一就會露出破口）：
     ① 比較表右上角的「固定／浮動」切換鈕（115.09.19 起表格只顯示一種許可，鎖在固定即可）
     ② 方案卡上的固定／浮動切換鈕（只剩一種許可時，切換鈕沒有意義）
     ③ 表格下方註腳第一條裡浮動許可的說明（那句話會變成介紹一個看不到的東西）
   ⚠️ 改成賣兩種時把 class 拿掉即可，所有內容原封不動回來。
   ⚠️ 不用 display:none 直接寫死在規則裡：那樣要復原就得回來改 CSS，
      而這個決定（賣不賣浮動）未來一定會再變。 */
body.hide-float .bt-app .pc-switch,
body.hide-float .bt-app .plan-table .plan-group-switch,
body.hide-float .bt-app .pc-foot li.pc-foot-license{ display:none !important; }
body.hide-float .bt-app .price-compare-section .pc-lic-float{ display:none !important; }
body.hide-float .bt-app .price-compare-section .pc-lic-fixed{ display:block !important; }

/* 115.09.15 Sara：項目往內推一格。
   群組列（標準方案／早鳥折扣價／早鳥方案）與項目列（標準價格／超早鳥優惠…）原本切齊在同一條線上，
   兩層看起來是平的。ArkiTeki 那張表的做法是**項目比群組多縮一個字寬**，階層才讀得出來。
   ⚠️ 只縮項目那一欄的左內距，群組列不動——群組列是分隔帶，縮排會讓它看起來像子項目。
   ⚠️ 手機分頁模式也要跟著縮，否則在窄螢幕又變回平的。 */
.bt-app .price-compare td.pc-name{ padding-left:calc(4% + 1.1em) !important; }
@media screen and (max-width:820px){
  .bt-app .price-compare td.pc-name{ padding-left:calc(4% + 1em) !important; }
}

/* 115.09.15 二修 Sara（附 ArkiTeki 企業版卡片）：早鳥卡的框要更明顯。
   對照那張參考圖：他用的是**2px 的品牌深色實線**＋純白卡，沒有額外的淡色暈——
   邊框本身就是「這張是重點」的訊號，靠的是線的重量，不是加陰影。
   ⇒ 1px #C9C5F5（淡紫）→ 2px #5A54C4（品牌紫深一階）。
   ⚠️ 陰影同步收掉一點：框變重之後，原本那圈紫色暈會讓卡片看起來浮腫。
   ⚠️ 用深一階的 #5A54C4 不用 #7872E0：主要按鈕就是 #7872E0，
      卡框與按鈕同色時，整張卡會讀成一顆大按鈕。 */
.bt-app .plan-box.is-earlybird{
  border:2px solid #5A54C4 !important;
  box-shadow:0 1px 2px rgba(33,29,58,.05), 0 14px 30px rgba(33,29,58,.10) !important;
}

/* 115.09.15 Sara（附參考圖）：省 X% 改成**價格旁邊的小標籤**，不要自己佔一行。
   ⚠️ 參考圖用黃底／綠底分「省得多、省得少」，我們不跟：黃綠都不在 BIMTeki 的色票裡，
      而且同一張表已經有橘色的折數標籤，再多兩個色系會變成四種顏色在講三件事。
      改用同一支橘的**淡底**，與折數標籤同家族，只是字級再小一階。
   ⚠️ 三年期那一列維持換行：它上面還有「相當於 NT1,700 / 年」，
      三樣東西擠成一行會讀不出哪個是主價格。 */
.bt-app .price-compare .pc-save{
  display:inline-block; margin:0 0 0 8px; padding:2px 7px; border-radius:5px;
  background:#FFF1EC; color:#C2410C; font-size:.78em; line-height:1.7; letter-spacing:.02em; vertical-align:middle;
}
.bt-app .price-compare .pc-per + .pc-save{ display:inline-block; margin-left:0; margin-top:4px; }

/* ═══ 115.09.16 Sara：價格加粗與比較表排版整理 ═══════════════════════════
   Sara：「價格加粗」「排版有一點亂 幫我整理成好看專業樣子」「文字跟他一樣 比較清楚」 */

/* ── ① 方案卡價格加粗 ──
   ⚠️ 只加粗 .amount（$14,400 那一串），不動旁邊的原價與「/ 年」：
      三個一起變粗等於沒有主從，只會更吵。 */
.bt-app .plan-table .plan-box .price .amount{ font-weight:700; }

/* ── ② 比較表價格欄：統一成「原價／現價／省多少」由上而下三行 ──
   原本省 X% 掛在價格右邊同一行，每一格的重心都被拉偏，兩欄之間也對不齊；
   改成每格同一組垂直節奏後，四列掃下來數字全部落在同一條中軸線上。
   ⚠️ 省 X% 拿掉底色改純橘字：左欄已經有一枚橘色折數標籤，
      同一列兩塊橘色色塊會互搶，那才是「亂」的主因。 */
.bt-app .price-compare .pc-was{ display:block; margin:0 0 3px; font-size:.86em; letter-spacing:.02em; }
.bt-app .price-compare .pc-now{ display:block; line-height:1.3; }
.bt-app .price-compare .pc-unit{ font-weight:500; letter-spacing:.04em; }
.bt-app .price-compare .pc-per{ display:block; margin-top:5px; font-size:.92em; letter-spacing:.04em; }
.bt-app .price-compare .pc-save,
.bt-app .price-compare .pc-per + .pc-save{
  display:block; width:auto; margin:7px 0 0; padding:0; background:none;
  font-size:.86em; font-weight:500; line-height:1.4; letter-spacing:.04em; color:#C2410C;
}

/* ── ③ 群組副標改成標籤（Sara 附圖：「限時折扣碼」那顆淡紫小方框）──
   副標原本是接在深色標題後的灰字，會被讀成同一句話的下半段；
   包成標籤之後一眼看得出那是「這一組的條件」。
   ⚠️ 用淡紫不用橘：橘在這張表已指派給「折扣幅度」，群組條件是中性資訊。 */
.bt-app .price-compare .pc-group-note{
  display:inline-block; margin-left:10px; padding:3px 10px; border-radius:5px;
  background:#F1F0FF; color:#4A44A8; font-size:.8em; font-weight:500;
  line-height:1.7; letter-spacing:.04em; vertical-align:middle;
}

/* ── ④ 現行優惠那一列的標題改回中性色 ──
   底色已經標出「現在適用的是這一列」，標題再轉紫，同一欄就出現兩種標題顏色。 */
.bt-app .price-compare tr.is-now .pc-title{ color:#222222; }

/* ═══ 115.09.16 Sara：進行中的優惠改橘色底 ═══════════════════════════════
   Sara：「這塊底色可以用不同顏色顯示 例如橘色 這樣可以知道現在在早鳥優惠中」。
   原本進行中的那一列是淡紫底——跟價格、折數標籤同一個色系，等於沒有標。
   改成淡橘底＋左緣一道橘線＋標題後面一枚「進行中」標籤，三個訊號指同一件事。
   ⚠️ 底色只到 #FFF7F2 這種極淡：整列的主角是價格，底色一濃就把數字壓掉。
   ⚠️ 左緣用 inset box-shadow 不用 border-left：border 會把那一格往右推 3px，
      同一欄的文字就跟其他列對不齊。
   ⚠️ 換檔期（11/1 起改成早鳥 9 折）只要把 class="is-now" 搬到下一列即可，樣式不必動。 */
.bt-app .price-compare tr.is-now td{ background:#FFF7F2; }
/* 115.09.16 Sara：「有 AI 味道，換一個好看一點的方式，也可以看教學頁面怎麼做的」。
   原本是左緣一條 3px 橘色直條——那是這一頁沒有的裝置，只在這裡出現一次，所以顯得是硬加上去的。
   改抄教學頁 .note 的做法（tutorial.css：淡底 + 同色系 1px 細框 + 圓角，沒有任何色條）：
   整列淡橘底，上下各補一條 1px 淡橘線，整列就讀成一塊 note，而不是被插了一根旗子。
   ⚠️ 用 inset box-shadow 不用 border：border 會把那一列的高度多撐 2px，
      同一欄的文字就跟其他列錯開。 */
.bt-app .price-compare tr.is-now td{ box-shadow:inset 0 1px 0 #F7DCCD, inset 0 -1px 0 #F7DCCD; }
.bt-app .price-compare tr.is-now .pc-title::after{
  content:"進行中"; display:inline-block; margin-left:8px; padding:3px 9px; border-radius:5px;
  background:#FFF1EC; color:#C2410C; font-size:.8em; font-weight:500;
  line-height:1.6; letter-spacing:.04em; vertical-align:middle;
}


/* 115.09.16 微調：按鈕圓角與字重要真的跟切換鈕同一套。
   ⚠️ 圓角寫 50px：切換鈕是全圓角，按鈕若停在 6px，兩個元件放在同一張卡上會像兩套設計。
   ⚠️ 字重補 500：正式站的 button{font-weight:normal} 比前一條規則強，只好在這裡再指定一次。
   ⚠️ 「進行中」標籤的底色從 #FFF1EC 加深到 #FFE5D8：那一列的底已經是淡橘，
      標籤底若只差 6 個灰階就看不出是一枚標籤。 */
.bt-app .price-compare tr.is-now .pc-title::after{ background:#FFE5D8; }

/* ═══ 115.09.19 八修 Sara：「三年期方案也標進行中；進行中的方案不要上底色，hover 上去再上橘色底色」═══
   淡橘底與上下兩條淡橘線改成 hover 才出現：平常整張表只靠「進行中」標籤指出檔期，
   滑上去那一列才整塊亮成橘色。
   ⚠️ 標籤底色退回 #FFF1EC：09.16 加深到 #FFE5D8 是因為那一列本來就是淡橘底，
      現在平常是白底，淡一階的標籤就夠清楚，hover 變橘底時再加深回來。 */
.bt-app .price-compare tr.is-now td{ background:transparent; box-shadow:none; }
.bt-app .price-compare tr.is-now:hover td{ background:#FFF7F2; box-shadow:inset 0 1px 0 #F7DCCD, inset 0 -1px 0 #F7DCCD; }
.bt-app .price-compare tr.is-now .pc-title::after{ background:#FFF1EC; }
.bt-app .price-compare tr.is-now:hover .pc-title::after{ background:#FFE5D8; }

/* 115.09.16 Sara：按鈕維持正式站原本的樣式（紫外框／紫字）。
   今天試過把它改成與固定／浮動切換鈕同一套語彙（白底＋#E6E6EC 細框＋落影＋全圓角），
   Sara 看了回「按鈕原本的樣式是不是比較好看」——白底細框在卡片底部會讀成一塊面板而不是按鈕，
   已整組還原。⚠️ 不要再改回去。 */

/* 115.09.16 Sara：「折扣後價格在前面、原價在後面，省多少% 用圓角矩形」。
   跟方案卡上的寫法對齊（卡片就是「$14,400 $18,000 / 年」），
   同一個資訊在兩個地方用同一種排法，使用者不必重新理解一次。
   ⚠️ 原價改成貼在價格右邊的行內元素：它原本是 display:block 佔一整行，
      不解除就算換了順序也還是各佔一行。
   ⚠️ 省 X% 回到圓角矩形標籤，並維持自己一行：它跟價格是兩種資訊，
      擠在同一行時三個東西一起橫向排開，那一格又會失去中軸。 */
.bt-app .price-compare .pc-was{
  display:inline-block; margin:0 0 0 8px; font-size:.8em; letter-spacing:.02em; vertical-align:baseline;
}
.bt-app .price-compare .pc-now{ display:inline-block; }
.bt-app .price-compare .pc-save,
.bt-app .price-compare .pc-per + .pc-save{
  display:block; width:fit-content; margin:8px auto 0; padding:3px 9px; border-radius:6px;
  background:#FFF1EC; color:#C2410C; font-size:.8em; font-weight:500; line-height:1.6; letter-spacing:.04em;
}
/* .pc-now 改 inline-block：它原本是 block，原價就算搬到後面也會被擠到下一行去，
   跟省 X% 的標籤黏成一排（Sara 要的是原價緊跟在折扣價旁邊）。
   省 X% 則反過來要自己一行，用 width:fit-content + auto 左右外距維持置中。 */

/* 115.09.16 Sara：把 .pc-note 的說明改成標題旁的驚嘆號（三年期方案、標準價格兩列，少了 .pc-note 之後只剩一行標題）。
   ⚠️ 補一點下緣留白：其他列是「標題＋說明」兩行，這一列剩一行，
      不補的話那一格的高度會比隔壁矮一截，整欄的水平節奏就斷了。 */
/* 115.09.19 六修：三年期方案也加回日期列（標準價格列已刪），各列都是「標題＋日期」兩行，
   原本「一行標題的列補內距」那條規則已無對象，拿掉只留說明。 */

/* ═══ 115.09.16 Sara：卡片定位句與特色清單的打勾（參考 laravel.com/forge/pricing）═══
   ① 定位句：方案名下面一句「這個方案適合誰」。原本方案名直接接價格，
      三張卡的差別要使用者自己從特色清單推。
      ⚠️ min-height 固定兩行：句子長短不一，不鎖高度的話三張卡的價格會落在不同水平線上。
   ② 清單改打勾：圓點讀起來像文章條列，打勾讀起來像「你會拿到什麼」。
      ⚠️ 用 ArkiTeki 會員方案頁那顆打勾（實測 bim.arkiteki.com/plans：fas fa-check，
         0.8em、色 #7872E0、Font Awesome 6 Pro 900）——Sara 指定要跟那邊同一個。
         不用 '✓' 字元也不用自己畫的 mask：字元長相隨系統字體變，自畫的則是另一種形狀。
      ⚠️ top 用 .58em 對齊第一行的視覺中線；用 top:50% 的話多行項目的打勾會跑到中間。 */
.bt-app .plan-box .pb-lede{
  display:block; margin:10px 0 0; min-height:calc(1.75em * 2);
  font-size:.95em; line-height:1.75; letter-spacing:.04em; color:#666666;
}
.bt-app .plan-box .spec.fr-view ul{ list-style:none; margin:0; padding:0; }
.bt-app .plan-box .spec.fr-view ul li{ position:relative; padding-left:26px; }
.bt-app .plan-box .spec.fr-view ul li::before{
  content:"\f00c"; position:absolute; left:2px; top:0;
  font-family:"Font Awesome 6 Pro","Font Awesome 6 Free"; font-weight:900; font-style:normal;
  font-size:.8em; line-height:inherit; color:#7872E0;
}
@media screen and (max-width:900px){
  /* 窄螢幕卡片直排，彼此不必對齊，定位句就不用再鎖兩行的高度 */
  .bt-app .plan-box .pb-lede{ min-height:0; }
}

/* 115.09.16：三張卡的價格要落在同一條水平線。
   標題早就對齊了（靠 col-item 上的佔位磚），但價格沒有——
   另外兩張卡的標題與價格之間夾著固定／浮動切換鈕（46px + 14px 外距），免費試用卡沒有，
   所以它的 $0 一直比隔壁高 60px（加上定位句之後更明顯）。
   ⚠️ 補在定位句的下外距，不是給卡片 min-height：卡片高度是由最長的特色清單決定的，
      動高度會連帶把按鈕的位置一起改掉。
   ⚠️ :not(:has(.plan-group-switch)) 精準指到「這張卡沒有切換鈕」，
      不用寫死免費試用卡的 plan-id——之後若免費卡也長出切換鈕，這條會自動失效。 */
/* 補在定位句的**上**外距：切換鈕排在標題與定位句之間，補在下面的話
   免費試用卡的定位句會比隔壁兩張高 60px，三張卡的「適合誰」對不到同一行。
   70px = 原本的 10px 上外距 + 切換鈕那一塊佔掉的 60px（鈕高 46 + 上外距 14 + 下外距 4，
   其中 4px 與定位句自己的 10px 上外距合併）。 */
.bt-app .plan-table .plan-box:not(:has(.plan-group-switch)) .pb-lede{ margin-top:70px; }
@media screen and (max-width:900px){
  /* 直排時三張卡不並排，不需要補這 60px */
  .bt-app .plan-table .plan-box:not(:has(.plan-group-switch)) .pb-lede{ margin-top:10px; }
}

/* ═══ 115.09.17 Sara：頁面文字一律靠左、方案卡拿掉虛線、比較表說明浮層被切 ═══
   ① 比較表的許可欄（表頭＋價格）原本置中，是整頁唯一置中的文字區塊，跟方案卡、項目名稱欄對不齊。
      ⚠️ 左內距用 4%（與第一欄 td:first-child 同值）：原本置中時靠 0.6em 就夠，靠左之後貼著直向分隔線會太擠。
         百分比是以整張表寬計，不是欄寬——寫 8% 在 1440 寬會空出 100px。
      ⚠️ 省 X% 標籤原本用 margin:auto 置中，要一起改成靠左，否則會單獨懸在欄位中間。
      ⚠️ 手機分頁模式（≤820）那條規則寫了 text-align:center，要在同一斷點裡再壓一次。
   ② 方案卡優惠列上的虛線：當初優惠列有「折後價＋折扣碼說明」兩三行，虛線用來跟定價隔開。
      現在只剩一枚標籤＋一行日期，緊貼在價格下面讀起來就是價格的註腳，不需要再切一刀。
   ③ 比較表外框是 overflow:hidden（為了圓角與窄螢幕橫捲），最後一列「三年期方案」的浮層往下開會超出外框被切掉。
      ⇒ 最後一列的浮層改往上開；其他列下面還有表格空間，維持往下。 */
.bt-app .price-compare .header-row th:not(.pc-col-name),
.bt-app .price-compare td[data-col],
.bt-app .price-compare td[data-col] > *{ text-align:left; }
.bt-app .price-compare .header-row th:not(.pc-col-name),
.bt-app .price-compare td[data-col]{ padding-left:4%; }
.bt-app .price-compare .pc-save,
.bt-app .price-compare .pc-per + .pc-save{ margin-left:0; margin-right:0; }
@media screen and (max-width:820px){
  .bt-app .price-compare td[data-col],
  .bt-app .price-compare td[data-col] > *{ text-align:left; }
}
.bt-app .pb-promo{ border-top:0; padding-top:0; }
/* ④ 特色清單的打勾要對齊卡片左緣那條線（與方案名、定位句、價格同一條）。
   原本 li 繼承 fr-view 的左外距 20px，打勾本身又 left:2px，整塊比上面多縮 22px（Sara 截圖標橘線）。 */
.bt-app .plan-box .spec.fr-view ul li{ margin-left:0; }
.bt-app .plan-box .spec.fr-view ul li::before{ left:0; }
/* ⑤ 比較表群組標題（標準方案／早鳥方案…）與項目名稱（標準價格／三年期方案…）的層級：上粗下細。
   原本 600 對 500，同字級下只差一階，Noto Sans TC 這兩階肉眼幾乎分不出來（Sara：兩個看起來一樣粗）。
   ⇒ 群組 700、項目 400，拉開兩階；字級不動，層級只靠字重表達。 */
.bt-app .price-compare .pc-group-name{ font-weight:700; }
.bt-app .price-compare .pc-title{ font-weight:400; }
/* ⑥ 方案卡按鈕（14 天免費試用／訂閱）的 hover 跟聯絡我們的「送出」同一支紫（Sara 附圖）。
   原本吃正式站的 --mid2-border-color（#AAA5FF），白字壓在淺紫上對比不夠，看起來像停用狀態。
   ⚠️ 早鳥卡（.highlighted）另有一條 hover 規則吃 --highlight-border-color（#958FFF），要一起蓋，否則三張卡會是兩種紫。 */
.bt-app .plan-table .buy .buttons button:hover,
.bt-app .plan-table .buy .buttons a:hover,
.bt-app .plan-table .plan-box.highlighted .buy .buttons button:hover{ background-color:#7872E0; border-color:#7872E0; color:#FFFFFF; }
.bt-app .price-compare tbody tr:last-child .pc-tip .pc-tip-box{ top:auto; bottom:calc(100% + 8px); }

/* ═══ 方案卡兩欄版面（2026-09-19 修）═══
   archiac 的方案 widget 依群組數輸出 column-2（≤2 組）或 column-3（3 組以上）。
   P5 抽樣 CSS 時頁面剛好是三張卡，只帶到 .column-3，於是群組剩兩組時 .plan-table 退回 display:block，
   兩張卡變成一上一下、而且還吃到 .plan-table .col-item 的 30% 寬（右邊空一大塊）。
   ⚠️ 用 .plan-table.column-2 而不是 .column-2：要壓過同樣兩個 class 的 .plan-table .col-item{width:30%}，
      靠順序不保險（那條在檔案前段）。
   ⚠️ 斷點沿用舊站 common.css／app.rwd.css 的 column-2：≤768 改單欄。
   目前訪客看到的就是這個狀態（Studio 方案還是 display=2，只剩兩個舊方案）；
   Studio 上架後回到三張卡（免費試用／固定許可／早鳥），走 column-3。 */
:where(.bt-app) .column-2{ display:flex; flex-wrap:wrap; }
:where(.bt-app) .plan-table.column-2 .col-item{ width:48.5%; margin-right:3%; margin-top:2%; }
:where(.bt-app) .plan-table.column-2 .col-item:nth-child(2n){ margin-right:0; }
:where(.bt-app) .plan-table.column-2 .col-item:nth-child(-n+2){ margin-top:0; }
@media screen and (max-width:768px){
  :where(.bt-app) .plan-table.column-2 .col-item{ width:100%; margin-right:0; margin-top:2%; }
  :where(.bt-app) .plan-table.column-2 .col-item:nth-child(1){ margin-top:0; }
}

/* ═══ 115.09.20 Sara：「請幫我將 FAQ 問題分類、分組」═══
   FAQ 改成一個後台分類一組（.faq-group ＋ .faq-group-title），題號跨組連號。
   ‧ 群組小標比題目（.text 1.2em）小一階、字重 700，與區塊主標「常見問題」
     （h3 1.6em / 500）拉開兩個層級。
   ‧ 主標原本吃上面 :where(.bt-app) .faq-section h3 的品牌紫，Sara 截圖要求主標與
     組標都改黑（--default-title-color＝#222222，與題目文字同一支黑），
     這裡用權重更高的 .bt-app 蓋掉。 */
.bt-app .faq-group + .faq-group{ margin-top:40px; }
.bt-app .faq-section h3{ color:var(--default-title-color); }
.bt-app .faq-group-title{ margin:0 0 12px 3px; font-size:1.05em; font-weight:700; letter-spacing:.08em; line-height:1.4; color:var(--default-title-color); }
@media screen and (max-width: 1024px){
  .bt-app .faq-group + .faq-group{ margin-top:30px; }
  .bt-app .faq-group-title{ margin-bottom:8px; }
}