/* P02 按鈕與連結：每個變體＝一個參考元件
   ─────────────────────────────────────────────────────────────────────────
   註解格式：參考＝原站實測值／調整＝本專案實際生效值／理由＝為什麼調
   原則：參考值決定「版型結構」（形狀語意、動態機制）；調整值決定「中文可讀性
        與鼎新內容架構」（字級、觸控高度、圓角、互動色）。
   ───────────────────────────────────────────────────────────────────────── */

/* ---------- CTA 規格（2026-09-28 統一）----------
   參考：四站的藍底 CTA 尺寸各不相同（Stripe 33px、Squarespace 60px、Ramp 51px、Cohere 45.6px）
   調整：統一為 16px／500／24px 行高、min-height 56px、padding 16/28、圓角 8px
   理由：16px 是中文內文級字級（低於此在長字串下不可讀）；56px 是可點擊高度下限；
        圓角 8px 依 Figma Radius / control。
   2026-09-28 第二次收斂：原本保留 Stripe／Squarespace／Ramp／Cohere 四個 class，
        但圓角統一成 8px 之後四者已完全相同（底色 #005AFF、白字、padding 16/28、
        字級 16/500/24、hover #0505BD、同一套複合動態），
        差別只剩 font-family 與 transition 秒數 —— 對中文標籤沒有可感差異。
        因此合併為 .a-cta（藍底白字）與 .a-cta-outline（框框版）兩款。 */
.a-cta, .a-cta-outline {
  box-sizing: border-box;
  justify-content: center;
  height: auto;
  min-height: 56px;
  border-radius: 8px;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
/* 框框款扣掉 1px 邊框，外部尺寸與藍底款一致（皆 56px） */
.a-cta-outline { padding: 15px 27px; }

/* ---------- 共用：md 尺寸（2026-09-28 新增，卡片內用）----------
   lg 56px 是照 hero／區塊收尾調的，搬進卡片會壓過卡片本身
   （按鈕高 56px 對 28px 卡片標題 = 2 倍高）。md 收到 44px 後變 1.57 倍。
   44px 是觸控無障礙下限（iOS HIG 44pt／WCAG 2.5.8），因此不做到第三級；
   密集之處改用 .a-link 文字連結（16px），不用更小的按鈕。 */
.a-cta--md, .a-cta-outline--md {
  min-height: 44px;
  padding: 12px 20px;
  font-size: 15px;
  line-height: 20px;
  border-radius: 8px;
}
.a-cta-outline--md { padding: 11px 19px; }   /* 扣 1px 邊框，外部仍 44px */
/* 複合動態的位移量是照 56px 設計的，44px 下等比縮小才不會偏 */
:is(.a-cta--md, .a-cta-outline--md) .cta-label { transform: translateX(7px); }
:is(.a-cta--md, .a-cta-outline--md):hover .cta-label,
:is(.a-cta--md, .a-cta-outline--md):focus-visible .cta-label { transform: translateX(-3px); }
:is(.a-cta--md, .a-cta-outline--md):hover .cta-arrow,
:is(.a-cta--md, .a-cta-outline--md):focus-visible .cta-arrow { transform: translateX(1.5px); }

/* ---------- 共用：複合動態（2026-09-28 統一）----------
   底色變化 ＋ 文字置中位移 ＋ 線條箭頭由遮罩滑入。
   機制與數值沿用 Squarespace 版本（該站原生就有文字位移與箭頭滑入）；
   套用到其餘三款，取代 Stripe 原本的「畫線＋箭頭尖移動」與 Ramp／Cohere 的無箭頭寫法。
   純文字連結不套用（見下方 .a-link）。 */
:is(.a-cta, .a-cta-outline) .cta-label {
  display: inline-block;
  transform: translateX(9px);
  transition: transform .35s cubic-bezier(.645, .045, .355, 1);
}
:is(.a-cta, .a-cta-outline) .cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 24px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.645, .045, .355, 1);
}
:is(.a-cta, .a-cta-outline) .cta-arrow svg {
  display: block;
  position: relative;
  top: 1px;
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateX(-16px);
  transition: transform .25s cubic-bezier(.645, .045, .355, 1);
}
:is(.a-cta, .a-cta-outline):hover .cta-label,
:is(.a-cta, .a-cta-outline):focus-visible .cta-label { transform: translateX(-4px); }
:is(.a-cta, .a-cta-outline):hover .cta-arrow,
:is(.a-cta, .a-cta-outline):focus-visible .cta-arrow { transform: translateX(2px); }
:is(.a-cta, .a-cta-outline):hover .cta-arrow svg,
:is(.a-cta, .a-cta-outline):focus-visible .cta-arrow svg { transform: translateX(0); }
:is(.a-cta, .a-cta-outline):focus-visible {
  outline: 3px solid var(--dw-blue);
  outline-offset: 4px;
}

/* ---------- 共用：藍底 CTA 互動色 ----------
   參考各站原本的 hover 底色並不相同（Stripe #0A2540、Squarespace #0505BD、
   Ramp #3D7FFF 變淺）。調整後統一為 --dw-blue-hover #0505BD。
   理由：#0505BD 是 Figma 互動色（使用者確認），非 CIS 色；統一後四款可比較。
        Cohere 外框款維持「invert 成深色」語意，不併入此規則。 */
.a-cta:hover, .a-cta:focus-visible { background: var(--dw-blue-hover); color: #fff; }

/* ---------- 純文字連結（2026-09-28 收斂為一款）----------
   參考：stripe.com/partners「Talk to sales」16px／cohere.com/products「Learn more」16px
   調整：統一 16px／500／20px、靜止藍色 --dw-blue、hover 轉 --dw-blue-hover、
         箭頭預設隱藏、hover 淡入＋右移 1px、與文字間距 4px
   理由：三個 class 在把字級統一成 16px、顏色統一成藍色之後已無實質差異：
           · a-stripe-link 16px/500 藍 + hover 出箭頭 → 與 c-more 相同（兩者已刪）
           · a-cohere-link 16px/400 靜止 #212121、hover 才轉藍 → 只差字重與一個靜止色（已刪）
         密集列表裡 20 多個連結若各自帶不同色與字重，
         會讓人誤以為「有些連結比較重要或動作不同」。
         不採 Cohere 原站的常駐箭頭 —— 常駐箭頭在密集列表中會產生大量視覺雜訊。 */
.a-link {
  display: inline-flex;
  align-items: center;
  color: var(--dw-blue);
  font-family: var(--f-noto);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s cubic-bezier(.215, .61, .355, 1);
}
.a-link svg {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .15s cubic-bezier(.215, .61, .355, 1), transform .15s cubic-bezier(.215, .61, .355, 1);
}
.a-link:hover, .a-link:focus-visible { color: var(--dw-blue-hover); }
.a-link:hover svg, .a-link:focus-visible svg { opacity: 1; transform: translateX(1px); }

/* ---------- 方形輪播箭頭（28px）----------
   https://stripe.com/billing「Optimize every step of your revenue cycle」
   參考：28×28、圓角 2、間距 8、可按＝淡色底、停用＝透明底＋30% 灰字
   調整：icon 色 #000→--text-primary；停用改為整體 opacity .3
   理由：純黑在頁面上過重；停用表現與 Squarespace 圓形箭頭統一。 */
.a-arrows { display: inline-flex; gap: 8px; }
.a-arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--dw-blue-tint);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.25, 1, .5, 1), outline-color .3s cubic-bezier(.25, 1, .5, 1);
}
.a-arrow svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.a-arrow:hover:not(:disabled) { background: var(--dw-blue-tint-hover); }
.a-arrow:disabled { background: var(--dw-blue-tint); color: var(--text-primary); opacity: .3; cursor: default; }

/* ---------- 藍底 CTA（保留：動態機制出處說明）----------
   https://www.squarespace.com/website-marketing header「Get started」
   參考：60px 高、padding 23/28、圓角 4、文字靜止右移 9px／hover 左移 -4px（.35s）、
        箭頭在 14px 遮罩內由左滑入（.25s）、底色 .2s、字級 14px
   調整：→56px/8px/16px/500/padding 16/28（共用區塊）；箭頭圖形由文字符號「→」
        改為線條 SVG（同 Cohere 連結箭頭畫法 M2.5 8h11M9 3.5 13.5 8 9 12.5）
   理由：箭頭圖形統一、與其他站可比較；時間曲線完全沿用原站不動。
        這款是複合動態的原始出處。 */
.a-cta {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: var(--dw-blue);
  color: #fff;
  font-family: var(--f-noto);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s cubic-bezier(.645, .045, .355, 1), background-color .2s cubic-bezier(.645, .045, .355, 1);
}

/* ---------- 圓形輪播箭頭（新增變體）----------
   https://www.squarespace.com/solutions/creative-services card carousel
   參考：30px 圓鈕、1px #ddd 細框、16px 箭頭
   調整：→48px、間距 12px、底色 rgba(255,255,255,.3)、固定可見
   理由：30px 對觸控與高齡使用者太小；此款是「常駐輪播控制」而非滑鼠跟隨提示，
        因此固定顯示並放大。hover／focus 轉藍底白箭頭，disabled 為 opacity .3。 */
.a-arrows-round { display: inline-flex; gap: 12px; }
.a-arrow-round {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.a-arrow-round svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a-arrow-round:hover:not(:disabled), .a-arrow-round:focus-visible:not(:disabled) { background: var(--dw-blue); border-color: var(--dw-blue); color: #fff; }
.a-arrow-round:focus-visible { outline: 3px solid var(--dw-blue); outline-offset: 4px; }
.a-arrow-round:disabled { opacity: .3; cursor: default; }

/* ---------- 實心按鈕（已合併進 .a-cta，僅保留參考紀錄）----------
   https://ramp.com/pe-partnerships hero「Become a partner」
   參考：51px 高、padding 20、圓角 6、16px/400、hover 底色變淺 #3D7FFF（.3s）
   調整：→56px/8px/500/padding 16/28（共用區塊）；hover 由「變淺」改為與其他三款一致的
        轉深 #0505BD
   理由：轉淺方向在藍底上對比反而下降，統一為轉深才有一致的深度感。 */

/* ---------- 框框 CTA（Cohere 外框款）----------
   https://cohere.com/solutions/technology 卡片「Learn more」
   參考：45.6px 高、padding 12/16、1px 深色框、全圓角 9999px、14px/400、
        hover 填滿深色 #17171C ＋文字轉白（.3s）
   調整：→56px/8px/16px/500/padding 15/27（扣 1px 框，外部尺寸與其他三款一致）
   理由：全圓角（膠囊）與 Figma control 8px 衝突，依專案規則採 8px。
        hover 維持原站的「invert 成深色」——這是外框按鈕的語意，
        不併入藍底 CTA 的轉深規則，只統一動態不統一色彩。 */
.a-cta-outline {
  display: inline-flex;
  align-items: center;
  border: 1px solid #17171C;
  background: transparent;
  color: #17171C;
  font-family: var(--f-noto);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1), color .3s cubic-bezier(.4, 0, .2, 1);
}
.a-cta-outline:hover, .a-cta-outline:focus-visible { background: #17171C; color: #fff; }

/* Cohere「Learn more」的參考紀錄（已併入 .a-link）：
   https://cohere.com/products「Safe. Flexible. Built for you.」Learn more
   參考：16px/400、與箭頭間距 8px、箭頭 16px、hover 箭頭右移 4px、箭頭常駐顯示
   調整：字重 400→500、靜止色 #212121→--dw-blue、間距 8→4px、
         箭頭改為預設隱藏 hover 淡入（同 Stripe）
   理由：見上方 .a-link 註解。 */

@media (prefers-reduced-motion: reduce) {
  .a-cta, .a-cta-outline, .a-arrow-round, .a-link,
  .a-link svg,
  :is(.a-cta, .a-cta-outline) .cta-label,
  :is(.a-cta, .a-cta-outline) .cta-arrow,
  :is(.a-cta, .a-cta-outline) .cta-arrow svg { transition: none; }
}