.guide {
  height: 6rem;
  background: linear-gradient(271deg, #D841BE 0%, #AB5CFA 55%, #6DC6F3 100%);
}

.guide .container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.guide .container .row {
  height: 100%;
}

.guide .text {
  height: 100%;
  min-height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.guide .text p {
  font-size: 1.2rem;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 1.33333333rem;
}

.guide .text h6 {
  font-size: 0.8rem;
  font-weight: 300;
  color: #fff;

}

.guide .text .form-control {
  box-shadow: none;
  width: 21.33333333rem;
  height: 2.66666667rem;
  background: #FFFFFF;
  border-radius: 1.33333333rem;
  opacity: 1;
  font-size: 0.8rem;
  font-weight: 400;
  color: #969599;
}

.guide .text .form-control:focus {
  border-color: rgba(168, 58, 253, 0.6);
}

.guide .text .form-control::placeholder {
  color: #969599;
}

.guide .text #searchsubmit {
  width: 1.2rem;
  top: 28%;
  right: 10%;
}

.tutorials {
  min-height: 46.66666667rem;
  background: #040108;
  opacity: 1;
}

.tutorials .container {
  height: 100%;
  padding-top: 2rem;
}

.tutorials .container .title-bar {
  color: white;
}

.tutorials .container .title-bar .btn {
  --bs-btn-color: #FFFFFF;
}

.tutorials-btn-click {
  background: -webkit-linear-gradient(180deg, #6B41E3 0%, #01E3FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tutorials .container .title-bar .btn:hover {
  background: -webkit-linear-gradient(180deg, #6B41E3 0%, #01E3FB 100%);
  background-image: -webkit-linear-gradient(180deg, #6B41E3 0%, #01E3FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration-line:underline;
}

.tutorials .container .title-bar .text {
  font-size: 0.7rem;
  font-weight: 400;
  padding-bottom: 0.16rem;
  margin-left: 0.2rem;
  text-decoration-line:underline;
}

.tutorials .container .row .context .article-card {
  border-bottom: 1px solid;
}

.tutorials .container .row .context .article-first-img {
  max-height: 6rem;
  overflow: hidden;
}

.tutorials .container .row .context .article-text-link {
  position: relative;
  width: 100%;
}

.tutorials .container .row .context .article-text-link .mytooltip {
  position: absolute;
  width: 84%;
  left: 50%;
  top: 14%;
  padding: 0.1rem 0.6rem;
  background-color: #D9D9D9;
  color: #000;
  font-size: 0.6rem;
  z-index: 2;
  border-radius: 0.1rem;
  transition: all 0.2s ease-out;
}

.tutorials .container .row .context .article-text-link .hide-tooltip {
  opacity: 0 !important;
}

.tutorials .container .row .context .article-text-link .show-tooltip {
  opacity: 1 !important;
}

.tutorials .container .row .context .article-title-oneLine {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}

.tutorials .container .row .context .article-content-twoLine {
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.tutorials .container .row .context {
  height: auto;
  display: flex;
  justify-content: center;
}

.tutorials .container .row .context .outcard {
  margin-top: 2rem;
  border-radius: 30px 30px 30px 30px;
  display: flex;
  flex-direction: row;
  height: auto;
}

.tutorials .container .row .context .outcard .phonecat {
  flex: 0.4;
  background: #222129;
  border-radius: 30px 0px 0px 30px;
}

.tutorials .container .row .context .outcard .phoneno {
  flex: 0.6;
  background: #312F3B;
  border-radius: 0px 30px 30px 0px;
}

.tutorials .container .row .context .col-md-8,
.tutorials .container .row .context .col-md-4 {
  height: 100%;
  padding: 2rem 0 1.3rem 0;
}

.tutorials .container .row .context .col-md-4 {
  padding-left: 1.66666667rem;
}

.tutorials .container .row .context .col-md-4 .card {
  top: 3.33333333rem;
  position: sticky;
  margin-top: 4rem;
  margin-bottom: 4rem;
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 15px;
  padding: 1.33333333rem 0.93333333rem 2rem 1.46666667rem;
}

.tutorials .container .row .context .col-md-4 .card h3 {
  font-size: 1.06666667rem;
  font-weight: bold;
  color: #040108;
}

.tutorials .container .row .context .col-md-4 .card ul {
  padding-left: 0 !important;
}

.tutorials .container .row .context .col-md-4 .card ul li {
  margin-bottom: 1.33333333rem;
}

.tutorials .container .row .context .col-md-4 .card ul li span {
  font-size: 0.66666667rem;
  font-weight: bold;
  color: #040108;
}

.tutorials .container .row .context .col-md-4 .card ul li p {
  font-size: 0.53333333rem;
  font-weight: 400;
  color: #040108;
  line-height: 0.73333333rem;
}

.tutorials .container .row .context .col-md-4 .card ul li button {
  width: 8.26666667rem;
  height: 2rem;
  background: linear-gradient(90deg, #D125A8 0%, #4C5CF0 51%, #D125A8 100%);
  border-radius: 1.66666667rem;
  border: none;
  opacity: 1;
  background-size: 200% auto;
  font-size: 14px;
  font-weight: bold;
  transition: 0.5s;
  color: #FFFFFF;
  margin: 10px 0 0 30px;
}

.tutorials .container .row .context .col-md-4 .card ul li button:hover {
  background-position: right center;
}

.tutorials .notdis {
  display: none;
}

.tutorials .pageInfo {
  color: white;
  font-size: 0.8rem;
}

.tutorials .myPagination {
  width: 100%;
}

.tutorials .myPagination .myNav {
  background-color: #040108;
}

.tutorials .myPagination .myNav .pagination {
  --bs-pagination-color: black;
  --bs-pagination-bg: #D9D9D9;
  --bs-pagination-hover-color: black;
  --bs-pagination-hover-border-color: #bababa;
  --bs-pagination-hover-bg: #bababa;
  --bs-pagination-focus-color: #black;
  --bs-pagination-focus-bg: #680DFD;
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #680DFD;
  --bs-pagination-active-border-color: #000000;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgb(217 217 217 / 25%);
  --bs-pagination-disabled-color: black;
}

.tutorials .myPagination .myNav .myPage-item {
  margin-top: 0;
  margin-left: 0.5rem;
  height: fit-content;
  background: transparent;
}

.tutorials .myPagination .myNav .myPage-item-prev {
  background: transparent;
  margin-top: 0;
}

.tutorials .myPagination .myNav .myPage-item-next {
  background: transparent;
  margin-top: 0;
}

.tutorials .myPagination .myNav .myPage-link {
  padding: 0.15rem 0.6rem;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.tutorials .myPagination .myNav .myPage-link-prevNext {
  background: transparent;
  border: 0;
  --bs-pagination-color: white;
  --bs-pagination-hover-color: #D9D9D9;
  font-size: 0.8rem;
  line-height: 1.2rem;
  --bs-pagination-focus-box-shadow: 0 0 0 0;
}

.youtube {
  width: 8.26666667rem;
  height: 4.93333333rem;
}

.video-dis {
  display: none;
  width: 100%;
  height: 25rem;
  background-color: #FFFFFF;
  border-radius: 15px;
  padding: 1.33333333rem 0.93333333rem 2rem 1.46666667rem;
}

.video-dis h3 {
  font-size: 1.06666667rem;
  font-weight: bold;
  color: #040108;
}

.video-dis ul {
  height: 90%;
  padding-left: 0 !important;
}

.video-dis ul li {
  margin-bottom: 1.33333333rem;
}

.video-dis ul li span {
  font-size: 0.66666667rem;
  font-weight: bold;
  color: #040108;
}

.video-dis ul li p {
  font-size: 0.53333333rem;
  font-weight: 400;
  color: #040108;
  line-height: 0.73333333rem;
}

.video-dis ul li button {
  width: 8.26666667rem;
  height: 2rem;
  background: linear-gradient(90deg, #D125A8 0%, #4C5CF0 51%, #D125A8 100%);
  background-size: 200% auto;
  transition: 0.5s;
  border-radius: 1.66666667rem;
  border: none;
  opacity: 1;
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  margin: 10px 0 0 30px;
}

.video-dis ul li button:hover {
  background-position: right center;
}

.faq {
  background: #F5F5F5;
  padding: 2rem 0 3.66666667rem 0;
}

.faq h1 {
  font-size: 1.86666667rem;
  font-family: Segoe UI-Bold, Segoe UI;
  font-weight: bold;
  color: #181818;
  text-align: center;
}

.faq span {
  display: flex;
  align-items: center;
  height: 3.9rem;
  line-height: 3.9rem;
  background: #FFFFFF;
  padding-left: 0;
  border-radius: 0.7rem;
}

.faq span div::after {
  display: block;
  position: absolute;
  content: "";
  transform: rotate(45deg);
  width: 1rem;
  height: 1rem;
  top: calc(50% - 0.5rem);
  right: calc(0% - 0.5rem);
  background-color: #680DFD;
}

.faq span a {
  text-decoration: none;
  margin-left: 20px;
  font-size: 0.8rem;
  font-weight: 400;
  color: #040108;
  line-height: 1.33333333rem;
}

.faq ul {
  width: 100%;
  padding: 0 !important;
}

.faq ul li {
  list-style: none;
  height: 2rem;
  line-height: 2rem;
  background-color: #fff;
  margin-top: 5px;
  border-radius: 0.3rem;
}

.faq ul li a {
  text-decoration: none;
  font-size: 0.8rem;
  font-family: Segoe UI-Regular, Segoe UI;
  font-weight: 400;
  color: #040108;
  line-height: 1.33333333rem;
}

.faq ul li a::before {
  content: '';
  width: 6px;
  height: 6px;
  background-color: #000;
  display: inline-block;
  border-radius: 50%;
  margin: 3px;
  margin: 6px 22px;
}

.isp {
  background: #040108;
  padding: 1rem 0;
}

.isp .container,
.isp .row {
  padding: 0 2rem;
  width: 100%;
}

.isp h1 {
  font-size: 1.86666667rem;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
}

.isp ul li {
  height: 2rem;
  line-height: 2rem;
  list-style: disc;
  background: #fff;
  margin-top: 5px;
  list-style: none;
}

.isp ul li a {
  font-size: 0.6rem;
  font-weight: 600;
  color: #040108;
  text-decoration: none;
  padding-left: 20px;
}

.isp ul li .guidance {
  max-width: 98%;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}

.list li {
  height: 2.23333333rem;
  line-height: 2.23333333rem;
  background: #222129;
  border-radius: 10px;
  margin-top: 1rem;
  padding: 0 1.33333333rem;
}

.list li:hover {
  background: #5D5C66;
}

.list li:hover a {
  font-weight: bold;
  color: #FFFFFF;
}

.list li a {
  color: #fff !important;
  text-decoration: none;
  font-size: 0.66666667rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

@media screen and (max-width: 768px) {
  .tutorials .container .row .context .context-container {
    width: 100%;
  }
}

@media screen and (max-width: 576px) {
  .guide .row {
    width: 100% !important;
  }

  .guide .row .text {
    width: 100% !important;
  }

  .guide .row .text #s {
    width: 93% !important;
  }

  .guide .row .text #searchsubmit {
    right: 16% !important;
    transform: scale(0.8);
  }

  .tutorials .container .row .context .context-container {
    width: 80%;
    margin-left: 1rem;
  }



  .tutorials .container .row .context .article-first-img {
    max-height: 10rem;
  }

  .tutorials .container .row .context .article-title-oneLine {
    margin-top: 0.5em;
  }
    
  .tutorials .container .row .page .myPagination {
    width: 100% !important;
  }

  .video-dis ul li button {
    margin: 10px 0 0 0px !important;
  }

  .isp {
    padding: 0 !important;
  }

  .isp .container,
  .isp .row {
    padding: 10px 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .isp .row ul {
    padding: 0 !important;
    margin: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  .guide .text #searchsubmit {
    width: 2.5rem !important;
    height: 2.5rem !important;
    right: 7% !important;
    top: 7% !important;
  }

  .guide .text #s {
    width: 20.333333rem !important;
  }

  .tutorials {
    height: fit-content !important;
  }

  .tutorials .list {
    height: auto !important;
  }

  .tutorials .card {
    display: none;
  }

  .tutorials .container .row .page {
    justify-content: center !important;
  }

  .video-dis {
    display: block !important;
  }

  .faq {
    height: auto !important;
  }

  .faq ul {
    margin: auto;
    width: 100% !important;
  }

  .faq ul li {
    height: 3rem !important;
    line-height: 2.2rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

/* Guidance page: desktop-first layout matching the current design system. */
.guidance-hero {
  height: auto;
  min-height: 180px;
  background: #fff;
}

.guidance-hero .container,
.guidance-shortcuts .container,
.tutorials .container {
  width: calc(100% - 48px);
  max-width: 1320px;
}

.guidance-hero .container .row {
  justify-content: center;
}

.guidance-hero .text {
  min-height: 180px;
  text-align: center;
}

.guidance-hero .text h1 {
  margin: 0 0 10px;
  color: #181818;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.guidance-hero .text p {
  margin: 0;
  color: #666572;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.guidance-shortcuts {
  padding: 40px 0 72px;
  background: #fff;
}

.guidance-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
}

.guidance-shortcut {
  display: flex;
  min-height: 160px;
  padding: 28px 32px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #181818;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(241, 238, 255, 0.82));
  border: 1px solid rgba(205, 199, 234, 0.56);
  box-shadow: 0 10px 28px rgba(85, 77, 151, 0.06);
  border-radius: 14px;
}

.guidance-shortcut:hover {
  color: #181818;
  box-shadow: 0 8px 24px rgba(76, 92, 240, 0.12);
}

.guidance-shortcut-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.guidance-shortcut strong {
  font-size: 18px;
  line-height: 1.3;
}

.guidance-shortcut small {
  color: #666572;
  font-size: 13px;
  line-height: 1.45;
}

.guidance-shortcut em {
  margin-top: 6px;
  color: #7a62f0;
  font-size: 14px;
  font-style: normal;
}

.guidance-shortcut img {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}

.tutorials {
  min-height: 0;
  padding: 0 0 84px;
  background: #fff;
}

.tutorials .container {
  padding-top: 0;
}

.guidance-title {
  margin: 0 0 42px;
  color: #181818;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.tutorials .container > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "topics"
    "articles"
    "pagination";
  gap: 24px;
}

.tutorials .container .title-bar {
  grid-area: topics;
  align-self: start;
  color: #181818;
}

.guidance-topics-title {
  margin: 0 0 16px;
  color: #27242e;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.guidance-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  width: 100%;
}

.tutorials .container .title-bar .myBtn-radio {
  width: fit-content;
  min-height: 34px;
  margin: 0;
  padding: 7px 16px;
  color: #696570;
  background: #fff;
  border: 1px solid #e6e2ef !important;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-decoration: none;
}

.tutorials .container .title-bar .myBtn-radio.tutorials-btn-click,
.tutorials .container .title-bar .btn-check:checked + .myBtn-radio {
  color: #7e5eed;
  background: #f5f1ff;
  border-color: #efe7ff !important;
  -webkit-text-fill-color: currentColor;
}

.tutorials .container .row .context {
  grid-area: articles;
  display: block;
  width: 100%;
}

.tutorials .container .row .context .context-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.tutorials .container .row .context .article-card {
  display: block;
  width: 100%;
  min-height: 132px;
  margin: 0;
  padding: 22px 24px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(246, 244, 255, 0.84));
  border: 1px solid rgba(211, 207, 235, 0.7);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(85, 77, 151, 0.06);
}

.tutorials .container .row .context .article-first-img {
  display: none;
}

.tutorials .container .row .context .article-text {
  display: block !important;
  width: 100%;
  max-width: none;
  padding: 0;
}

.tutorials .container .row .context .article-text-link {
  display: block;
}

.tutorials .container .row .context .article-title-oneLine,
.tutorials .container .row .context .article-text-link h6 {
  margin: 6px 0 8px;
  color: #181818;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4;
  white-space: normal;
}

.tutorials .container .row .context .article-content-twoLine {
  margin: 0;
  color: #73717a !important;
  font-size: 13px !important;
  line-height: 1.5;
  -webkit-line-clamp: 3;
}

.tutorials .container .row .context .article-meta-line {
  margin-top: 12px;
  color: #9b98a4;
  font-size: 12px;
}

.tutorials .container .row .page {
  grid-area: pagination;
  justify-content: flex-start !important;
}

.tutorials .myPagination .myNav {
  background: transparent;
}

@media screen and (max-width: 768px) {
  .guidance-hero {
    min-height: 142px;
  }

  .guidance-hero .container,
  .guidance-shortcuts .container,
  .tutorials .container {
    width: calc(100% - 32px);
  }

  .guidance-hero .text {
    min-height: 142px;
  }

  .guidance-hero .text h1 {
    font-size: 24px;
  }

  .guidance-hero .text p {
    font-size: 13px;
  }

  .guidance-shortcuts {
    padding: 26px 0 52px;
  }

  .guidance-shortcuts-grid {
    gap: 14px;
  }

  .guidance-shortcut {
    min-height: 118px;
    padding: 18px;
  }

  .guidance-shortcut strong {
    font-size: 14px;
  }

  .guidance-shortcut small {
    display: none;
  }

  .guidance-shortcut img {
    width: 40px;
    height: 40px;
  }

  .guidance-title {
    margin-bottom: 26px;
    font-size: 24px;
  }

  .tutorials .container > .row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topics"
      "articles"
      "pagination";
    gap: 20px;
  }

  .guidance-topic-list {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .guidance-topic-list::-webkit-scrollbar {
    display: none;
  }

  .tutorials .container .title-bar .myBtn-radio {
    flex: 0 0 auto;
  }

  .tutorials .container .row .context .article-card {
    min-height: 0;
    padding: 18px !important;
  }
}

/* Figma Guidance page (324:10092). */
body:has(.guidance-page) {
  color: #181818;
  background: #fff;
  /* Keep Topics sticky against the viewport; overflow-x:hidden would make
     body a non-scrolling overflow container and disable sticky positioning. */
  overflow-x: clip;
}

body:has(.guidance-page) .redirect-bar {
  display: none !important;
  height: 0 !important;
}

body:has(.guidance-page) .header-menu,
body:has(.guidance-page) .header-menu nav {
  height: 84px;
}

.guidance-page,
.guidance-page * {
  box-sizing: border-box;
}

.guidance-page .guidance-hero {
  height: 370px;
  min-height: 370px;
  margin-top: -84px;
  background: linear-gradient(180deg, #f7f6ff 0%, #fff 127.28%);
}

.guidance-page .guidance-hero .container,
.guidance-page .guidance-shortcuts .container,
.guidance-page .tutorials .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.guidance-page .guidance-hero .row,
.guidance-page .guidance-hero .text {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}

.guidance-page .guidance-hero .text {
  padding-top: 84px;
  text-align: center;
}

.guidance-page .guidance-hero .text h1 {
  margin: 0 0 18px;
  color: #181818;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 68px;
}

.guidance-page .guidance-hero .text p {
  margin: 0;
  color: #666;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}

.guidance-page .guidance-shortcuts {
  padding: 40px 0;
  background: #fff;
}

/* 单张「Full Feature List」卡片，对齐设计稿 Feature card (567:9768)：
   浅紫底 #f8f7fe、圆角 20，图标 + 标题/描述 + 描边按钮，整卡为链接跳转 features 页。 */
.guidance-page .guidance-feature-card {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 1320px;
  max-width: calc(100% - 48px);
  height: 120px;
  margin: 0 auto;
  padding: 20px 50px;
  color: #181818;
  background: #f8f7fe;
  border-radius: 20px;
  text-decoration: none;
}

.guidance-page .guidance-feature-card:hover {
  color: #181818;
  background: #f4f2ff;
}

.guidance-shortcut-icon {
  position: relative;
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80px 80px;
}

.guidance-shortcut-list {
  background-image: url("../images/Guidance/icons/gradient/file-transfer.svg");
}

.guidance-shortcut-tv {
  background-image: url("../images/Guidance/icons/gradient/devices.svg");
}

.guidance-page .guidance-feature-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.guidance-page .guidance-feature-card strong {
  color: #181818;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.guidance-page .guidance-feature-card em {
  color: #666;
  font-size: 16px;
  font-weight: 350;
  font-style: normal;
  line-height: 22px;
}

.guidance-page .guidance-feature-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 12px 36px;
  color: #7a62f0;
  border: 1px solid #a22bf6;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  white-space: nowrap;
}

.guidance-page .tutorials {
  height: 1086px;
  min-height: 1086px;
  padding: 0;
  background: #fff;
}

.guidance-page .tutorials .container {
  height: 100%;
  padding-top: 40px;
}

.guidance-page .guidance-title {
  margin: 0;
  color: #181818;
  font-size: 38px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
}

.guidance-page .tutorials .container > .row {
  display: grid;
  grid-template-columns: 960px 320px;
  grid-template-areas: "articles topics";
  gap: 40px;
  width: 1320px;
  height: 876px;
  margin: 80px auto 0;
}

.guidance-page .tutorials .title-bar {
  grid-area: topics;
  width: 320px;
  padding: 0;
  /* Topics 侧栏随视窗浮动（与博客「On this page」一致）：粘性吸附在导航栏下方。
     align-self:start 让网格项按内容高度收缩，从而给 sticky 留出滚动空间。 */
  position: sticky;
  top: 104px;
  align-self: start;
}

.guidance-page .guidance-topics-title {
  /* 设计稿中「Topics」标题与首个 Tab 间距为 20px（坐标 y=32→52） */
  margin: 0 0 20px;
  color: #666;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.guidance-page .guidance-topic-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.guidance-page .tutorials .title-bar .myBtn-radio {
  display: flex;
  width: auto;
  /* 对齐设计稿 Tab 组件：Segoe UI Semibold 20/28，内边距 6/18 → 40px 高（原 24px/52px 偏大） */
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 6px 18px;
  align-items: center;
  justify-content: center;
  color: #666;
  background: transparent;
  border: 1px solid #ccc !important;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  text-decoration: none;
  white-space: nowrap;
}

/* 加 .myBtn-radio 把特异性提到 (0,4,0)，与 .tutorials .container .title-bar .text
   同级且声明在后，盖掉那条 text-decoration-line:underline，并让字号继承 label。 */
.guidance-page .guidance-topic-list .myBtn-radio .text {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
}

.guidance-page .tutorials .title-bar .myBtn-radio:hover,
.guidance-page .tutorials .title-bar .myBtn-radio.tutorials-btn-click,
.guidance-page .tutorials .title-bar .btn-check:checked + .myBtn-radio {
  color: #7a62f0;
  background: #f8f7fe;
  border-color: transparent !important;
  -webkit-text-fill-color: currentColor;
  /* 抵消 .tutorials .container .title-bar .btn:hover 的 text-decoration-line:underline，
     避免它在 hover 时把下划线画到 .text 子元素文本上。 */
  text-decoration: none;
}

.guidance-mobile-topic {
  display: none;
}

.guidance-page .tutorials .context {
  grid-area: articles;
  width: 960px;
  height: 876px;
  padding: 0 !important;
}

.guidance-page .tutorials .context-container {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 20px;
  list-style: none;
}

.guidance-page .tutorials .container .row .context .context-container {
  gap: 20px;
}

.guidance-page .tutorials .article-card {
  display: block;
  width: 960px;
  height: 204px;
  min-height: 204px;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}

/* 上面 (0,3,0) 的 background/border/radius/shadow 会被 (0,5,0) 的
   .tutorials .container .row .context .article-card 渐变规则盖掉。这里用同等路径
   提到 (0,6,0)，只覆盖这四个视觉属性 + padding，确保 Guidance 文章卡片纯白底 +
   设计稿指定的边框/圆角/阴影；width/height 仍交由原规则与响应式规则按上下文宽度
   控制，不被这条高特异性规则牵连。 */
.guidance-page .tutorials .container .row .context .article-card {
  padding: 0 !important;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}

.guidance-page .tutorials .container .row .context .article-text-link {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 20px 28px;
  flex-direction: column;
  gap: 16px;
  color: #181818;
  text-decoration: none;
}

.guidance-page .tutorials .container .row .context .article-topic {
  color: #7a62f0;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  text-transform: capitalize;
}

.guidance-page .tutorials .container .row .context .article-title-oneLine {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #000;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 26px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.guidance-page .tutorials .container .row .context .article-content-twoLine {
  display: -webkit-box;
  margin: -6px 0 0;
  overflow: hidden;
  color: #666 !important;
  font-size: 18px !important;
  font-weight: 300;
  line-height: 24px;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.guidance-page .tutorials .container .row .context .article-text-link time {
  margin-top: auto;
  color: #999;
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
}

.guidance-page .tutorials .page {
  display: none !important;
}

body:has(.guidance-page) footer {
  min-height: 458px;
}

@media (max-width: 1439.9px) {
  body:has(.guidance-page) .header-menu,
  body:has(.guidance-page) .header-menu nav {
    height: 74px;
  }

  .guidance-page .guidance-hero {
    height: 274px;
    min-height: 274px;
    margin-top: -74px;
  }

  .guidance-page .guidance-hero .text {
    padding-top: 74px;
  }

  .guidance-page .guidance-hero .text h1 {
    font-size: 40px;
  }

  .guidance-page .guidance-hero .text p {
    font-size: 20px;
  }

  .guidance-page .guidance-shortcuts {
    padding: 40px 0;
  }

  .guidance-page .guidance-feature-card {
    width: 864px;
    margin-right: 0;
    margin-left: max(80px, calc((100vw - 864px) / 2));
  }

  .guidance-page .tutorials {
    height: 1278px;
    min-height: 1278px;
  }

  .guidance-page .guidance-title {
    font-size: 32px;
    line-height: 42px;
  }

  .guidance-page .tutorials .container > .row {
    grid-template-columns: 554px 280px;
    gap: 30px;
    width: 864px;
    height: 1096px;
    margin: 72px 0 0 max(80px, calc((100vw - 864px) / 2));
  }

  .guidance-page .tutorials .context,
  .guidance-page .tutorials .article-card {
    width: 554px;
  }

  .guidance-page .tutorials .article-card {
    height: 254px;
    min-height: 254px;
  }

  .guidance-page .tutorials .context {
    height: 1076px;
  }

  .guidance-page .tutorials .container .row .context .article-title-oneLine {
    -webkit-line-clamp: 2;
  }

  .guidance-page .tutorials .container .row .context .article-content-twoLine {
    -webkit-line-clamp: 3;
  }

  body:has(.guidance-page) footer {
    min-height: 468px;
  }
}

@media (max-width: 768px) {
  body:has(.guidance-page) .header-menu,
  body:has(.guidance-page) .header-menu nav {
    height: 56px;
  }

  /* hero 用 margin-top 把自己拉到 sticky 头部之下，让渐变背景延伸到头部后面，
     所以 .text 的顶部内边距必须写成「头部高度 + 标题上方留白」。只写头部高度
     会把留白清零、标题紧贴头部。留白基准 44px，与 Send Files、首页等常规页
     的移动端间距一致。高度改由内容撑开（min-height 兜底渐变带的最小高度），
     避免加大内边距后标题溢出固定高度。 */
  .guidance-page .guidance-hero {
    height: auto;
    min-height: 202px;
    margin-top: -56px;
  }

  .guidance-page .guidance-hero .text {
    justify-content: flex-start;
    padding-top: 100px;
  }

  .guidance-page .guidance-hero .text h1 {
    margin-bottom: 12px;
    font-size: 32px;
    line-height: 42px;
  }

  .guidance-page .guidance-hero .text p {
    font-size: 16px;
    line-height: 24px;
  }

  .guidance-page .guidance-shortcuts {
    padding: 40px 0;
  }

  .guidance-page .guidance-feature-card {
    width: 688px;
    height: 104px;
    padding: 20px 22px;
    gap: 20px;
    margin-right: 0;
    margin-left: max(40px, calc((100vw - 688px) / 2));
  }

  .guidance-shortcut-icon {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
    background-size: 60px 60px;
  }

  .guidance-page .guidance-feature-btn {
    height: 46px;
    padding: 10px 24px;
  }

  .guidance-page .tutorials {
    height: 922px;
    min-height: 922px;
  }

  .guidance-page .tutorials .container {
    padding-top: 40px;
  }

  .guidance-page .guidance-title {
    font-size: 28px;
    line-height: 38px;
  }

  .guidance-page .tutorials .container > .row {
    position: relative;
    display: block;
    width: 688px;
    height: 720px;
    margin: 80px 0 0 max(40px, calc((100vw - 688px) / 2));
  }

  .guidance-page .tutorials .title-bar {
    width: 100%;
    height: 48px;
    /* 移动端顶部改用下拉选择器，取消粘性浮动。 */
    position: static;
  }

  .guidance-page .guidance-topics-title,
  .guidance-page .guidance-topic-list {
    display: none;
  }

  /* 窄屏 Topics 自定义下拉（设计稿 405-7037）：胶囊触发按钮 + 自绘弹出菜单，
     取代无法自定义展开样式的原生 <select>。 */
  .guidance-mobile-topic {
    display: block;
    position: relative;
    width: fit-content;
    margin-left: auto;
  }

  .guidance-mobile-topic__trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 8px 20px;
    color: #666;
    background: #e4e0fc;
    border: 0;
    border-radius: 99px;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    white-space: nowrap;
    cursor: pointer;
  }

  .guidance-mobile-topic__chevron {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
  }

  .guidance-mobile-topic.is-open .guidance-mobile-topic__chevron {
    transform: rotate(180deg);
  }

  .guidance-mobile-topic__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 180px;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background: #f8f7fe;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(85, 77, 151, 0.16);
  }

  .guidance-mobile-topic__menu[hidden] {
    display: none;
  }

  .guidance-mobile-topic__option {
    padding: 6px 20px;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
  }

  .guidance-mobile-topic__option:hover {
    background: rgba(228, 224, 252, 0.5);
  }

  .guidance-mobile-topic__option.is-selected {
    color: #7a62f0;
    font-weight: 600;
    background: #e4e0fc;
  }

  .guidance-page .tutorials .context {
    width: 688px;
    height: 652px;
    margin-top: 20px;
  }

  .guidance-page .tutorials .container .row .context .context-container {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .guidance-page .tutorials .article-card {
    width: 688px;
    height: 204px;
    min-height: 204px;
  }

  /* 不再隐藏第 4 张及以后的文章卡片：移动/平板端原先只展示 3 张（≤575 只 2 张）且分页
     也被隐藏，用户无法浏览其余文章。现与桌面端一致展示全部文章，页面随内容自然滚动。 */

  .guidance-page .tutorials .container .row .context .article-title-oneLine {
    -webkit-line-clamp: 1;
  }

  .guidance-page .tutorials .container .row .context .article-content-twoLine {
    -webkit-line-clamp: 2;
  }

  /* 页脚移动端随内容自适应：原写死 778/640/138px（设计稿帧高）远高于真实内容，
     导致页脚中间/底部出现大片空白。改为 auto，交由内容撑开。 */
  body:has(.guidance-page) footer {
    height: auto !important;
    overflow: visible;
  }
}

/* The tablet layout was authored against the 768px frame with fixed 688px
   content widths. Between 480px and 767px those values overflowed the viewport
   and squeezed the feature-card copy. Keep the 768px maximum, but let every
   Guidance content column shrink with the available width. */
@media (min-width: 480px) and (max-width: 768px) {
  .guidance-page .guidance-feature-card,
  .guidance-page .tutorials .container > .row {
    width: calc(100% - 48px);
    max-width: 688px;
    margin-right: auto;
    margin-left: auto;
  }

  .guidance-page .guidance-feature-card {
    height: auto;
    min-height: 104px;
  }

  .guidance-page .tutorials .container > .row {
    margin-top: clamp(48px, 10.4167vw, 80px);
  }

  .guidance-page .tutorials .context,
  .guidance-page .tutorials .article-card {
    width: 100%;
  }
}

@media (min-width: 480px) and (max-width: 575.98px) {
  .guidance-page .guidance-feature-btn {
    display: none;
  }
}

@media (max-width: 479.9px) {
  .guidance-page .guidance-hero {
    height: auto;
    min-height: 188px;
  }

  /* 同上：56px 抵消 margin-top:-56px，余下的 44px 才是标题上方真正的留白。 */
  .guidance-page .guidance-hero .text {
    padding: 100px 28px 0;
    justify-content: flex-start;
  }

  .guidance-page .guidance-hero .text h1 {
    max-width: 250px;
    margin: 0 auto 10px;
    font-size: 28px;
    line-height: 34px;
  }

  .guidance-page .guidance-hero .text p {
    font-size: 13px;
    line-height: 20px;
  }

  .guidance-page .guidance-shortcuts {
    height: auto;
    padding: 20px 0;
  }

  .guidance-page .guidance-feature-card {
    width: 320px;
    height: auto;
    min-height: 94px;
    padding: 20px 24px;
    gap: 16px;
    margin: 0 auto;
    border-radius: 16px;
  }

  .guidance-shortcut-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    background-size: 50px 50px;
  }

  .guidance-page .guidance-feature-copy {
    gap: 4px;
  }

  .guidance-page .guidance-feature-card strong {
    font-size: 18px;
    line-height: 24px;
  }

  .guidance-page .guidance-feature-card em {
    font-size: 14px;
    line-height: 20px;
  }

  .guidance-page .guidance-feature-btn {
    display: none;
  }

  .guidance-page .tutorials {
    height: 858px;
    min-height: 858px;
  }

  .guidance-page .tutorials .container {
    padding-top: 20px;
  }

  .guidance-page .guidance-title {
    font-size: 24px;
    line-height: 32px;
  }

  .guidance-page .tutorials .container > .row {
    width: 320px;
    height: 740px;
    margin: 40px auto 0;
  }

  .guidance-mobile-topic {
    width: fit-content;
  }

  .guidance-mobile-topic__trigger {
    height: 44px;
    padding: 8px 16px;
    gap: 8px;
    font-size: 20px;
    line-height: 28px;
  }

  .guidance-page .tutorials .context {
    width: 320px;
    height: 676px;
    margin-top: 20px;
  }

  .guidance-page .tutorials .context-container {
    gap: 20px;
  }

  .guidance-page .tutorials .article-card {
    width: 320px;
    height: 328px;
    min-height: 328px;
    border-radius: 20px;
  }

  /* 同上：≤575px 也展示全部文章，不再只保留 2 张。 */

  .guidance-page .tutorials .container .row .context .article-text-link {
    padding: 20px 28px;
    gap: 16px;
  }

  .guidance-page .tutorials .container .row .context .article-topic {
    font-size: 14px;
    line-height: 24px;
  }

  .guidance-page .tutorials .container .row .context .article-title-oneLine {
    font-size: 20px !important;
    line-height: 26px;
    -webkit-line-clamp: 3;
  }

  .guidance-page .tutorials .container .row .context .article-content-twoLine {
    margin-top: -6px;
    font-size: 18px !important;
    line-height: 24px;
    -webkit-line-clamp: 5;
  }

  .guidance-page .tutorials .container .row .context .article-text-link time {
    font-size: 14px;
    line-height: 24px;
  }

  body:has(.guidance-page) footer {
    height: auto !important;
    overflow: visible;
  }
}

/* ===== 正文高度自适应（修复固定像素高度导致文章列表溢出、盖住下载条/页脚的问题）=====
   设计稿按固定像素还原了各区块高度（.tutorials 1086px、.context 876px 等），但真实
   文章的数量与长度会变化——一旦内容比固定高度高，就会溢出容器并盖在其后的下载条与
   页脚上（见反馈截图）。这里统一放开这些容器的固定高度与 min-height，让页面高度随
   展示的文章自然撑开；正文结束后，下载悬浮条与页脚按正常文档流依次排在下方。
   （文章卡片本身仍保留各断点的固定高度以维持视觉一致，其标题/正文已用 line-clamp
   截断，不会超出卡片。）用 !important 是为了统一覆盖上面各断点里写死的高度。 */
.guidance-page .tutorials,
.guidance-page .tutorials .container,
.guidance-page .tutorials .container > .row,
.guidance-page .tutorials .context,
.guidance-page .tutorials .context-container {
  height: auto !important;
  min-height: 0 !important;
}