:root {
  --pg-bg: #eef2f5;
  --pg-surface: #ffffff;
  --pg-surface-soft: #f7f9fa;
  --pg-dark: #111827;
  --pg-dark-2: #1b2740;
  --pg-text: #172033;
  --pg-muted: #647084;
  --pg-line: #dbe2e8;
  --pg-accent: #2fb6a6;
  --pg-accent-soft: #e6f7f4;
  --pg-orange: #f5a524;
  --pg-shadow: 0 18px 48px rgba(17, 24, 39, .09);
}

body {
  background: var(--pg-bg);
  color: var(--pg-text)
}

.transfer-guide {
  padding: 56px 0 96px;
  background: linear-gradient(180deg, #edf2f6 0, #f7f9fb 32%, #edf2f6 100%)
}

.transfer-guide>.section-inner {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto
}

.guide-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 64px 58px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: radial-gradient(circle at 88% 12%, rgba(47, 182, 166, .22), transparent 30%), linear-gradient(135deg, var(--pg-dark) 0%, var(--pg-dark-2) 100%);
  box-shadow: var(--pg-shadow);
  color: #fff
}

.guide-hero:after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -110px;
  width: 290px;
  height: 290px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%
}

.guide-hero .eyebrow {
  color: #65d8cb
}

.guide-hero h1 {
  max-width: 900px;
  margin: 0 0 24px;
  font-size: clamp(2.7rem, 5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500
}

.guide-hero .lede {
  max-width: 880px;
  margin: 14px 0 0;
  color: #c7d0dc;
  font-size: 1.04rem;
  line-height: 1.8
}

.guide-jump {
  position: sticky;
  top: 12px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 34px;
  padding: 14px;
  border: 1px solid var(--pg-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 10px 30px rgba(17, 24, 39, .08);
  backdrop-filter: blur(10px)
}

.guide-jump a {
  padding: 10px 15px;
  border: 1px solid var(--pg-line);
  border-radius: 999px;
  background: #fff;
  color: var(--pg-text);
  font-size: .86rem;
  font-weight: 700;
  transition: .2s ease
}

.guide-jump a:hover {
  transform: translateY(-1px);
  border-color: var(--pg-accent);
  color: #17776d;
  background: var(--pg-accent-soft)
}

.guide-block,
.guide-conclusion {
  position: relative;
  margin: 0 0 28px;
  padding: 46px 52px;
  border: 1px solid var(--pg-line);
  border-radius: 20px;
  background: var(--pg-surface);
  box-shadow: 0 14px 36px rgba(17, 24, 39, .06)
}

.guide-block-soft {
  background: linear-gradient(180deg, #f9fbfc, #f4f7f8)
}

.guide-pixyport {
  border-color: rgba(47, 182, 166, .35);
  background: radial-gradient(circle at 100% 0, rgba(47, 182, 166, .12), transparent 30%), #fff
}

.guide-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 32px;
  padding: 0 12px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--pg-accent-soft);
  color: #17776d;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em
}

.guide-block h2,
.guide-conclusion h2 {
  margin: 0 0 20px;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  color: var(--pg-dark)
}

.guide-block h3 {
  margin: 34px 0 12px;
  font-size: 1.18rem;
  color: var(--pg-dark)
}

.guide-block p,
.guide-conclusion p,
.guide-block li {
  color: var(--pg-muted);
  line-height: 1.78
}

.guide-steps {
  counter-reset: step;
  display: grid;
  gap: 12px;
  margin: 24px 0 30px;
  padding: 0;
  list-style: none
}

.guide-steps li {
  position: relative;
  padding: 16px 18px 16px 58px;
  border: 1px solid var(--pg-line);
  border-radius: 12px;
  background: #fbfcfd
}

.guide-steps li:before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 15px;
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pg-dark);
  color: #fff;
  font-size: .75rem;
  font-weight: 800
}

.guide-info {
  margin-top: 28px;
  padding: 20px 22px;
  border-left: 4px solid var(--pg-orange);
  border-radius: 10px;
  background: #fff8e8;
  color: #5f512b;
  line-height: 1.7
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px
}

.problem-card {
  padding: 24px;
  border: 1px solid var(--pg-line);
  border-radius: 14px;
  background: #fff
}

.problem-card h3 {
  margin: 0 0 10px;
  font-size: 1.05rem
}

.folder-example {
  display: grid;
  gap: 7px;
  max-width: 560px;
  margin: 28px 0;
  padding: 24px 26px;
  border-radius: 14px;
  background: var(--pg-dark);
  color: #b8c4d4;
  font-family: Consolas, "Courier New", monospace;
  font-size: .9rem;
  box-shadow: 0 18px 34px rgba(17, 24, 39, .16)
}

.folder-example .folder-root {
  color: #65d8cb;
  font-weight: 800;
  margin-bottom: 3px
}

.guide-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none
}

.guide-checklist li {
  position: relative;
  padding: 15px 16px 15px 46px;
  border: 1px solid var(--pg-line);
  border-radius: 12px;
  background: #fff
}

.guide-checklist li:before {
  content: "✓";
  position: absolute;
  left: 16px;
  top: 14px;
  color: var(--pg-accent);
  font-weight: 900
}

.comparison-table-wrap {
  overflow: auto;
  margin-top: 24px;
  border: 1px solid var(--pg-line);
  border-radius: 14px;
  background: #fff
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px
}

.comparison-table th,
.comparison-table td {
  padding: 17px 18px;
  text-align: left;
  border-bottom: 1px solid var(--pg-line)
}

.comparison-table th {
  background: var(--pg-dark);
  color: #fff;
  font-size: .84rem
}

.comparison-table tr:last-child td {
  border-bottom: 0
}

.comparison-highlight td {
  background: var(--pg-accent-soft);
  font-weight: 700;
  color: #155f57
}

.faq-list {
  display: grid;
  gap: 12px;
  margin-top: 22px
}

.faq-list details {
  border: 1px solid var(--pg-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden
}

.faq-list summary {
  cursor: pointer;
  padding: 18px 20px;
  font-weight: 800;
  color: var(--pg-dark)
}

.faq-list details p {
  margin: 0;
  padding: 0 20px 20px
}

.guide-conclusion {
  text-align: center;
  background: radial-gradient(circle at 50% 0, rgba(47, 182, 166, .13), transparent 32%), #fff
}

.guide-conclusion p {
  max-width: 850px;
  margin: 14px auto 0
}

.guide-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px
}

.guide-actions .btn {
  display: inline-flex;
  min-height: 48px;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none
}

.guide-actions .btn-primary {
  background: var(--pg-dark);
  color: #fff
}

.guide-actions .btn-secondary {
  border: 1px solid var(--pg-line);
  background: #fff;
  color: var(--pg-dark)
}

@media(max-width:800px) {
  .guide-hero {
    padding: 44px 28px
  }

  .guide-block,
  .guide-conclusion {
    padding: 34px 26px
  }

  .problem-grid,
  .guide-checklist {
    grid-template-columns: 1fr
  }

  .guide-jump {
    position: static
  }

  .transfer-guide>.section-inner {
    width: min(100% - 24px, 1160px)
  }
}