/* =========================================
   About 頁專屬樣式（2026-10-23 從 archcross-landing.css 拆出）
   只在 [jex_about_landing] 載入，避免首頁與其他 landing 頁多載這段；
   版面（2026-10-25）：ArchCross 主張（Hero）→ 創辦人與起點 → 微系統 → 做法（分工圖）→ ArchCross 四個產品 → 收尾聯絡 → 常見問題
   全部鎖在 .ac-modern-about 內，不影響共用 bento 樣式的服務條款頁
========================================= */

.ac-modern-about .ac-about-eyebrow {
    display: block;
    margin-bottom: 20px;
    color: var(--ac-primary);
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.ac-modern-about .ac-type-hero {
    padding-bottom: clamp(3rem, 8vh, 6rem);
}

/* 桌機與平板：Hero 高度與產品頁（.jc-hero-section，以 Studio 為準）一致，內容垂直置中；
   手機版維持依內容撐開，與產品頁手機版相同。 */
@media (min-width: 769px) {
    .ac-modern-about .ac-type-hero {
        min-height: 700px;
        height: 85vh;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* 創辦人區：深色帶，和開頭的淺色標語區做出區隔；電腦版左欄大標與名字、右欄一段說明，下方三種身分卡 */
.ac-about-founder-section {
    position: relative;
    z-index: 2;
    padding: var(--ac-spacing) 0;
    color: var(--jex-band-dark-on);
    background: var(--jex-band-dark);
}

.ac-about-founder-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 clamp(32px, 5vw, 72px);
    align-items: end;
}

.ac-about-founder-section .ac-about-eyebrow {
    color: var(--jex-brand-mark-sun);
}

.jex-archcross-landing .ac-about-founder-headline {
    margin: 0 0 20px;
    color: var(--jex-band-dark-on);
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.ac-about-founder-section .ac-gradient-text-primary {
    background: linear-gradient(135deg, var(--jex-brand-mark-sun) 0%, var(--jex-band-dark-on) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.ac-about-founder-intro .ac-about-founder-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--jex-band-dark-on);
    font-size: 1.15rem;
    font-weight: 800;
}

.ac-about-founder-linkedin {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: color-mix(in srgb, var(--jex-band-dark-on) 70%, transparent);
    border-radius: var(--md-sys-shape-corner-full);
    transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.ac-about-founder-linkedin:hover,
.ac-about-founder-linkedin:focus-visible {
    color: var(--jex-brand-mark-sun);
    background: color-mix(in srgb, var(--jex-band-dark-on) 12%, transparent);
}

.ac-about-promise {
    margin: 24px 0 0;
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--jex-band-dark-on) 25%, transparent);
    color: color-mix(in srgb, var(--jex-band-dark-on) 88%, transparent);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.9;
}

@media (min-width: 900px) {
    .ac-about-founder-intro {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    }

    .ac-about-founder-intro > :not(.ac-about-promise) {
        grid-column: 1;
    }

    .ac-about-founder-intro .ac-about-promise {
        grid-column: 2;
        /* 左欄依序是眉標、大標、名字、與我聯絡四列，右欄起點段落跨滿這四列 */
        grid-row: 1 / span 4;
        align-self: end;
        margin: 0;
        padding: 0 0 0 28px;
        border-top: 0;
        border-left: 1px solid color-mix(in srgb, var(--jex-band-dark-on) 25%, transparent);
    }
}

/* 與我聯絡：電腦版在左欄名字下方；手機版排在起點段落之後 */
.ac-about-founder-contact {
    margin: 28px 0 0;
}

/* 起點段落：Excel 的起點一段，HR 經歷一段（字級略小） */
.ac-about-promise p {
    margin: 0;
}

.ac-about-promise .ac-about-career {
    margin-top: 16px;
    color: color-mix(in srgb, var(--jex-band-dark-on) 70%, transparent);
    font-size: .92em;
}

/* 觀點區：兩欄白卡，每張是一個觀點、對應的做法與 Field 文章連結 */
.ac-about-views-section {
    position: relative;
    z-index: 2;
    padding: var(--ac-spacing) 0;
}

.ac-about-views {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.ac-about-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(22px, 2.6vw, 30px);
    background: var(--md-sys-color-surface);
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--md-sys-elevation-1);
}

.jex-archcross-landing .ac-about-view h3 {
    margin: 0;
    color: var(--ac-fg);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.45;
}

.ac-about-view p {
    margin: 0;
    color: var(--ac-fg-muted);
    line-height: 1.8;
}

.ac-about-view-link {
    margin-top: auto;
    padding-top: 6px;
    color: var(--ac-primary);
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
}

.ac-about-view-link:hover,
.ac-about-view-link:focus-visible {
    text-decoration: underline;
}

@media (min-width: 768px) {
    .ac-about-views {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 產品區用淺色帶，和上方白底的觀點區分開 */
.ac-about-products-section {
    background: var(--md-sys-color-surface-container-low);
}

/* 微系統區與產品區：微系統是色塊卡片（不加框線），產品是整張可點的白卡；兩區中間隔著淺色帶的分工圖 */
.ac-about-works-section,
.ac-about-products-section {
    position: relative;
    z-index: 2;
    padding: var(--ac-spacing) 0;
}

.ac-about-product-skill {
    align-self: flex-start;
    padding: 2px 12px;
    color: var(--md-sys-color-on-primary-container);
    background: var(--md-sys-color-primary-container);
    border-radius: var(--md-sys-shape-corner-full);
    font-size: .85rem;
    font-weight: 700;
}

.ac-about-works-header .ac-section-title {
    margin: 0;
}

.ac-about-works-group-note {
    max-width: 720px;
    margin: 10px 0 0;
    color: var(--ac-fg-muted);
    line-height: 1.8;
}

.ac-about-products,
.ac-about-systems {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.ac-about-product a {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 8px;
    padding: clamp(22px, 2.6vw, 28px);
    color: inherit;
    text-decoration: none;
    background: var(--md-sys-color-surface);
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--md-sys-elevation-1);
    transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.ac-about-product a:hover,
.ac-about-product a:focus-visible {
    transform: translateY(var(--jex-hover-lift-strong));
    box-shadow: var(--md-sys-elevation-2);
}

.ac-about-product-name {
    color: var(--ac-primary);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.2;
}

.ac-about-product-tag {
    color: var(--ac-fg);
    font-weight: 700;
}

.ac-about-product-desc {
    color: var(--ac-fg-muted);
    line-height: 1.7;
}

.ac-about-system {
    padding: clamp(20px, 2.4vw, 26px);
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--ac-radius-lg);
}

/* 微系統卡：小字工具名 → 大字問題（讀者遇到的狀況）→ 流程怎麼重新設計 */
.ac-about-system-name {
    display: block;
    margin-bottom: 8px;
    color: var(--ac-primary);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.jex-archcross-landing .ac-about-system h3 {
    margin: 0 0 10px;
    color: var(--ac-fg);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.5;
}

.ac-about-system p {
    margin: 0;
    color: var(--ac-fg-muted);
    line-height: 1.75;
}

/* 微系統的成果：放在卡片下方的主色柔底色塊，不加框線 */
.ac-about-systems-result {
    margin: 24px 0 0;
    padding: clamp(22px, 3vw, 32px);
    background: var(--md-sys-color-primary-container);
    border-radius: var(--ac-radius-lg);
}

.jex-archcross-landing .ac-about-systems-result h3 {
    margin: 0 0 8px;
    color: var(--md-sys-color-on-primary-container);
    font-size: 1.2rem;
    font-weight: 800;
}

.ac-about-systems-result p {
    margin: 0;
    color: var(--md-sys-color-on-primary-container);
    font-size: 1.05rem;
    line-height: 1.8;
}

.ac-about-systems-more {
    margin: 20px 0 0;
    color: var(--ac-fg-muted);
}

@media (min-width: 640px) {
    .ac-about-products,
    .ac-about-systems {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ac-about-products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ac-about-systems {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 分工圖：Maker／Checker 原則，AI、程式、人各自負責什麼 */
.ac-about-split-section {
    position: relative;
    z-index: 2;
    padding: clamp(3rem, 7vw, 6rem) 0;
    background: var(--md-sys-color-surface-container-low);
}

.ac-about-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

.ac-about-split-quote {
    margin: 0;
    color: var(--ac-fg);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.ac-about-split-quote::before {
    color: var(--ac-primary);
    content: '「';
}

.ac-about-split-quote::after {
    color: var(--ac-primary);
    content: '」';
}

.ac-about-split-note {
    margin: 16px 0 0;
    color: var(--ac-fg-muted);
    line-height: 1.7;
}

.ac-about-split-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ac-about-split-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: var(--md-sys-color-surface);
    border-radius: var(--ac-radius-lg);
}

.ac-about-split-who {
    display: grid;
    place-items: center;
    height: 44px;
    color: var(--ac-fg);
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-full);
    font-weight: 900;
}

.ac-about-split-what {
    color: var(--ac-fg);
    line-height: 1.6;
}

.ac-about-split-row--human {
    background: var(--md-sys-color-primary-container);
}

.ac-about-split-row--human .ac-about-split-who {
    color: var(--md-sys-color-on-primary);
    background: var(--ac-primary);
}

.ac-about-split-row--human .ac-about-split-what {
    color: var(--md-sys-color-on-primary-container);
    font-weight: 700;
}

@media (min-width: 900px) {
    .ac-about-split {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
}

/* 收尾聯絡：讀完證據之後的寫信入口，色塊不加框線 */
.ac-about-contact-section {
    position: relative;
    z-index: 2;
    padding: 0 0 var(--ac-spacing);
}

.ac-about-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(28px, 4vw, 48px);
    /* 深色帶與「起點」區同色，主色按鈕在上面才看得清楚 */
    color: var(--jex-band-dark-on);
    background: var(--jex-band-dark);
    border-radius: var(--ac-radius-lg);
}

.jex-archcross-landing .ac-about-contact .ac-section-title {
    margin: 0;
    color: var(--jex-band-dark-on);
}

.ac-about-contact p {
    margin: 0 0 8px;
    color: color-mix(in srgb, var(--jex-band-dark-on) 88%, transparent);
    line-height: 1.8;
}