:root {
            --green-900: #264716;
            --green-800: #355d20;
            --green-700: #4f7429;
            --green-100: #edf3e7;
            --green-050: #f6f9f3;
            --blue: #087fbd;
            --ink: #213027;
            --muted: #647168;
            --line: #dce5dc;
            --paper: #ffffff;
            --canvas: #eef2ed;
            --shadow: 0 18px 55px rgba(30, 57, 25, .10);
        }

        .network-grid,
        .steps {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 22px;
            margin-top: 28px;
        }

        .network-name {
            display: inline-block;
            margin: 10px 0 12px;
            color: var(--green-800);
            font-size: 22px;
            font-weight: 800;
        }

        .warning {
            margin-top: 24px;
            padding: 17px 19px;
            color: #4d5b51;
            background: #fff8df;
            border-left: 4px solid #f4b400;
            border-radius: 0 12px 12px 0;
            font-size: 15px;
        }

        .step-card {
            display: grid;
            grid-template-rows: auto auto 1fr;
            min-width: 0;
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: 0 8px 28px rgba(39, 69, 28, .07);
        }

        .step-image {
            display: block;
            width: min(100%, 300px);
            height: auto;
            background: #fff;
            border-radius: 9px;
            box-shadow: 0 8px 22px rgba(22, 38, 20, .10);
        }

        * { box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            margin: 0;
            background:
                radial-gradient(circle at 8% 0%, rgba(79, 116, 41, .10), transparent 28rem),
                var(--canvas);
            color: var(--ink);
            font-family: Calibri, "Segoe UI", Arial, sans-serif;
            font-size: 17px;
            line-height: 1.6;
        }

        a { color: var(--green-800); }
        a:hover { color: var(--green-900); }

        .page {
            width: min(1120px, calc(100% - 32px));
            margin: 32px auto;
            overflow: hidden;
            background: var(--paper);
            border: 1px solid rgba(53, 93, 32, .14);
            border-radius: 22px;
            box-shadow: var(--shadow);
        }

        .hero {
            position: relative;
            display: grid;
            grid-template-columns: 150px 1fr;
            gap: 34px;
            align-items: center;
            min-height: 300px;
            padding: 48px 64px;
            overflow: hidden;
            background: linear-gradient(125deg, var(--green-900), var(--green-700));
            color: #fff;
        }

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

        .logo-wrap {
            position: relative;
            z-index: 1;
            display: grid;
            place-items: center;
            min-height: 174px;
            padding: 0;
            background: transparent;
        }

        .logo-left {
            display: block;
            width: 100%;
            max-height: 174px;
            object-fit: contain;
            filter: drop-shadow(0 5px 12px rgba(18, 36, 12, .24));
        }

        .hero-copy { position: relative; z-index: 1; }

        .eyebrow {
            margin: 0 0 8px;
            color: #dce9d3;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
        }

        h1 {
            max-width: 760px;
            margin: 0;
            font-size: clamp(36px, 5vw, 58px);
            line-height: 1.04;
            letter-spacing: -.035em;
        }

        .subtitle {
            max-width: 670px;
            margin: 18px 0 0;
            color: #f1f6ed;
            font-size: 20px;
        }

        .quick-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 18px 64px;
            background: var(--green-050);
            border-bottom: 1px solid var(--line);
        }

        .quick-nav a {
            padding: 7px 13px;
            color: var(--green-900);
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 999px;
        }

        main { padding: 20px 64px 64px; }

        .section {
            padding-top: 42px;
            scroll-margin-top: 16px;
        }

        .section + .section {
            margin-top: 44px;
            border-top: 1px solid var(--line);
        }

        .section-label {
            margin: 0 0 5px;
            color: var(--green-700);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        h2 {
            margin: 0 0 14px;
            color: var(--green-900);
            font-size: clamp(28px, 3.4vw, 40px);
            line-height: 1.15;
            letter-spacing: -.02em;
        }

        h3 {
            margin: 0;
            color: var(--green-900);
            font-size: 21px;
            line-height: 1.25;
        }

        p { margin: 0 0 16px; }

        .lead {
            max-width: 820px;
            color: var(--muted);
            font-size: 19px;
        }

        .web-grid {
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: 22px;
            margin-top: 28px;
        }

        .info-card,
        .callout {
            padding: 24px;
            background: var(--green-050);
            border: 1px solid var(--line);
            border-radius: 16px;
        }

        .portal-link {
            display: block;
            margin: 12px 0 18px;
            overflow-wrap: anywhere;
            font-size: 19px;
            font-weight: 800;
        }

        .check-list {
            display: grid;
            gap: 11px;
            margin: 14px 0 0;
            padding: 0;
            list-style: none;
        }

        .check-list li {
            position: relative;
            padding-left: 29px;
        }

        .check-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 1px;
            display: grid;
            place-items: center;
            width: 20px;
            height: 20px;
            color: #fff;
            background: var(--green-700);
            border-radius: 50%;
            font-size: 12px;
            font-weight: 900;
        }

        .download-strip {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 18px;
            align-items: start;
            margin: 28px 0 22px;
            padding: 20px 22px;
            background: linear-gradient(110deg, var(--green-100), #f8faf6);
            border: 1px solid var(--line);
            border-radius: 16px;
        }

        .download-strip .number {
            display: grid;
            place-items: center;
            width: 52px;
            height: 52px;
            color: #fff;
            background: var(--green-800);
            border-radius: 14px;
            font-size: 15px;
            font-weight: 800;
        }

        .download-strip p { margin: 5px 0 0; }

        .store-links {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
            margin-top: 17px;
        }

        .store-link {
            display: inline-flex;
            align-items: center;
            min-height: 54px;
            transition: transform .18s ease, filter .18s ease;
        }

        .store-link:hover {
            transform: translateY(-2px);
            filter: drop-shadow(0 7px 9px rgba(31, 53, 24, .18));
        }

        .store-link:focus-visible {
            outline: 3px solid var(--blue);
            outline-offset: 4px;
            border-radius: 7px;
        }

        .store-badge {
            display: block;
            width: auto;
            height: 54px;
        }

        .sg-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 22px;
        }

        .sg-step-card {
            display: grid;
            grid-template-rows: auto auto 1fr;
            min-width: 0;
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: 0 8px 28px rgba(39, 69, 28, .07);
        }

        .step-copy { padding: 23px 24px 18px; }

        .step-head {
            display: flex;
            gap: 13px;
            align-items: center;
            margin-bottom: 9px;
        }

        .step-number {
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            min-width: 43px;
            height: 43px;
            padding: 0 9px;
            color: #fff;
            background: var(--green-800);
            border-radius: 12px;
            font-size: 14px;
            font-weight: 800;
        }

        .step-copy p {
            margin: 0;
            color: var(--muted);
            font-size: 15.5px;
            line-height: 1.48;
        }

        .image-frame {
            display: grid;
            place-items: start center;
            margin: 0 18px 18px;
            padding: 14px;
            overflow: hidden;
            background: #f4f6f4;
            border: 1px solid #e7ece7;
            border-radius: 14px;
        }

        .shot-wrap {
            position: relative;
            width: min(100%, 300px);
            overflow: hidden;
            background: #fff;
            border-radius: 9px;
            box-shadow: 0 8px 22px rgba(22, 38, 20, .10);
        }

        .sg-step-img {
            display: block;
            width: 100%;
            height: auto;
            background: #fff;
        }

        .focus-ring {
            position: absolute;
            z-index: 2;
            pointer-events: none;
            border: 4px solid #f4b400;
            border-radius: 10px;
            background: rgba(255, 215, 64, .12);
            box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 4px 18px rgba(70, 48, 0, .24);
        }

        .focus-ring::after {
            content: attr(data-label);
            position: absolute;
            left: -4px;
            bottom: calc(100% + 7px);
            padding: 5px 9px;
            white-space: nowrap;
            color: #382900;
            background: #ffd54f;
            border-radius: 7px;
            font-size: 12px;
            font-weight: 900;
            line-height: 1;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
        }

        .focus-ring.label-below::after {
            top: calc(100% + 7px);
            bottom: auto;
        }

        .focus-settings { left: 49%; top: 9.6%; width: 49%; height: 8.8%; }
        .focus-qr { left: 49.8%; top: 82.2%; width: 46.6%; height: 5.9%; }
        .focus-values { left: 3.8%; top: 35.8%; width: 92.5%; height: 14.8%; }
        .focus-save { left: 5.5%; top: 89.1%; width: 89%; height: 5.3%; }
        .focus-confirm { left: 7%; top: 39.1%; width: 86%; height: 20.1%; }
        .focus-credentials { left: 3.8%; top: 29.5%; width: 92.5%; height: 14.5%; }
        .focus-login { left: 4%; top: 72.2%; width: 92%; height: 5.5%; }

        .note {
            margin-top: 24px;
            padding: 17px 19px;
            color: #4d5b51;
            background: #f7f8f6;
            border-left: 4px solid var(--green-700);
            border-radius: 0 12px 12px 0;
            font-size: 15px;
        }

        .manual-box {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 28px;
            align-items: center;
            margin-top: 26px;
            padding: 28px;
            color: #fff;
            background: linear-gradient(130deg, #203f15, var(--green-800));
            border-radius: 18px;
        }

        .manual-box h3 { margin-bottom: 10px; color: #fff; }
        .manual-box p { margin: 0; color: #dfe9da; }

        .parameters {
            display: grid;
            gap: 12px;
            margin: 0;
        }

        .parameter {
            padding: 15px 17px;
            color: var(--ink);
            background: #fff;
            border-radius: 12px;
        }

        .parameter dt {
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .parameter dd {
            margin: 3px 0 0;
            overflow-wrap: anywhere;
            font-weight: 800;
        }

        .footer {
            display: flex;
            justify-content: space-between;
            gap: 24px;
            padding: 24px 64px;
            color: #dce9d6;
            background: #1f3518;
            font-size: 14px;
        }

        .footer strong { color: #fff; }

        @media (max-width: 780px) {
            body { font-size: 16px; }
            .page { width: 100%; margin: 0; border: 0; border-radius: 0; }
            .hero { grid-template-columns: 92px 1fr; gap: 20px; min-height: 0; padding: 34px 24px; }
            .logo-wrap { min-height: 112px; padding: 0; }
            .logo-left { max-height: 112px; }
            .subtitle { font-size: 17px; }
            .quick-nav { padding: 14px 24px; }
            main { padding: 8px 24px 44px; }
            .section { padding-top: 34px; }
            .web-grid, .manual-box,
            .network-grid, .steps, .sg-grid { grid-template-columns: 1fr; }
            .footer { flex-direction: column; padding: 22px 24px; }
        }

        @media (max-width: 500px) {
            .hero { grid-template-columns: 1fr; }
            .logo-wrap { width: 112px; min-height: 132px; }
            h1 { font-size: 36px; }
            .download-strip { grid-template-columns: 1fr; }
        }

        @media print {
            body { background: #fff; }
            .page { width: 100%; margin: 0; border: 0; box-shadow: none; }
            .hero, .manual-box, .footer { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
            .quick-nav { display: none; }
            .sg-step-card { break-inside: avoid; }
        }
		
		.back-to-top {
		  position: fixed;
		  right: 12px;
		  bottom: 24px;
		  z-index: 999;
		  display: flex;
		  align-items: center;
		  justify-content: flex-start;
		  gap: 10px;
		  width: 54px;
		  height: 54px;
		  padding: 0 15px;
		  overflow: hidden;
		  white-space: nowrap;
		  color: #fff;
		  background: rgba(0, 105, 217, .78);
		  border: 1px solid rgba(255, 255, 255, .72);
		  border-radius: 50px;
		  backdrop-filter: blur(3px);
		  -webkit-backdrop-filter: blur(3px);
		  box-shadow: 0 4px 14px rgba(0, 52, 108, .28);
		  cursor: pointer;
		  opacity: 0;
		  visibility: hidden;
		  transform: translateY(14px) scale(.92);
		  transition: width .3s ease, background-color .2s ease, opacity .22s ease, transform .22s ease, visibility .22s;
		}

		.back-to-top.is-visible {
		  opacity: 1;
		  visibility: visible;
		  transform: translateY(0) scale(1);
		}

		.back-to-top:hover,
		.back-to-top:focus-visible {
		  width: 182px;
		  background: rgba(0, 105, 217, .94);
		  transform: translateY(-2px) scale(1);
		}

		.back-to-top:focus-visible {
		  outline: 3px solid #f4b400;
		  outline-offset: 4px;
		}

		.back-to-top-icon {
		  flex: 0 0 22px;
		  width: 22px;
		  font-size: 20px;
		  line-height: 1;
		  text-align: center;
		}

		.back-to-top-label {
		  opacity: 0;
		  font-size: 15px;
		  font-weight: 700;
		  letter-spacing: .01em;
		  transition: opacity .18s ease .08s;
		}

		.back-to-top:hover .back-to-top-label,
		.back-to-top:focus-visible .back-to-top-label {
		  opacity: 1;
		}

		@media (max-width: 780px) {
		  .back-to-top {
			right: 8px;
			bottom: 18px;
			width: 50px;
			height: 50px;
			padding: 0 13px;
		  }
		}

		@media print {
		  .back-to-top { display: none; }
		}