/* ============================================================
   transfer-google-workspace-to-another-account-iw.css
   D2C-20261010-001 | frame 3086:16973 MC-EN-Google Workspace to Google Workspace
   形态基准 = Figma 3086:16973；文案权威 = webpub/20261010 docx
   结构：banner / scenarios / ways(2 tabs) / features / methods(3 tabs, 深蓝) /
         compare(5列表+MultCloud浮层列) / gmail(3 tabs) / sd-steps / enterprise /
         problems / perm(4列表) / explore / clouds / reviews / faqs / final-cta
   令牌：#0055FF 品牌蓝 | #021A60 深蓝 | #F9FAFC 页面浅灰 | #EEF2FF 浅蓝 |
         #5D5D5D 次级文字 | #E5E7EB 边框 | PT Sans 400/700
   断点：≤1080 平板横滚/降列，≤991 平板，≤767 手机
   ============================================================ */
body {
    font-family: 'PT Sans', Arial, sans-serif;
    color: #101828;
}

main {
    display: block;
}

.banner,
.scenarios,
.ways,
.features,
.methods,
.compare,
.gmail,
.sd-steps,
.enterprise,
.problems,
.perm,
.explore,
.clouds,
.reviews,
.faqs,
.final-cta {
    line-height: 1.4;
}

.banner h1,
.scenarios h2,
.scenarios h3,
.ways h2,
.ways h3,
.ways h4,
.features h2,
.features h4,
.methods h2,
.methods h3,
.compare h2,
.gmail h2,
.gmail h3,
.sd-steps h2,
.sd-steps h4,
.enterprise h2,
.problems h2,
.problems h4,
.perm h2,
.explore h2,
.explore h4,
.clouds h2,
.reviews h2,
.faqs h2,
.final-cta h2,
.scenarios p,
.ways p,
.features p,
.methods p,
.gmail p,
.sd-steps p,
.enterprise p,
.problems p,
.explore p,
.clouds p,
.final-cta p,
.scenarios ul,
.scenarios ol,
.ways ul,
.ways ol,
.ent-checks,
.gm-info ol {
    margin: 0;
    padding: 0;
}

.ways ul,
.ways ol,
.gm-info ol {
    list-style: none;
}

.banner img,
.scenarios img,
.ways img,
.features img,
.methods img,
.gmail img,
.sd-steps img,
.enterprise img,
.problems img,
.explore img,
.clouds img,
.final-cta img {
    vertical-align: middle;
}

/* ---------- 01 banner ---------- */
.banner {
    position: relative;
    padding: 80px 0 64px;
    overflow: hidden;
    background: #021A60;
    text-align: center;
}

.banner-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.banner .container2 {
    position: relative;
    z-index: 1;
}

.banner-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.banner h1 {
    max-width: 1280px;
    margin: 0;
    color: #fff;
    font-size: 56px;
    line-height: 1.3;
    font-weight: 700;
}

.banner-lead {
    max-width: 1080px;
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
}

.banner-widget {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.banner-widget iframe {
    width: 1040px;
    max-width: 100%;
    height: 458px;
    border: 0;
    background: transparent;
}

.banner-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 16px;
}

.banner-link {
    margin: 0;
    color: #fff;
    font-size: 16px;
    line-height: 24px;
}

.banner-link a {
    color: #589BFF;
    text-decoration: none;
}

.banner-link a:hover {
    text-decoration: underline;
}

.banner .third-party {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.banner .third-party img {
    width: 120px;
    height: 32px;
    object-fit: contain;
    opacity: .8;
}

/* ---------- 通用 sec-head ---------- */
.sec-head {
    text-align: center;
}

.sec-head h2 {
    max-width: 1280px;
    margin: 0 auto;
    color: #101828;
    font-size: 36px;
    line-height: 1.3;
    font-weight: 700;
}

.sec-head .desc {
    max-width: 1280px;
    margin: 18px auto 0;
    color: #101828;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 400;
}

.sec-head-light h2,
.sec-head-light .desc {
    color: #fff;
}

.nb {
    white-space: nowrap;
}

/* ---------- 02 scenarios ---------- */
.scenarios {
    padding: 120px 0;
    background: #fff;
}

.scenarios .sec-head {
    margin-bottom: 80px;
}

.scenarios h2 {
    margin-bottom: 80px;
    text-align: center;
}

.scenarios-list {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.scenario-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 24px;
    box-shadow: 0 4px 30px 0 rgba(0, 46, 137, 0.1);
    overflow: hidden;
    position: sticky;
    top: 15%;
    overflow: hidden;
    will-change: transform, opacity;
    transform-style: preserve-3d;
}

.scenario-pic {
    flex: 0 0 600px;
}

.scenario-pic img {
    display: block;
    width: 600px;
    height: 400px;
    object-fit: cover;
}

.scenario-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 48px;
}

.scenario-tag {
    color: #0055FF;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
}

.scenario-info h3 {
    margin: 8px 0 16px;
    color: #101828;
    font-size: 32px;
    line-height: 1.3;
    font-weight: 700;
}

.scenario-desc {
    color: #5D5D5D;
    font-size: 16px;
    line-height: 26px;
}

.scenario-labels {
    margin-top: 16px;
    color: #0055FF;
    font-size: 14px;
    line-height: 20px;
}

/* ---------- 03 ways（2 Ways tabs） ---------- */
.ways {
    padding: 120px 0;
    background: #F9FAFC;
    text-align: center;
}

.ways .sec-head-w {
    max-width: 1200px;
    margin: 0 auto;
}

.ways h2 {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    color: #000;
    font-size: 36px;
    line-height: 1.3;
    font-weight: 700;
}

.tabs {
    position: relative;
    display: inline-flex;
    padding: 4px;
    justify-content: center;
    margin-top: 80px;
    border-radius: 12px;
    border: 1px solid #E8EAEF;
    background: #FFF;
}

.tabs button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 60px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #000;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}

.tabs button.active {
    background: #2258F6;
    color: #fff;
    font-weight: 700;
}

.tabs .tab-ic {
    position: absolute;
    top: -16px;
    right: 8px;
    width: 48px;
    height: 48px;
    pointer-events: none;
}

.tab-panel {
    display: none;
    margin-top: 45px;
    margin-bottom: 40px;
    padding: 48px 40px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 9px 35px 0 rgba(20, 46, 102, 0.05);
    text-align: left;
}

.tab-panel.active {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-panel[hidden] {
    display: none;
}

.way-info {
    width: 579px;
    max-width: 100%;
    min-width: 0;
}

.way-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.way-head-txt h3 {
    color: #000;
    font-size: 32px;
    line-height: 1.3;
    font-weight: 700;
}

.way-head-txt p {
    margin-top: 16px;
    margin-bottom: 29px;
    color: #5D5D5D;
    font-size: 14px;
    line-height: 18px;
}

.way-quota {
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 120px;
    height: 120px;
    border-radius: 12px;
    background: rgba(0, 85, 255, 0.05);
}

.way-quota b {
    color: #0055FF;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
}

.way-quota span {
    color: #000;
    font-size: 14px;
    line-height: 18px;
}

.pros-cons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.pros-cons li {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 4px;
    background: #F9FAFC;
    color: #000;
    font-size: 14px;
    line-height: 18px;
}

.pros-cons li img {
    flex: 0 0 16px;
}

.way-info h4 {
    margin: 16px 0;
    color: #000;
    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
}

.way-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.way-steps li+li {
    margin-top: 8px;
}

.way-steps i {
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #EEF2FF;
    color: #1149ED;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
}

.way-steps span {
    color: #5D5D5D;
    font-size: 14px;
    line-height: 28px;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    padding: 8px 24px;
    border: 1px solid #0055FF;
    border-radius: 8px;
    background: #fff;
    color: #0055FF;
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    text-decoration: none;
    cursor: pointer;
}

.btn-outline:hover {
    background: #F5F8FF;
}

.way-info .btn-outline {
    margin-top: 16px;
    min-width: 240px;
    padding: 14px 32px;
}

.btn-outline .btn-sub {
    display: block;
    color: #5D5D5D;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

.btn-signup {
    flex-direction: column;
    gap: 2px;
}

.way-info .btn-signup {
    padding: 6px 32px;
}

.ways-note {
    margin-top: 40px;
    text-align: center;
    color: #000;
    font-size: 18px;
    line-height: 23px;
}

.ways-note a,
.faq-a a {
    color: #0055FF;
}

/* ---------- 04 features ---------- */
.features {
    padding: 120px 0;
    background: #fff;
}

.features .sec-head h2 {
    max-width: 1120px;
}

.features .sec-head {
    margin-bottom: 80px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 24px;
}

.feature-card {
    padding: 32px;
    background: #fff;
    border: 1px solid #EEF0F4;
    border-radius: 16px;
    box-shadow: 0 2px 12px 0 rgba(16, 24, 40, 0.04);
    text-align: center;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 12px 0 rgba(16, 24, 40, 0.1);
}

.feature-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 50%;
    background: #F8F9FA;
}

.feature-ic img {
    width: 100px;
    height: 100px;
}

.feature-card h4 {
    margin: 16px 0;
    color: #101828;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
}

.feature-card p {
    color: #5D5D5D;
    font-size: 16px;
    line-height: 21px;
}

/* ---------- 05 methods（深蓝 3 tabs） / 07 gmail（3 tabs）共享 ---------- */
.methods {
    padding: 120px 0;
    background: #021A60;
}

.methods .sec-head {
    margin-bottom: 80px;
}

.methods-card {
    overflow: hidden;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.18);
}

.methods-tabs {
    display: flex;
    background: #0055FF;
}

.methods-tabs button {
    flex: 1 1 0;
    height: 60px;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.methods-tabs button:not(:last-child)::before {
    content: '';
    width: 2px;
    display: inline-block;
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    height: 21px;
    position: absolute;
    right: 0;
    top: calc(50% - 10px);
}

.methods-tabs button+button {
    /* border-left: 1px solid rgba(255, 255, 255, 0.35); */
}

.methods-tabs button.active {
    background: #fff;
    color: #0055FF;
    border-radius: 16px 16px 0 0;
}

.method-panel {
    display: none;
    padding: 40px 24px 48px;
}

.method-panel.active {
    display: block;
}

.method-panel[hidden] {
    display: none;
}

.method-panel>h3 {
    text-align: center;
    color: #101828;
    font-size: 24px;
    line-height: 31px;
    font-weight: 700;
}

.method-sub {
    margin-top: 12px;
    text-align: center;
    color: #5D5D5D;
    font-size: 16px;
    line-height: 21px;
}

.method-box {
    display: flex;
    /* gap: 24px; */
    margin-top: 32px;
    padding: 24px;
    border-radius: 12px;
    background: #EEF2FF;
}

.method-steps {
    flex: 0 0 440px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.method-step {
    padding: 20px;
    border-radius: 8px 0 0 8px;
    background: #fff;
}

.method-step+.method-step {
    margin-top: 16px;
}

.method-step p {
    color: #101828;
    font-size: 16px;
    line-height: 26px;
}

.method-step b {
    font-weight: 700;
}

.method-shot {
    flex: 1;
    min-width: 0;
    padding: 16px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.05);
}

.method-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.method-tip {
    margin-top: 24px;
    color: #5D5D5D;
    font-size: 16px;
    line-height: 21px;
}

/* ---------- 06 compare ---------- */
.compare {
    padding: 120px 0;
    background: #fff;
}

.compare .sec-head {
    margin-bottom: 80px;
}

.compare-scroll {
    /* overflow-x: auto; */
    padding-top: 40px;
    padding-bottom: 40px;
}

.compare-card {
    position: relative;
    width: 1280px;
    margin: 0 auto;
}

.compare-crown {
    position: absolute;
    top: -50px;
    right: 105px;
    z-index: 3;
    line-height: 0;
}

.compare-table {
    width: 1280px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05), 0 18px 40px -12px rgba(0, 0, 0, 0.08);
}

.compare-table th,
.compare-table td {
    height: 80px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #101828;
    text-align: center;
    vertical-align: middle;
}

.compare-table thead th {
    background: #F9FAFC;
    font-weight: 700;
}

.compare-table .col-feature {
    width: 200px;
    padding-left: 40px;
    text-align: left;
    font-weight: 700;
}

.compare-table tbody .col-feature {
    /* background: #fff; */
}

.compare-table tbody tr:nth-child(even) {
    background: #F9FAFC;
}

.compare-table tbody tr:nth-child(even) td {
    background: transparent;
}

/* compare 主表单元格：分隔线 / 内边距 / 文字色（figma 3086:17394） */
.compare .compare-table {
    table-layout: fixed;
    overflow: visible;
    border-right: 0;
}

.compare .compare-table thead th:not(:first-child) {
    width: 270px;
}

.compare .compare-table th,
.compare .compare-table td {
    padding: 8px 20px;
    color: #000;
    border-right: 1px solid #E5E7EB;
    border-bottom: 1px solid transparent;
}

.compare .compare-table thead th {
    border-bottom: 1px solid #E5E7EB;
}

.compare .compare-table td:last-child {
    border-bottom: 1px solid #E5E7EB;

}

/* 首列随行底色（隔行灰底覆盖首列） */
.compare .compare-table tbody .col-feature {
    background: transparent;
}

/* 去掉 overflow 裁切后手工补左侧圆角；首列 199px 使整表 = 1280px */
.compare .compare-table thead th:first-child {
    width: 199px;
    border-radius: 15px 0 0 0;
}

.compare .compare-table tbody tr:last-child .col-feature {
    background: #F9FAFC;
    border-radius: 0 0 0 15px;
}

/* MultCloud 浮层列：边框与底色写在 th、td 单元格上 */
.compare .compare-table th.col-mc,
.compare .compare-table td.col-mc {
    position: relative;
    background: #EEF2FF;
    border-left: 2px solid #1D70EC;
    border-right: 2px solid #1D70EC;
}

.compare .compare-table thead th.col-mc {
    background: #0055FF;
}

/* 浮层列上端突出段（10px）用伪元素拼接，与蓝色表头衔接 */
.compare .compare-table thead th.col-mc::before {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: calc(100% - 5px);
    height: 16px;
    background: #0055FF;
    border: 2px solid #1D70EC;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
}

/* 浮层列下端突出段（20px）用伪元素拼接 */
.compare .compare-table tbody tr:last-child td.col-mc::after {
    content: "";
    position: absolute;
    left: -1.5px;
    right: -2px;
    top: 100%;
    height: 20px;
    background: #EEF2FF;
    border: 2px solid #1D70EC;
    border-top: 0;
    border-radius: 0 0 16px 16px;
}

/* 浮层列投影（透明层只投影，不遮挡内容） */
.compare-card::after {
    content: "";
    position: absolute;
    top: -10px;
    right: 0;
    bottom: -20px;
    width: 270px;
    border-radius: 16px;
    box-shadow: 0 4px 16px 0 rgba(29, 112, 236, 0.15);
    pointer-events: none;
}

.mc-logo {
    display: inline-flex;
    align-items: center;
}

.mc-logo img {
    height: 32px;
    width: auto;
}

/* ---------- 07 gmail ---------- */
.gmail {
    padding: 120px 0;
    background: #F9FAFC;
}

.gmail .sec-head {
    margin-bottom: 80px;
}

.gmail-card {
    border: 1px solid #E5E7EB;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.05);
}

.gm-panel {
    display: none;
    gap: 40px;
    justify-content: space-between;
    padding: 40px 40px 48px;
}

.gm-panel.active {
    display: flex;
}

.gm-info {
    width: 600px;
    max-width: 100%;
    min-width: 0;
}

.gm-info h3 {
    color: #101828;
    font-size: 32px;
    line-height: 41px;
    font-weight: 700;
}

.gm-desc {
    margin-top: 16px !important;
    color: #5D5D5D;
    font-size: 14px;
    line-height: 18px;
}

.gm-info .way-steps {
    margin-top: 16px;
}

.gm-limit {
    margin-top: 24px;
}

.gm-limit b {
    display: block;
    color: #C5221F;
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
}

.gm-limit span {
    display: block;
    margin-top: 2px;
    color: #991B1B;
    font-size: 14px;
    line-height: 18px;
}

.gm-shot {
    flex: 0 0 542px;
    align-self: flex-start;
    padding: 12px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #F9FAFC;
}

.gm-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- 08 shared drive steps ---------- */
.sd-steps {
    padding: 120px 0;
    background: #fff;
}

.sd-steps .sec-head {
    margin-bottom: 80px;
}

.sd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sd-card {
    min-width: 0;
}

.sd-pic {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    background: #F9FAFC;
}

.sd-pic img {
    display: block;
    width: 100%;
    height: auto;
}

.sd-card h4 {
    margin: 24px 0 12px;
    color: #101828;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
}

.sd-card p {
    color: #5D5D5D;
    font-size: 16px;
    line-height: 22px;
}

/* ---------- 09 enterprise ---------- */
.enterprise {
    padding: 120px 0;
    background: #F9FAFC;
}

.enterprise .container2 {
    max-width: 1344px;
}

.enterprise .sec-head {
    margin-bottom: 40px;
}

.ent-checks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 32px;
    margin-top: 24px;
}

.ent-checks li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #101828;
    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
}

.ent-panel {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: #EEF2FF;
}

.ent-steps {
    flex: 0 0 512px;
    min-width: 0;
}

.ent-step {
    display: block;
    width: 100%;
    padding: 20px 24px;
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 8px;
    background: #fff;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.ent-step+.ent-step {
    margin-top: 16px;
}

.ent-step b {
    display: block;
    color: #101828;
    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
}

.ent-step span {
    display: block;
    margin-top: 8px;
    color: #5D5D5D;
    font-size: 14px;
    line-height: 22px;
}

.ent-step.active {
    border-left-color: #0055FF;
    box-shadow: 0 4px 16px 0 rgba(0, 85, 255, 0.10);
}

.ent-step.active b {
    color: #0055FF;
}

.ent-visual {
    flex: 1;
    min-width: 0;
    padding: 16px;
    border-radius: 8px;
    background: #fff;
}

.ent-visual img {
    display: none;
    width: 100%;
    height: auto;
}

.ent-visual img.active {
    display: block;
}

.ent-tip {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding: 20px 24px;
    border-radius: 12px;
    background: #EEF2FF;
}

.ent-tip img {
    flex: 0 0 24px;
}

.ent-tip b {
    color: #0055FF;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}

.ent-tip span {
    display: block;
    color: #101828;
    font-size: 16px;
    line-height: 24px;
}

/* ---------- 10 problems ---------- */
.problems {
    padding: 120px 0;
    background: #fff;
}

.problems .sec-head {
    margin-bottom: 80px;
}

.problems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 24px;
}

.problem-card {
    padding: 24px;
    background: #fff;
    border: 1px solid #EEF0F4;
    border-radius: 16px;
    box-shadow: 0 2px 12px 0 rgba(16, 24, 40, 0.04);
    display: flex;
    flex-direction: column;
}

.problem-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.problem-head img {
    flex: 0 0 40px;
}

.problem-head h4 {
    color: #101828;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
}

.problem-fix {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding: 16px;
    border-radius: 8px;
    background: #F9FAFC;
    border: 1px solid #E2E8F0;
    align-items: flex-start;
    flex: 1;
}

.problem-fix img {
    flex: 0 0 16px;
    margin-top: 3px;
}

.problem-fix p {
    color: #5D5D5D;
    font-size: 14px;
    line-height: 22px;
}

/* ---------- 11 permissions ---------- */
.perm {
    padding: 120px 0;
    background: #F9FAFC;
}

.perm .sec-head {
    margin-bottom: 80px;
}

.perm-table {
    width: 1280px;
    margin: 0 auto;
}

.perm-table thead th {
    background: #EEF2FF;
    border-right: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
}

.perm-table tbody td .perm-table td {
    border-right: 1px solid #E5E7EB;
}

.perm-table .col-feature {
    width: 200px;
}

.perm-table th:not(.col-feature) {
    width: 360px;
}

.perm tbody th,
.perm tbody td {
    border-right: 1px solid #E5E7EB;
}

/* ---------- 12 explore ---------- */
.explore {
    padding: 120px 0;
    background: #fff;
}

.explore .sec-head {
    margin-bottom: 80px;
}

.explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.explore-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(16, 24, 40, 0.04);
    overflow: hidden;
    text-align: center;
    transition: all 0.3s ease;
}

.explore-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 2px 12px 0 rgba(16, 24, 40, 0.1);
}

.explore-pic img {
    display: block;
    width: 100%;
    height: auto;
}

.explore-card h4 {
    margin: 24px 24px 0;
    color: #101828;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
}

.explore-card p {
    flex: 1;
    margin: 12px 24px 0;
    color: #5D5D5D;
    font-size: 14px;
    line-height: 22px;
}

.explore-card .btn-outline {
    align-self: center;
    margin: 20px 24px 24px;
    min-height: 44px;
    padding: 8px 24px;
    font-size: 14px;
    height: 46px;
}

/* ---------- 13 clouds ---------- */
.clouds {
    padding: 120px 0;
    background: #F9FAFC;
}

.clouds .sec-head {
    margin-bottom: 64px;
}

.clouds-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.cloud-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 138px;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    transition: box-shadow .2s;
}

.cloud-item:hover {
    box-shadow: 0 6px 20px 0 rgba(16, 24, 40, 0.08);
}

.cloud-item img {
    width: 64px;
    height: 64px;
}

.cloud-item span {
    color: #101828;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    padding: 0 8px;
}

.cloud-item.cloud-more {
    display: none;
}

.clouds-grid.expanded .cloud-item.cloud-more {
    display: flex;
}

.clouds-more {
    text-align: center;
    margin-top: 40px;
}

.clouds-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 284px;
    max-width: 100%;
    height: 50px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    color: #101828;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    justify-content: center;
}

/* ---------- 14 reviews ---------- */
.reviews {
    padding: 120px 0;
    background: #fff;
    overflow: hidden;
}

.reviews>h2 {
    margin-bottom: 80px;
    text-align: center;
    color: #101828;
    font-size: 36px;
    line-height: 47px;
    font-weight: 700;
}

.review-carousel {
    position: relative;
}

.review-track {
    display: flex;
    gap: 24px;
    will-change: transform;
}

.review-card {
    flex: 0 0 570px;
    box-sizing: border-box;
    padding: 24px 25px;
    border: 1px solid #EEF0F4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(16, 24, 40, 0.04);
}

.review-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-head i {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
}

.avatar-brown {
    background: #8D6E63;
}

.avatar-purple {
    background: #8E6C9E;
}

.avatar-green {
    background: #2E7D6E;
}

.review-name span {
    display: block;
    color: #101828;
    font-size: 16px;
    line-height: 19px;
}

.review-name .ic-pin {
    display: block;
    margin-top: 4px;
}

.review-stars {
    display: flex;
    gap: 4px;
    margin: 20px 0 16px;
}

.review-stars span {
    position: relative;
    width: 24px;
    height: 24px;
    background: #00B67A;
}

.review-stars span::after {
    content: "\2605";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
}

.review-quote {
    min-height: 110px;
    color: #101828;
    font-size: 16px;
    line-height: 22px;
}

.review-mark {
    display: flex;
    gap: 4px;
    margin: 16px 0;
}

.review-mark span {
    width: 12px;
    height: 24px;
    border-radius: 3px;
    background: #E7E7E6;
}

.review-foot {
    display: flex;
    align-items: center;
    gap: 24px;
    border-top: 1px solid #EEF0F4;
    padding-top: 16px;
    color: #5D5D5D;
    font-size: 14px;
}

.review-useful,
.review-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.review-flag {
    margin-left: auto;
    display: inline-flex;
}

.review-mask {
    position: absolute;
    top: -20px;
    bottom: -20px;
    width: 420px;
    pointer-events: none;
}

.review-mask-l {
    left: 0;
    background: linear-gradient(90deg, #fff 85%, rgba(255, 255, 255, 0));
}

.review-mask-r {
    right: 0;
    background: linear-gradient(270deg, #fff 85%, rgba(255, 255, 255, 0));
}

.review-navs {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    pointer-events: none;
    margin: 0 auto;
}

.review-prev,
.review-next {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
}

.review-next,
.review-prev {
    background: #fff;
    border: 1px solid #EEF0F4;
    box-shadow: 0 4px 16px 0 rgba(16, 24, 40, 0.08);
}

.review-prev:hover,
.review-next:hover {
    background: #0055FF;
    box-shadow: 0 4px 16px 0 rgba(0, 85, 255, 0.30);
}

.review-prev .arr,
.review-next .arr {
    position: relative;
    width: 40px;
    height: 40px;
    background: url(/resource/images/transfer-onedrive-files-to-another-account/ic-arrow-left-40.svg);
}

.review-next .arr {
    transform: rotate(180deg);
}

.review-prev:hover .arr,
.review-next:hover .arr {
    background: url(/resource/images/transfer-onedrive-files-to-another-account/ic-arrow-left-40-hover.svg);
}

/* .review-prev .arr::before,
.review-next .arr::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-top: 2px solid #101828;
    border-right: 2px solid #101828;
} */

/* .review-prev .arr::before {
    left: 6px;
    transform: translateY(-50%) rotate(-135deg);
}

.review-next .arr::before {
    right: 6px;
    transform: translateY(-50%) rotate(45deg);
}

.review-prev:hover .arr::before {
    border-color: #fff;
}

.review-next:hover .arr::before {
    right: 6px;
    transform: translateY(-50%) rotate(45deg);
    border-color: #fff;
} */

/* ---------- 15 faqs ---------- */
.faqs {
    padding: 120px 0;
    background: #F9FAFC;
}

.faqs .container2 {
    max-width: 1200px;
}

.faq-wrap>h2 {
    margin-bottom: 80px;
    text-align: center;
    color: #101828;
    font-size: 36px;
    line-height: 47px;
    font-weight: 700;
}

.faq-item {
    border-bottom: 1px solid #E5E7EB;
}

.faq-item:first-of-type {
    border-top: 0;
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.faq-q button {
    flex: 1;
    padding: 40px 0;
    border: 0;
    background: none;
    text-align: left;
    color: #101828;
    font-family: inherit;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    cursor: pointer;
}

.faq-item.active .faq-q button {
    color: #0055FF;
}

.faq-arrow {
    position: relative;
    flex: 0 0 32px;
    height: 32px;
    transition: transform .3s;
}

.faq-arrow::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 11px;
    width: 14px;
    height: 14px;
    border-right: 2px solid #101828;
    border-bottom: 2px solid #101828;
    transform: rotate(45deg);
}

.faq-item.active .faq-arrow {
    transform: rotate(180deg);
}

.faq-item.active .faq-arrow::before {
    border-color: #101828;
}

.faq-a {
    padding: 0 60px 24px 0;
    color: #101828;
    font-size: 16px;
    line-height: 21px;
}

/* ---------- 16 final-cta ---------- */
.final-cta {
    padding: 0 0 120px;
    background: #F9FAFC;
}

.cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 500px;
    padding: 60px 72px;
    border-radius: 24px;
    background: #021A60;
    overflow: hidden;
}

.cta-logo {
    width: 152px;
    height: auto;
}

.cta-copy {
    flex: 0 0 596px;
}

.cta-copy h2 {
    max-width: 596px;
    margin: 24px 0 0;
    color: #fff;
    font-size: 36px;
    line-height: 47px;
    font-weight: 700;
}

.cta-copy p {
    max-width: 596px;
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
    line-height: 23px;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    margin-top: 32px;
    padding: 8px 40px;
    border: 0;
    border-radius: 8px;
    background: #0055FF;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 23px;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary:hover {
    background: #1149ED;
}

.cta-art {
    flex: 0 0 540px;
    width: 540px;
    height: auto;
}

/* ---------- 平板 ≤1080 ---------- */
@media (max-width: 1359px) {
    .compare-crown {
        right: 80px;
    }
}

@media (max-width: 1080px) {

    .features-grid,
    .problems-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .clouds-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .explore-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sd-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .review-card {
        flex: 0 0 480px;
    }

    .review-navs {
        padding: 0 60px;
    }
}

/* ---------- 平板 ≤991 ---------- */
@media (max-width: 991px) {
    .banner {
        padding: 60px 0 48px;
    }

    .banner h1 {
        font-size: 40px;
    }

    .banner-lead {
        font-size: 16px;
    }

    .banner .third-party {
        gap: 24px;
    }

    .banner .third-party img {
        width: 92px;
    }

    .scenarios,
    .ways,
    .features,
    .methods,
    .compare,
    .gmail,
    .sd-steps,
    .enterprise,
    .problems,
    .perm,
    .explore,
    .clouds,
    .reviews,
    .faqs {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .scenarios .sec-head,
    .features .sec-head,
    .methods .sec-head,
    .compare .sec-head,
    .gmail .sec-head,
    .sd-steps .sec-head,
    .problems .sec-head,
    .perm .sec-head,
    .explore .sec-head,
    .clouds .sec-head {
        margin-bottom: 48px;
    }

    .sec-head h2 {
        font-size: 30px;
    }

    .sec-head .desc {
        font-size: 16px;
    }

    .scenario-card {
        flex-direction: column;
    }

    .scenario-pic {
        flex: none;
    }

    .scenario-pic img {
        width: 100%;
        height: auto;
    }

    .scenario-info {
        padding: 24px;
    }

    .scenario-info h3 {
        font-size: 24px;
    }

    .ways h2 {
        font-size: 30px;
    }

    .tabs {
        margin-top: 48px;
    }

    .tab-panel {
        padding: 32px 24px;
    }

    .tab-panel.active {
        flex-direction: column;
        gap: 32px;
    }

    .way-info {
        width: 100%;
    }

    .method-box {
        flex-direction: column;
    }

    .method-steps {
        flex: none;
        width: 100%;
    }

    .gm-panel.active {
        flex-direction: column;
    }

    .gm-info {
        width: 100%;
    }

    .gm-shot {
        flex: none;
        align-self: stretch;
    }

    .gm-info h3 {
        font-size: 24px;
        line-height: 31px;
    }

    .ent-panel {
        flex-direction: column;
    }

    .ent-steps {
        flex: none;
        width: 100%;
    }

    .ent-visual {
        flex: none;
    }

    .enterprise .sec-head {
        margin-bottom: 24px;
    }

    .reviews>h2 {
        font-size: 30px;
        margin-bottom: 48px;
    }

    .review-card {
        flex: 0 0 420px;
    }

    .review-navs {
        padding: 0 12px;
    }

    .review-mask {
        width: 200px;
    }

    .cta-box {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
        padding: 40px 32px;
    }

    .cta-art {
        flex: none;
        width: 100%;
        max-width: 540px;
    }
}

/* ---------- 手机 ≤767 ---------- */
@media (max-width: 767px) {
    .banner {
        padding: 48px 0 40px;
    }

    .banner h1 {
        font-size: 30px;
        line-height: 38px;
    }

    .banner-widget {
        margin-top: 32px;
    }

    .banner-widget iframe {
        height: 440px;
    }

    .banner .third-party {
        flex-wrap: wrap;
        gap: 16px;
    }

    .banner .third-party img {
        width: 80px;
        height: 24px;
    }

    .scenarios,
    .ways,
    .features,
    .methods,
    .compare,
    .gmail,
    .sd-steps,
    .enterprise,
    .problems,
    .perm,
    .explore,
    .clouds,
    .reviews,
    .faqs {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .sec-head h2,
    .ways h2,
    .reviews>h2,
    .faq-wrap>h2 {
        font-size: 24px;
        line-height: 32px;
    }

    .sec-head .desc {
        font-size: 14px;
    }

    .scenarios-list {
        gap: 40px;
    }

    .scenarios .sec-head,
    .features .sec-head,
    .methods .sec-head,
    .compare .sec-head,
    .gmail .sec-head,
    .sd-steps .sec-head,
    .problems .sec-head,
    .perm .sec-head,
    .explore .sec-head,
    .clouds .sec-head {
        margin-bottom: 32px;
    }

    .tabs {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: auto;
        margin-top: 32px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .tabs button {
        width: 100%;
        height: 52px;
        background: #fff;
        border: 1px solid #E5E7EB;
    }

    .tabs button.active {
        border-color: #0055FF;
    }

    .tabs .tab-ic {
        top: -10px;
        right: 8px;
        width: 36px;
        height: 36px;
    }

    .tab-panel {
        margin-top: 24px;
    }

    .way-head {
        flex-direction: column;
    }

    .way-quota {
        flex: none;
    }

    .way-head-txt h3 {
        font-size: 24px;
    }

    .ways-note {
        font-size: 16px;
    }

    .features-grid,
    .problems-grid,
    .explore-grid,
    .sd-grid {
        grid-template-columns: 1fr;
    }

    .clouds-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .cloud-item {
        height: 120px;
    }

    .methods-tabs {
        flex-direction: column;

    }

    .methods-tabs button+button {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.35);
    }

    .method-panel {
        padding: 24px 16px 32px;
    }

    .method-box {
        padding: 16px;
    }

    .method-step {
        padding: 16px;
    }

    .method-step p {
        font-size: 14px;
        line-height: 22px;
    }

    .ent-step {
        padding: 16px;
    }

    .ent-tip {
        padding: 16px;
    }

    .compare-scroll,
    .perm .compare-scroll {
        padding-top: 56px;
    }

    .compare-crown {
        top: -34px;
        right: 24px;
    }

    .compare-crown img {
        width: 44px;
        height: 44px;
    }

    .reviews {
        padding-left: 0;
        padding-right: 0;
    }

    .reviews>h2 {
        padding: 0 20px;
    }

    .review-carousel {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .review-track {
        gap: 16px;
        padding: 0 20px;
    }

    .review-card {
        flex: 0 0 86vw;
        scroll-snap-align: center;
    }

    .review-mask,
    .review-navs {
        display: none;
    }

    .faq-q button {
        font-size: 16px;
        line-height: 22px;
        padding: 16px 0;
    }

    .faq-a {
        padding-right: 0;
    }

    .faq-arrow {
        flex-basis: 24px;
    }

    .cta-copy h2 {
        font-size: 24px;
        line-height: 32px;
    }

    .cta-copy p {
        font-size: 16px;
    }

    .btn-primary {
        width: 100%;
    }
}

@media (max-width: 340px) {
    .banner {
        padding-left: 16px;
        padding-right: 16px;
    }
}