/* Reference-inspired presentation; the original section copy stays in the HTML. */
.tghow928-section {
   padding: 76px 0 84px;
   background: radial-gradient(ellipse at 0 22%, #f0f7ff 0, transparent 28%),
      radial-gradient(ellipse at 100% 85%, #fff5f1 0, transparent 23%), #fff;
   counter-reset: how-step;
}

.tghow928-section .tghow928-grid { opacity: .05; }
.tghow928-section .tghow928-orb { opacity: .35; }
.tghow928-section .tghow928-header { margin-bottom: 64px; }
.tghow928-section .tghow928-eyebrow {
   display: inline-flex;
   gap: 9px;
   padding: 8px 15px;
   border: 1px solid #d8e1ff;
   border-radius: 100px;
   background: #fbfcff;
   margin-bottom: 20px;
}
.tghow928-section .tghow928-eyebrow-line { display: none; }
.tghow928-section .tghow928-eyebrow-icon { color: #8576ff; font-size: 12px; }
.tghow928-section .tghow928-eyebrow-text { font-size: 11px; letter-spacing: 1.2px; }
.tghow928-section .tghow928-title {
   font-size: clamp(30px, 3.6vw, 48px);
   line-height: 1.15;
   letter-spacing: -1.6px;
   color: #0b1930;
}
.tghow928-section .tghow928-title > strong {
   color: #087dff;
   margin-top: 8px;
}
.tghow928-section .tghow928-header-note { margin-top: 22px; box-shadow: none; }

.tghow928-section .tghow928-step {
   counter-increment: how-step;
   max-width: 1140px;
   padding: 12px 0;
}
.tghow928-section .tghow928-media { padding: 14px 12px 24px; }
.tghow928-section .tghow928-screen {
   padding: 8px;
   border: 1px solid transparent;
   border-radius: 20px;
   background: linear-gradient(#fff, #fff) padding-box,
      linear-gradient(130deg, #a7ccff, #d0c2ff, #eadce2) border-box;
   box-shadow: 0 18px 35px rgba(26, 51, 88, .1), 0 3px 8px rgba(26, 51, 88, .05);
}
.tghow928-section .tghow928-screen-top {
   min-height: 28px;
   padding: 0 8px 6px;
   background: #fff;
   border: 0;
}
.tghow928-section .tghow928-screen-label { font-size: 9px; letter-spacing: 1px; }
.tghow928-section .tghow928-dots span { width: 5px; height: 5px; }
.tghow928-section .tghow928-image-wrap { padding: 0; }
.tghow928-section .tghow928-step-image { border-radius: 12px; height: auto; }
.tghow928-section .tghow928-number { display: none; }
.tghow928-section .tghow928-float-icon {
   width: 38px;
   height: 38px;
   border-width: 3px;
   border-radius: 11px;
   top: 0;
   left: 0;
   right: auto;
   bottom: auto;
   font-size: 17px;
}
.tghow928-section .tghow928-mini-chip {
   left: auto;
   right: 22px;
   bottom: 7px;
   padding: 8px 12px;
   font-size: 10px;
   border-radius: 8px;
   box-shadow: 0 5px 14px rgba(26, 51, 88, .09);
}
.tghow928-section .tghow928-mini-chip i { color: #20be95; }

.tghow928-section .tghow928-content {
   max-width: none;
   padding: 32px;
   border: 1px solid #dde5f4;
   border-radius: 20px;
   background: linear-gradient(135deg, #fbfdff, #fff);
   box-shadow: 0 16px 38px rgba(26, 51, 88, .07);
   overflow: hidden;
}
.tghow928-section .tghow928-content::before {
   content: "";
   position: absolute;
   inset: 0 0 auto;
   height: 2px;
   background: linear-gradient(90deg, #418bff, #8d65ff 55%, #ff819a);
}
.tghow928-section .tghow928-content::after {
   content: counter(how-step, decimal-leading-zero);
   position: absolute;
   top: 22px;
   right: 25px;
   color: #e6ebf5;
   font-size: 44px;
   font-weight: 900;
   line-height: 1;
   pointer-events: none;
}
.tghow928-section .tghow928-step-label { margin-bottom: 20px; padding-right: 55px; }
.tghow928-section .tghow928-step-label span {
   padding: 6px 10px;
   color: #4c78d9;
   background: #f2f6ff;
   border: 1px solid #d9e4ff;
   border-radius: 100px;
   box-shadow: none;
   font-size: 10px;
}
.tghow928-section .tghow928-content h3 {
   color: #087dff;
   font-size: clamp(27px, 2.7vw, 37px);
   line-height: 1.15;
   letter-spacing: -1px;
}
.tghow928-section .tghow928-content h3 span {
   color: #087dff;
   background: none;
   -webkit-text-fill-color: currentColor;
}
.tghow928-section .tghow928-rule { height: 1px; width: 100%; margin: 18px 0; background: #e5ebf5; box-shadow: none; }
.tghow928-section .tghow928-content > p { color: #34435c; font-size: 16px; line-height: 1.75; }
.tghow928-section .tghow928-highlight,
.tghow928-section .tghow928-bottom-strip {
   border: 0;
   border-top: 1px solid #e5ebf5;
   border-radius: 0;
   padding: 16px 0 0;
   background: none;
   box-shadow: none;
   margin-top: 20px;
}
.tghow928-section .tghow928-highlight-icon {
   color: #19a786;
   background: #eafaf4;
   box-shadow: none;
   width: 32px;
   height: 32px;
   min-width: 32px;
   font-size: 15px;
}
.tghow928-section .tghow928-tags span,
.tghow928-section .tghow928-feature,
.tghow928-section .tghow928-payment-item { background: #f8faff; box-shadow: none; border-color: #e5ebf5; }

.tghow928-section .gmehow26-connector {
   width: 60%;
   height: 90px;
   margin: 10px auto;
   border-top: 1px dashed #d7e2f6;
   border-radius: 50%;
   transform: rotate(8deg);
}
.tghow928-section .gmehow26-connector img { display: none; }
.tghow928-section .gmehow26-connector::after {
   content: "+";
   position: absolute;
   top: -15px;
   left: calc(50% - 14px);
   width: 28px;
   height: 28px;
   display: grid;
   place-items: center;
   background: #fff;
   border: 1px solid #e5ebf5;
   border-radius: 50%;
   color: #7485ec;
   box-shadow: 0 4px 12px #e7edf7;
}
.tghow928-section .tghow928-step-2 + .gmehow26-connector { transform: rotate(-8deg); }
.tghow928-section .tghow928-closing {
   margin-top: 56px;
   padding: 24px 28px;
   border-radius: 16px;
   border-color: #d9e2fa;
   background: linear-gradient(110deg, #f3f7ff, #fffaf8);
   box-shadow: 0 12px 30px rgba(26, 51, 88, .07);
}
.tghow928-section .tghow928-closing-icon { width: 46px; height: 46px; min-width: 46px; border-radius: 12px; font-size: 23px; }
.tghow928-section .tghow928-closing-copy h3 { font-size: 21px; line-height: 1.5; letter-spacing: -.4px; }

@media (max-width: 991px) {
   .tghow928-section { padding: 55px 0; }
   .tghow928-section .tghow928-header { margin-bottom: 36px; }
   .tghow928-section .tghow928-step { margin-bottom: 40px; }
   .tghow928-section .tghow928-media { max-width: 580px; }
   .tghow928-section .tghow928-content { max-width: 580px; margin: auto; }
   .tghow928-section .tghow928-closing { margin-top: 12px; }
}
@media (max-width: 575px) {
   .tghow928-section .tghow928-content { padding: 25px 20px; border-radius: 16px; }
   .tghow928-section .tghow928-content > p { font-size: 15px; }
   .tghow928-section .tghow928-eyebrow { gap: 6px; padding: 8px 10px; }
   .tghow928-section .tghow928-eyebrow-text { font-size: 9px; letter-spacing: .6px; }
   .tghow928-section .tghow928-closing { padding: 20px; gap: 14px; }
   .tghow928-section .tghow928-closing-copy h3 { font-size: 18px; }
}