/* PKSaller — how page */
/* PKSaller — How to Order page */
.how-order-page {
    --ho-ink: #101820;
    --ho-teal: #00bfb5;
    --ho-teal-dark: #008f88;
    --ho-muted: #627078;
    --ho-border: #dce8e8;
    --ho-soft: #f2fbfa;
    color: var(--ho-ink);
    padding-bottom: 64px;
}
.how-order-page * { box-sizing: border-box; }
.ho-breadcrumb {
    background: linear-gradient(110deg, #101820, #17333a);
    color: #eafcfa;
    padding: 16px 0;
}
.ho-breadcrumb .container {
    display:flex; align-items:center; flex-wrap:wrap; gap:10px;
    font-size:13px;
}
.ho-breadcrumb a { color:#8ef5ec; text-decoration:none; }
.ho-breadcrumb a:hover { color:#fff; text-decoration:underline; }
.ho-breadcrumb .ho-separator { color:#87a3a6; }
.ho-hero {
    position:relative; overflow:hidden; isolation:isolate;
    padding: clamp(38px, 6vw, 76px) 22px;
    background:
      radial-gradient(circle at 90% 12%, rgba(0,214,201,.19), transparent 27%),
      radial-gradient(circle at 5% 100%, rgba(0,214,201,.12), transparent 32%),
      linear-gradient(135deg, #101820 0%, #172b32 62%, #103d40 100%);
    border-radius:0 0 30px 30px;
}
.ho-hero::after {
    content:""; position:absolute; z-index:-1; width:260px; height:260px;
    border:1px solid rgba(142,245,236,.2); border-radius:50%;
    right:-85px; bottom:-145px; box-shadow:0 0 0 26px rgba(142,245,236,.035),0 0 0 52px rgba(142,245,236,.025);
}
.ho-hero-inner { max-width:1120px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); gap:36px; align-items:center; }
.ho-eyebrow {
    display:inline-flex; align-items:center; gap:9px; padding:8px 13px;
    border:1px solid rgba(142,245,236,.28); border-radius:999px;
    color:#a7fff7; background:rgba(0,214,201,.08); font-size:12px;
    font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
}
.ho-eyebrow-dot { width:7px; height:7px; border-radius:50%; background:#00d6c9; box-shadow:0 0 0 5px rgba(0,214,201,.12); }
.ho-hero h1 { margin:20px 0 14px; color:#fff; font-size:clamp(34px,5vw,58px); line-height:1.08; letter-spacing:-1.5px; font-weight:850; }
.ho-hero h1 span { color:#00d6c9; }
.ho-hero-copy { max-width:600px; margin:0; color:#c3d4d7; font-size:16px; line-height:1.8; }
.ho-hero-points { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
.ho-hero-point { display:inline-flex; align-items:center; gap:8px; color:#f2fffe; font-size:13px; font-weight:650; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px 12px; }
.ho-hero-point svg { width:17px; height:17px; color:#00d6c9; flex:0 0 auto; }
.ho-hero-art { min-height:260px; display:flex; align-items:center; justify-content:center; position:relative; }
.ho-orbit { width:min(280px,72vw); aspect-ratio:1; border:1px solid rgba(142,245,236,.22); border-radius:50%; display:grid; place-items:center; position:relative; background:radial-gradient(circle,rgba(0,214,201,.13),rgba(0,214,201,.015) 65%,transparent 66%); }
.ho-orbit::before,.ho-orbit::after { content:""; position:absolute; inset:18px; border:1px dashed rgba(142,245,236,.2); border-radius:50%; }
.ho-orbit::after { inset:42px; border-style:solid; border-color:rgba(142,245,236,.13); }
.ho-orbit-core { width:112px; height:112px; display:grid; place-items:center; border-radius:32px; transform:rotate(-7deg); background:linear-gradient(145deg,#00d6c9,#008f88); color:#062629; box-shadow:0 20px 55px rgba(0,214,201,.24); }
.ho-orbit-core svg { width:55px; height:55px; transform:rotate(7deg); }
.ho-float-card { position:absolute; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:15px; color:#eafffd; background:#20383e; border:1px solid rgba(255,255,255,.13); box-shadow:0 12px 32px rgba(0,0,0,.22); font-size:12px; font-weight:750; }
.ho-float-card svg { width:21px; height:21px; color:#00d6c9; }
.ho-float-one { top:16%; left:-1%; }
.ho-float-two { bottom:12%; right:-1%; }
.ho-content-wrap { max-width:1120px; margin:0 auto; padding:0 22px; }
.ho-section-heading { text-align:center; max-width:650px; margin:58px auto 30px; }
.ho-section-kicker { color:var(--ho-teal-dark); text-transform:uppercase; letter-spacing:2px; font-size:11px; font-weight:850; }
.ho-section-heading h2 { margin:10px 0 10px; font-size:clamp(25px,3vw,36px); line-height:1.2; letter-spacing:-.7px; font-weight:850; }
.ho-section-heading p { margin:0; color:var(--ho-muted); font-size:15px; line-height:1.75; }
.ho-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.ho-step { position:relative; min-width:0; padding:25px 21px 24px; border:1px solid var(--ho-border); border-radius:20px; background:#fff; box-shadow:0 8px 28px rgba(16,24,32,.035); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.ho-step:hover { transform:translateY(-5px); border-color:rgba(0,191,181,.55); box-shadow:0 16px 35px rgba(16,24,32,.08); }
.ho-step-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:24px; }
.ho-step-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:17px; background:var(--ho-soft); color:var(--ho-teal-dark); }
.ho-step-icon svg { width:26px; height:26px; }
.ho-step-number { font-size:12px; font-weight:850; letter-spacing:1px; color:#8a9a9d; }
.ho-step h3 { margin:0 0 9px; font-size:18px; line-height:1.35; font-weight:800; }
.ho-step p { margin:0; color:var(--ho-muted); font-size:14px; line-height:1.75; }
.ho-info-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-top:24px; }
.ho-info-card { border-radius:22px; padding:27px; border:1px solid var(--ho-border); background:#fff; }
.ho-info-card-dark { color:#eafcfa; border-color:#1c3b40; background:linear-gradient(135deg,#101820,#173b3d); }
.ho-info-card h3 { margin:0 0 12px; font-size:20px; font-weight:850; }
.ho-info-card p { margin:0; color:var(--ho-muted); font-size:14px; line-height:1.8; }
.ho-info-card-dark p { color:#c1d4d5; }
.ho-info-list { list-style:none; padding:0; margin:17px 0 0; display:grid; gap:12px; }
.ho-info-list li { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.65; color:#eafcfa; }
.ho-info-list svg { width:18px; height:18px; color:#00d6c9; flex:0 0 auto; margin-top:2px; }
.ho-info-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; color:#007f79; background:#e6fbf9; font-size:12px; font-weight:800; margin-bottom:14px; }
.ho-existing-content { margin-top:28px; border:1px solid var(--ho-border); border-radius:22px; padding:clamp(20px,4vw,34px); background:#f9fcfc; }
.ho-existing-content-heading { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.ho-existing-content-heading-icon { flex:0 0 auto; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:var(--ho-teal-dark); background:#e4f9f7; }
.ho-existing-content-heading-icon svg { width:22px; height:22px; }
.ho-existing-content h2 { font-size:21px; margin:0; line-height:1.3; font-weight:850; }
.ho-existing-copy { color:#34464b; font-size:15px; line-height:1.9; overflow-wrap:anywhere; }
.ho-existing-copy p { margin:0 0 14px; }
.ho-existing-copy p:last-child { margin-bottom:0; }
.ho-existing-copy img { max-width:100%; height:auto; }
.ho-existing-copy ul,.ho-existing-copy ol { padding-left:24px; margin:12px 0; }
.ho-existing-copy li { margin-bottom:7px; }
.ho-help-banner { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-top:26px; padding:24px 27px; border-radius:20px; background:linear-gradient(110deg,#dffaf7,#f4fcfb); border:1px solid #c8f0ed; }
.ho-help-banner h3 { margin:0 0 5px; font-size:19px; font-weight:850; }
.ho-help-banner p { margin:0; color:#52686c; font-size:14px; line-height:1.7; }
.ho-help-cta { flex:0 0 auto; display:inline-flex; justify-content:center; align-items:center; gap:9px; padding:13px 18px; border-radius:12px; color:#fff!important; background:#101820; text-decoration:none!important; font-size:13px; font-weight:800; transition:background .2s,transform .2s; }
.ho-help-cta:hover { background:#008f88; transform:translateY(-2px); }
.ho-help-cta svg { width:17px; height:17px; }
@media (max-width:900px) {
    .ho-hero-inner { grid-template-columns:minmax(0,1fr) 270px; gap:18px; }
    .ho-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:650px) {
    .how-order-page { padding-bottom:38px; }
    .ho-breadcrumb { padding:13px 0; }
    .ho-breadcrumb .container { font-size:12px; gap:8px; }
    .ho-hero { padding:36px 18px 30px; border-radius:0 0 22px 22px; }
    .ho-hero-inner { grid-template-columns:1fr; gap:8px; }
    .ho-hero h1 { margin-top:17px; font-size:37px; letter-spacing:-1px; }
    .ho-hero-copy { font-size:14px; }
    .ho-hero-points { gap:8px; margin-top:19px; }
    .ho-hero-point { font-size:11px; padding:9px 10px; }
    .ho-hero-art { min-height:205px; margin-top:5px; }
    .ho-orbit { width:205px; }
    .ho-orbit-core { width:88px; height:88px; border-radius:25px; }
    .ho-orbit-core svg { width:43px; height:43px; }
    .ho-float-one { left:0; top:13%; }
    .ho-float-two { right:0; bottom:8%; }
    .ho-float-card { padding:9px 10px; font-size:10px; }
    .ho-float-card svg { width:18px; height:18px; }
    .ho-content-wrap { padding:0 16px; }
    .ho-section-heading { margin:38px auto 22px; }
    .ho-section-heading h2 { font-size:27px; }
    .ho-section-heading p { font-size:14px; }
    .ho-steps { gap:11px; }
    .ho-step { padding:17px 15px; border-radius:16px; }
    .ho-step-top { margin-bottom:17px; }
    .ho-step-icon { width:45px; height:45px; border-radius:14px; }
    .ho-step-icon svg { width:23px; height:23px; }
    .ho-step h3 { font-size:15px; }
    .ho-step p { font-size:12px; line-height:1.7; }
    .ho-info-grid { grid-template-columns:1fr; gap:12px; margin-top:16px; }
    .ho-info-card { padding:22px; border-radius:18px; }
    .ho-info-card h3 { font-size:18px; }
    .ho-existing-content { margin-top:18px; padding:20px 17px; border-radius:17px; }
    .ho-existing-content h2 { font-size:18px; }
    .ho-existing-copy { font-size:14px; }
    .ho-help-banner { flex-direction:column; align-items:stretch; padding:21px; gap:16px; }
    .ho-help-banner h3 { font-size:18px; }
    .ho-help-cta { width:100%; }
}
@media (max-width:380px) {
    .ho-steps { grid-template-columns:1fr; }
    .ho-step { padding:20px; }
    .ho-step-top { margin-bottom:15px; }
    .ho-step h3 { font-size:17px; }
    .ho-step p { font-size:13px; }
    .ho-hero h1 { font-size:33px; }
}
@media (prefers-reduced-motion:reduce) {
    .ho-step,.ho-help-cta { transition:none; }
}