/*
 * 載入順序須在 webflow.css / authgear-new.webflow.css **之後**（見 app/layout.tsx）。
 * 否則後載的 Webflow 會蓋掉 design-system 內 @layer／較早載入的規則，導致 split 列黏在一起、標題與首列間距過大。
 * 另：淺色底 `.ds-richtext-prose.w-richtext` 仍在本檔；Login Gallery 深色長文（`--on-dark` + `ds-login-gallery-richtext`）已定義於 `app/authgear-design-system.css`。
 */
.ds-container.ds-container--split-stack.ds-container--split-stack--title-gap-m {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--spacing-m) !important;
}

.ds-container.ds-container--split-stack.ds-container--split-stack--title-gap-m > .title-content {
  margin-block-end: 0 !important;
}

.ds-container.ds-container--split-stack.ds-container--split-stack--title-gap-m > .ds-split-stack__rows {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-xl) !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/*
 * Webflow 常對 `div` 等設 margin；flex 的 `gap` 會與子項 margin 疊加，間距會大於單純 `--spacing-xl`。
 */
.ds-container.ds-container--split-stack.ds-container--split-stack--title-gap-m > .ds-split-stack__rows > .ds-split {
  margin: 0 !important;
}

/*
 * 深色底圖文分欄（如 Passwordless 紫色區）：與 DS `heading-on-dark`／`section-lede-on-dark` token 一致。
 * Webflow `authgear-new.webflow.css` 內全域 `h2 { color: var(--primary-1); font-size: 42px; … }` 後載會覆寫 bundle，
 * 故寫在此檔並用 !important（本檔在 layout 中載入於 Webflow 之後）。
 */
.ds-split-row__body > h2.heading-on-dark {
  margin: 0 !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-h2) !important;
  line-height: var(--text-h2--line-height) !important;
  font-weight: var(--font-weight-regular) !important;
  letter-spacing: normal !important;
  text-align: left !important;
  max-width: 100% !important;
}

.ds-split-row__body > h3.heading-on-dark {
  margin: 0 !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-h3) !important;
  line-height: var(--text-h3--line-height) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: normal !important;
  text-align: left !important;
  max-width: 100% !important;
}

.ds-split-row__body > p.section-lede-on-dark {
  margin: 0 !important;
  color: var(--color-text-secondary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-body) !important;
  line-height: var(--text-body--line-height) !important;
  font-weight: var(--font-weight-regular) !important;
  text-align: left !important;
  max-width: 100% !important;
}

/*
 * CMS 長文（Strapi / Webflow richtext）— 與 case study、blog、What’s New、Login Gallery 等共用。
 * 編輯規範：文章內章節主標請用 h2；次標 h3、h4；無序清單 ul（圓點）、有序清單 ol（數字）。
 * 視覺參考：https://www.authgear.com/customer-stories/global-qsr
 * 須寫在本檔（載入於 authgear-new.webflow.css 之後），否則 Webflow 會覆寫 bundle 內規則。
 */
.ds-richtext-prose.w-richtext {
  font-family: var(--font-sans) !important;
  color: var(--color-text-light-secondary) !important;
}

/* 文章內主章節（對應頁面上「At a glance」「The Challenge」等區塊層級） */
.ds-richtext-prose.w-richtext h2 {
  margin: var(--spacing-xl) 0 var(--spacing-s) 0 !important;
  padding: 0 !important;
  color: var(--color-text-light-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-h3-svg-card) !important;
  line-height: var(--text-h3-svg-card--line-height) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: normal !important;
}

.ds-richtext-prose.w-richtext h2:first-child {
  margin-top: 0 !important;
}

.ds-richtext-prose.w-richtext h3 {
  margin: var(--spacing-l) 0 var(--spacing-xs) 0 !important;
  color: var(--color-text-light-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-h4) !important;
  line-height: var(--text-h4--line-height) !important;
  font-weight: var(--font-weight-medium) !important;
}

.ds-richtext-prose.w-richtext h4 {
  margin: var(--spacing-m) 0 var(--spacing-xxs) 0 !important;
  color: var(--color-text-light-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-body) !important;
  line-height: var(--text-body--line-height) !important;
  font-weight: var(--font-weight-medium) !important;
}

.ds-richtext-prose.w-richtext p {
  margin: 0 0 var(--spacing-m) 0 !important;
  color: var(--color-text-light-secondary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-body) !important;
  line-height: var(--text-body--line-height) !important;
  font-weight: var(--font-weight-regular) !important;
}

.ds-richtext-prose.w-richtext p:last-child {
  margin-bottom: 0 !important;
}

/* 無序：圓點；有序：數字 — 與參考頁條列一致 */
.ds-richtext-prose.w-richtext ul {
  margin: 0 0 var(--spacing-m) 0 !important;
  padding-left: 1.5rem !important;
  list-style-type: disc !important;
  list-style-position: outside !important;
}

.ds-richtext-prose.w-richtext ol {
  margin: 0 0 var(--spacing-m) 0 !important;
  padding-left: 1.5rem !important;
  list-style-type: decimal !important;
  list-style-position: outside !important;
}

.ds-richtext-prose.w-richtext li {
  margin: 0 0 var(--spacing-xxs) 0 !important;
  color: var(--color-text-light-secondary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-body) !important;
  line-height: var(--text-body--line-height) !important;
  font-weight: var(--font-weight-regular) !important;
}

.ds-richtext-prose.w-richtext li:last-child {
  margin-bottom: 0 !important;
}

.ds-richtext-prose.w-richtext li > ul {
  margin-top: var(--spacing-xxs) !important;
  margin-bottom: 0 !important;
  list-style-type: circle !important;
}

.ds-richtext-prose.w-richtext li > ol {
  margin-top: var(--spacing-xxs) !important;
  margin-bottom: 0 !important;
  list-style-type: lower-alpha !important;
}

.ds-richtext-prose.w-richtext a {
  color: var(--color-primary-800) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.125rem !important;
}

.ds-richtext-prose.w-richtext a:hover {
  color: var(--color-primary-600) !important;
}

.ds-richtext-prose.w-richtext strong {
  color: var(--color-text-light-primary) !important;
  font-weight: var(--font-weight-medium) !important;
}

.ds-richtext-prose.w-richtext blockquote {
  margin: 0 0 var(--spacing-m) 0 !important;
  padding: var(--spacing-m) !important;
  border-radius: var(--radius-section) !important;
  color: var(--color-text-light-secondary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-body) !important;
  line-height: var(--text-body--line-height) !important;
  background-color: var(--color-neutral-200) !important;
}

/*
 * Login Gallery 深色長文（`--on-dark.ds-login-gallery-richtext`）— 選擇器與屬性須與 `app/authgear-design-system.css` 內同段 **同步**。
 * 本檔在 `authgear-new.webflow.css` 之後載入，確保 `!important` 能蓋過 Webflow。
 */
.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext {
  font-family: var(--font-sans) !important;
  color: var(--color-text-secondary) !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext h1 {
  margin: var(--spacing-xl) 0 var(--spacing-s) 0 !important;
  padding: 0 !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-h3-svg-card) !important;
  line-height: var(--text-h3-svg-card--line-height) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: normal !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext h1:first-child {
  margin-top: 0 !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext h2 {
  margin: var(--spacing-l) 0 var(--spacing-s) 0 !important;
  padding: 0 !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-h3-svg-card) !important;
  line-height: var(--text-h3-svg-card--line-height) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: normal !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext h2:first-child {
  margin-top: 0 !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext h3 {
  margin: var(--spacing-l) 0 var(--spacing-xs) 0 !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-h4) !important;
  line-height: var(--text-h4--line-height) !important;
  font-weight: var(--font-weight-medium) !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext h4 {
  margin: var(--spacing-m) 0 var(--spacing-xxs) 0 !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-body) !important;
  line-height: var(--text-body--line-height) !important;
  font-weight: var(--font-weight-medium) !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext p {
  margin: 0 0 var(--spacing-m) 0 !important;
  color: var(--color-text-secondary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-body) !important;
  line-height: var(--text-body--line-height) !important;
  font-weight: var(--font-weight-regular) !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext p:last-child {
  margin-bottom: 0 !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext ul {
  margin: 0 0 var(--spacing-m) 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext ul > li {
  position: relative !important;
  padding-left: 2rem !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext ul > li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.2em !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.37525%2017.8127C9.11925%2017.8127%208.86325%2017.7147%208.66825%2017.5197L4.29325%2013.1448C3.90225%2012.7538%203.90225%2012.1217%204.29325%2011.7308C4.68425%2011.3398%205.31625%2011.3398%205.70725%2011.7308L9.37525%2015.3988L18.2932%206.48075C18.6842%206.08975%2019.3162%206.08975%2019.7072%206.48075C20.0982%206.87175%2020.0982%207.50375%2019.7072%207.89475L10.0822%2017.5197C9.88725%2017.7147%209.63125%2017.8127%209.37525%2017.8127Z%22%20fill%3D%22%230065FF%22%2F%3E%3C%2Fsvg%3E')
    no-repeat center / contain !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext ol {
  margin: 0 0 var(--spacing-m) 0 !important;
  padding-left: 1.5rem !important;
  list-style-type: decimal !important;
  list-style-position: outside !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext li {
  margin: 0 0 var(--spacing-xxs) 0 !important;
  color: var(--color-text-secondary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-body) !important;
  line-height: var(--text-body--line-height) !important;
  font-weight: var(--font-weight-regular) !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext li:last-child {
  margin-bottom: 0 !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext li > ul {
  margin-top: var(--spacing-xxs) !important;
  margin-bottom: 0 !important;
  margin-left: 0.25rem !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext li > ol {
  margin-top: var(--spacing-xxs) !important;
  margin-bottom: 0 !important;
  list-style-type: lower-alpha !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext a {
  color: var(--color-primary-300) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.125rem !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext a:hover {
  color: var(--color-primary-200) !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext strong {
  color: var(--color-text-primary) !important;
  font-weight: var(--font-weight-medium) !important;
}

.ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext blockquote {
  margin: 0 0 var(--spacing-m) 0 !important;
  padding: var(--spacing-m) !important;
  border-radius: var(--radius-section) !important;
  color: var(--color-text-secondary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-body) !important;
  line-height: var(--text-body--line-height) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1) !important;
}

.ds-login-gallery-body__main .ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext,
.ds-login-gallery-body__main .ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext p,
.ds-login-gallery-body__main .ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext li,
.ds-login-gallery-body__main .ds-richtext-prose.ds-richtext-prose--on-dark.ds-login-gallery-richtext blockquote {
  color: #b0b0b0 !important;
}

/*
 * Login Gallery 單篇：design-system bundle 早於 Webflow 載入，未加 !important 的 display／底色會被蓋掉。
 * 本檔在 authgear-new.webflow.css 之後載入（見 app/layout.tsx）。
 */
.ds-login-gallery-page {
  background-color: var(--color-bg-deep) !important;
  color: var(--color-text-primary) !important;
}

.ds-login-gallery-index {
  background-color: var(--color-bg-deep) !important;
  color: var(--color-text-primary) !important;
}

.ds-login-gallery-index .ds-login-gallery-index__hero-title {
  color: var(--color-text-primary) !important;
}

.ds-login-gallery-index .ds-login-gallery-index__hero-lede {
  color: var(--color-text-primary) !important;
}

.ds-login-gallery-page .ds-login-gallery-page__title {
  color: var(--color-text-primary) !important;
}

.ds-login-gallery-page .ds-section-eyebrow.ds-section-eyebrow--on-dark {
  color: var(--color-text-light-muted) !important;
}

.ds-login-gallery-page .ds-section-eyebrow.ds-section-eyebrow--on-dark:hover {
  color: var(--color-text-secondary) !important;
}

/* 集結頁小標：漸層字（與 `--gradient-accent`）；避免 Webflow 蓋掉字級／顏色 */
.ds-login-gallery-index .ds-login-gallery-index__eyebrow {
  font-size: 1.75rem !important;
  line-height: 2.125rem !important;
  background-image: var(--gradient-accent) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.ds-login-gallery-index .ds-login-gallery-index-card__frame {
  background-color: var(--color-login-gallery-carousel-surface) !important;
}

.ds-login-gallery-index a.ds-login-gallery-index-card .ds-login-gallery-index-card__title {
  color: var(--color-text-primary) !important;
}

.ds-login-gallery-page .ds-container.ds-login-gallery-page__container {
  display: block !important;
  padding-top: var(--spacing-ml) !important;
  padding-bottom: var(--spacing-ml) !important;
  background-color: transparent !important;
  background: transparent !important;
}

.ds-login-gallery-page__header .ds-login-gallery-page__container {
  padding-top: var(--spacing-xl) !important;
}

.ds-login-gallery-page__content.ds-login-gallery-page__content--split {
  padding-top: 0 !important;
  padding-bottom: var(--spacing-xl) !important;
  background-color: transparent !important;
  background: transparent !important;
}

.ds-login-gallery-page .ds-login-gallery-body {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: 1fr !important;
  gap: var(--spacing-ml) !important;
  align-items: start !important;
}

@media (min-width: 992px) {
  .ds-login-gallery-page .ds-login-gallery-body {
    grid-template-columns: minmax(0, 2.7fr) minmax(15rem, 28rem) !important;
    gap: 3.75rem !important;
  }

  .ds-login-gallery-page .ds-login-gallery-body__sidebar {
    position: sticky !important;
    top: calc(var(--layout-fixed-header-height) + var(--spacing-s)) !important;
    align-self: flex-start !important;
    padding-left: var(--spacing-m) !important;
    max-width: 28rem !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
}

/* Design System — Card Alt Gradient（與 `@theme --gradient-card-alt` / `.svg-card-alternative` 一致） */
.ds-login-gallery-body__sidebar-card {
  width: 100%;
  padding: var(--spacing-m) !important;
  border-radius: var(--radius-section) !important;
  border: none !important;
  background: var(--gradient-card-alt) !important;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35) !important;
}

@media (width < 992px) {
  .ds-login-gallery-page .ds-login-gallery-body__sidebar {
    padding-bottom: var(--spacing-m) !important;
    border-bottom: none !important;
    border-left: none !important;
    padding-left: 0 !important;
  }
}

/*
 * ONCE /once — `.flex-block-59` 雙欄 `grid-template-columns: 1fr 1fr` 等同 minmax(auto,1fr)，
 * 欄位 min-content 過大時會把另一欄（框架 + code）推出容器。改為 minmax(0,1fr) 並讓欄可縮。
 * 在 768px+ 套用（Webflow 在 ≤767px 已覆寫為單欄 `grid-template-columns: 1fr`）。
 */
@media screen and (min-width: 768px) {
  .flex-block-59 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* 第三個子元素（Logo 跑馬燈）預設會落在第 2 列第 1 欄，看起來像卡在左欄裡；改為跨滿兩欄。 */
  .flex-block-59 > .once-sdk-logo-marquee {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
}

/*
 * SDK 區：`.flex-block-59` 為最外層格線框；Webflow 在 ≤767px 用 `grid-template-columns: 1fr`
 * 等同 `minmax(auto,1fr)`，左欄 `flex-block-60` 的 min-content 會撐寬整格 → 內容看似「超出外框」。
 * 單欄改為 `minmax(0,1fr)`，並對外層 clip、左欄 max-width:100%，把內容包在框內。
 */
.flex-block-59:has(.once-sdk-framework-grid) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: clip;
}

.flex-block-59:has(.once-sdk-framework-grid) > .flex-block-60.w-layout-vflex {
  align-items: stretch !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: clip;
}

@media screen and (max-width: 767px) {
  .flex-block-59:has(.once-sdk-framework-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * ONCE — SDK 區外層：Grid/Flex 子項預設 min-width:auto，長文與 framework 列會把整頁撐出視窗。
 */
.container-default-inner.once-container-bottom.once-container-top.once-container-60-gap {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.once-inner-container {
  min-width: 0;
  box-sizing: border-box;
}

.flex-block-59 {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.flex-block-59 > .flex-block-60 {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.container-default-inner.once-container-bottom.once-container-top.once-container-60-gap .once-subtitle,
.flex-block-60 .once-subtitle,
.flex-block-60 .who-choose-des {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/*
 * ONCE /once — 「SDKs for Modern Frameworks」程式碼區：Grid 子項預設 min-width:auto，
 * 會被 white-space:pre 的長行撐破視窗寬度；限制在欄內並讓 pre 橫向捲動。
 */
.once-sdk-framework-grid {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/*
 * `w-layout-vflex` 預設 `align-items: flex-start`，子項在交叉軸不延展。
 * `.grid-15` 會變成以 max-content 寬度排版（整排 pill 同一列寬），撐破父層 → 與視窗不同寬。
 * 改為 stretch，讓 `width:100%` 的 pill 列真正吃滿欄寬，flex-wrap 才能換行。
 */
.once-sdk-framework-grid .flex-block-46.w-layout-vflex {
  align-items: stretch !important;
}

.once-sdk-framework-grid .grid-15 {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* SDK 區：副標在 `once-inner-container` 外層的裸 div，需一併 clamp */
.container-default-inner.once-container-bottom.once-container-top.once-container-60-gap:has(.once-sdk-framework-grid) {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: clip;
}

.container-default-inner.once-container-bottom.once-container-top.once-container-60-gap:has(.once-sdk-framework-grid)
  > div:first-of-type {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.once-inner-container:has(.once-sdk-framework-grid) {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/*
 * 左欄 bullet 為 `w-layout-hflex` 橫向 flex + 預設 nowrap，長文會把整列撐出視窗。
 * 讓文字區可縮並在欄內換行。
 */
.flex-block-59:has(.once-sdk-framework-grid) .flex-block-62.w-layout-hflex {
  max-width: 100%;
  min-width: 0;
}

.flex-block-59:has(.once-sdk-framework-grid) .flex-block-62 .who-choose-des {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/*
 * SDK 左欄 CTA：與 hero 共用 `.home-hero-cta-wrapper.once-cta-wrapper`，Webflow ≤991px 會設成 `flex-flow: column`。
 * 只在此區塊改回橫向，讓 See docs 與 5-Minute Guide 同一列。
 */
.flex-block-59:has(.once-sdk-framework-grid) .flex-block-60 .home-hero-cta-wrapper.once-cta-wrapper {
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px 24px;
}

.flex-block-59:has(.once-sdk-framework-grid) .flex-block-60 .home-hero-cta-wrapper.once-cta-wrapper .link-block._5-min {
  flex: 0 1 auto;
  min-width: 0;
}

/*
 * Webflow ≤767px 對 `.once-special-button` 設 `margin-right: auto`（hero 用），在橫向 CTA 裡會吃掉中間空間 → See docs 右側巨大留白。
 * SDK 左欄改為 0，間距只留 `gap`。
 */
.flex-block-59:has(.once-sdk-framework-grid) .flex-block-60 .button-primary.home-hero.new-home.radius-16.once-special-button {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  flex: 0 0 auto;
}

/* Keep iOS + Android pills on one row (parent `.grid-15` is flex-wrap; narrow widths split them). */
.once-sdk-framework-grid .once-sdk-native-pills {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
}

/* Webflow 固定寬度過窄，標籤會在括號前換行；加寬並禁止換行以維持單行。 */
.once-sdk-framework-grid .system.ios .system-name,
.once-sdk-framework-grid .system.android .system-name {
  white-space: nowrap;
}

.once-sdk-framework-grid .system.ios {
  min-width: 142px;
}

.once-sdk-framework-grid .system.android {
  min-width: 220px;
}

/*
 * `min-width` 只加寬外層 `.system`（紫色邊框漸層），`.system-inner` 仍是 `width:auto`，
 * 內容區較窄時右側會露出紫色。讓內層鋪滿外框即可。
 */
.once-sdk-framework-grid .system.ios .system-inner,
.once-sdk-framework-grid .system.android .system-inner {
  inset: 0;
}

.once-sdk-framework-grid .code-outer,
.once-sdk-framework-grid .code-inner,
.once-sdk-framework-grid .code-div {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* 用欄寬約束即可；45vw 會在 ≤991px 蓋掉 Webflow 的 code-outer max-width:none，且與按鈕列寬度不一致 */
.once-sdk-framework-grid .code-outer {
  max-width: 100% !important;
  width: 100%;
  overflow-x: hidden;
}

.once-sdk-framework-grid .code-inner {
  overflow: hidden;
  max-width: 100% !important;
  width: 100%;
}

/*
 * 程式碼在 `.code-wrapper`（absolute）內；捲動發生在 `pre` / 本層，必須把寬度鎖在父層，
 * 否則長行會撐寬整條絕對定位鏈，看起來比視窗還寬。
 */
.once-sdk-framework-grid .code-div {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto;
}

.once-sdk-framework-grid .code-wrapper {
  left: 0 !important;
  right: 0 !important;
  top: 0;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Framework 列：欄寬不足時橫向捲動，避免把整頁撐開（全斷點） */
.once-sdk-framework-grid .grid-15 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Framework 列：≥992px 橫向捲動兜底（桌面欄不夠寬時） */
@media screen and (min-width: 992px) {
  .once-sdk-framework-grid .grid-15 {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/*
 * ≤991px（MD + SM）：Webflow 只在 ≤767px 把 `.grid-14.gap-20` 設成 `flex-flow: column`，
 * 768–991px 仍為 `w-layout-hflex` 橫向，framework 列 + code block 並排在右欄 → 必溢出。
 * 在此斷點強制直向堆疊（與官網小螢幕行為一致），並約束子項寬度。
 */
@media screen and (max-width: 991px) {
  .once-sdk-framework-grid.w-layout-hflex {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .once-sdk-framework-grid {
    align-items: stretch;
  }

  .once-sdk-framework-grid > .flex-block-46 {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    align-self: stretch;
  }

  .once-sdk-framework-grid > .code-outer {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100% !important;
    box-sizing: border-box;
    align-self: stretch;
  }

  .once-sdk-framework-grid .grid-15 {
    justify-content: center;
    flex-wrap: wrap !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 解除 iOS / Android 同列鎖定，讓它們依 flex-wrap 自然排列 */
  .once-sdk-framework-grid .once-sdk-native-pills {
    display: contents;
  }
}

.once-sdk-framework-grid .code.w-code-block {
  max-width: 100%;
  box-sizing: border-box;
}

/* ONCE OnceSdkCode — 行號 + 程式分行（取代 Webflow span 串） */
.once-sdk-framework-grid pre.once-sdk-code-pre {
  height: auto !important;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  max-height: min(50vh, 420px);
  overflow-x: auto;
  overflow-y: auto;
  box-sizing: border-box;
}

.once-sdk-framework-grid .once-sdk-code {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.once-sdk-framework-grid .once-sdk-code-row {
  display: grid;
  grid-template-columns: 2.75em minmax(0, 1fr);
  column-gap: 1em;
  align-items: start;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace;
  font-size: inherit;
  line-height: 1.5;
  width: 100%;
}

.once-sdk-framework-grid .once-sdk-code-ln {
  text-align: right;
  color: #8a8a8a;
  user-select: none;
  padding-right: 0.25em;
}

.once-sdk-framework-grid .once-sdk-code-line-text {
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  color: #f8f8f2;
}

.once-sdk-framework-grid .once-sdk-code-plain {
  color: #f8f8f2;
}

.once-sdk-framework-grid .once-sdk-code-kw {
  color: #dcc6e0;
}

.once-sdk-framework-grid .once-sdk-code-str {
  color: #abe338;
}

.once-sdk-framework-grid .once-sdk-code-comment {
  color: #d4d0ab;
}

/*
 * ONCE /once — ≤767px：Webflow `w-layout-vflex` / 橫向 bullet 易把寬度撐成 max-content，
 * 加上殘留寬元素時整頁會水平溢出。用 clip 截斷（不建立可捲動的 page-wrapper），
 * 並讓主內容區與 `.w-container` 鏈條吃滿視窗寬。
 */
@media screen and (max-width: 767px) {
  .page-wrapper.once-banner {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .page-wrapper.once-banner .container-default-inner,
  .page-wrapper.once-banner .container-default.once {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .page-wrapper.once-banner .once-inner-container.w-layout-blockcontainer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* 標題區副標（在 once-inner-container 外） */
  .container-default-inner.once-container-60-gap:has(.once-sdk-framework-grid) .once-subtitle {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .container-default-inner.once-container-60-gap:has(.once-sdk-framework-grid) .once-subtitle.left {
    max-width: 100%;
  }
}