.ug-page {--ug-ch: var(--color-primary);--ug-ch-deep: var(--color-primary-dark);--ug-ch-bg: #eff6ff;max-width: 1080px;margin: 0 auto;padding: 0 0 56px}
.ug-before { --ug-ch: #0891b2; --ug-ch-deep: #0e7490; --ug-ch-bg: #ecfeff; }
.ug-day    { --ug-ch: #2563eb; --ug-ch-deep: #1d4ed8; --ug-ch-bg: #eff6ff; }
.ug-after  { --ug-ch: #d97706; --ug-ch-deep: #b45309; --ug-ch-bg: #fffbeb; }
.ug-hero {position: relative;margin: 12px 12px 0;padding: 34px 20px 30px;border-radius: var(--radius-lg);color: #fff;overflow: hidden;text-align: center;background:
radial-gradient(120% 90% at 12% -15%, rgba(125, 211, 252, 0.4), transparent 55%),
linear-gradient(165deg, #0e7490 0%, #0284c7 45%, #1d4ed8 100%)}
.ug-hero-inner {position: relative;z-index: 2;max-width: 620px;margin: 0 auto}
.ug-hero-badge {display: inline-flex;align-items: center;gap: 6px;padding: 6px 14px;border-radius: 999px;background: rgba(255, 255, 255, 0.18);font-size: 12px;font-weight: 700}
.ug-hero-badge svg { width: 14px; height: 14px; }
.ug-hero-title {margin: 14px 0 10px;font-size: 26px;font-weight: 800;line-height: 1.36;word-break: keep-all;overflow-wrap: anywhere;text-shadow: 0 2px 12px rgba(2, 22, 46, 0.28)}
.ug-hero-lead {margin: 0 auto;max-width: 520px;font-size: 14.5px;line-height: 1.8;color: rgba(255, 255, 255, 0.92)}
.ug-hero-lead strong { color: #fff; font-weight: 800; white-space: nowrap; }
.ug-hero-drift {position: absolute;inset: 0;z-index: 1;opacity: 0.4;pointer-events: none}
.ug-hero-drift span {position: absolute;display: block;color: rgba(255, 255, 255, 0.8);animation: ug-drift 9s ease-in-out infinite}
.ug-hero-drift span:nth-child(1) { left: 5%; top: 20%; }
.ug-hero-drift span:nth-child(2) { right: 7%; top: 14%; animation-delay: -2.4s; }
.ug-hero-drift span:nth-child(3) { right: 12%; bottom: 18%; animation-delay: -4.8s; }
.ug-hero-drift span:nth-child(4) { left: 10%; bottom: 14%; animation-delay: -6.6s; }
.ug-hero-drift svg { width: 30px; height: 30px; }
@keyframes ug-drift {0%, 100% { transform: translateY(0) rotate(-6deg); }
50% { transform: translateY(-12px) rotate(8deg); }}
@media (prefers-reduced-motion: reduce) {.ug-hero-drift span { animation: none; }}
.ug-nav {margin: 0 12px;padding: 10px 0}
.ug-nav-inner {display: flex;gap: 8px;overflow-x: auto;padding: 2px 2px 4px;scrollbar-width: none}
.ug-nav-inner::-webkit-scrollbar { display: none; }
.ug-chip {flex: 0 0 auto;display: inline-flex;align-items: center;gap: 7px;padding: 8px 14px;border-radius: 999px;background: #fff;border: 1px solid var(--color-border);box-shadow: var(--shadow-sm);font-size: 12.5px;font-weight: 800;color: var(--color-text-secondary);text-decoration: none}
.ug-chip svg { width: 15px; height: 15px; color: var(--ug-ch, var(--color-text-muted)); }
.ug-chip b { color: var(--color-text-light); font-weight: 800; font-size: 11px; }
.ug-phase {margin: 0 12px 18px;background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-lg);overflow: hidden;box-shadow: var(--shadow-sm);scroll-margin-top: 16px}
.ug-phase-head {display: flex;align-items: center;gap: 12px;padding: 15px 16px;background: linear-gradient(150deg, var(--ug-ch), var(--ug-ch-deep));color: #fff}
.ug-phase-head-icon {flex: 0 0 auto;width: 38px;height: 38px;border-radius: 12px;display: grid;place-items: center;background: rgba(255, 255, 255, 0.2)}
.ug-phase-head-icon svg { width: 20px; height: 20px; }
.ug-phase-head-text { min-width: 0; }
.ug-phase-head-text span {display: block;font-size: 10px;font-weight: 800;letter-spacing: 0.14em;opacity: 0.85}
.ug-phase-head-text h2 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.4; }
.ug-phase-head-text p {margin: 1px 0 0;font-size: 12px;color: rgba(255, 255, 255, 0.9);overflow-wrap: anywhere}
.ug-phase-head-count {margin-left: auto;flex: 0 0 auto;padding: 4px 11px;border-radius: 999px;background: rgba(255, 255, 255, 0.2);font-size: 11px;font-weight: 800;white-space: nowrap}
.ug-steps {margin: 0;padding: 16px 14px 4px;list-style: none}
.ug-arrow { display: none; }
.ug-step {position: relative;display: grid;grid-template-columns: 46px minmax(0, 1fr);gap: 12px;padding-bottom: 14px}
.ug-step:not(:last-child)::after {content: "";position: absolute;left: 21px;top: 50px;bottom: -2px;width: 3px;border-radius: 3px;background: color-mix(in srgb, var(--ug-ch) 28%, #fff)}
.ug-step-mark {position: relative;z-index: 2;width: 46px;height: 46px;border-radius: 50%;display: grid;place-items: center;background: var(--ug-ch-bg);color: var(--ug-ch-deep);border: 2px solid color-mix(in srgb, var(--ug-ch) 30%, #fff)}
.ug-step-mark > svg { width: 22px; height: 22px; }
.ug-step-num {position: absolute;top: -6px;left: -6px;width: 21px;height: 21px;border-radius: 50%;background: var(--ug-ch);color: #fff;font-size: 11px;font-weight: 800;display: grid;place-items: center;border: 2px solid #fff}
.ug-step-card { min-width: 0; padding-top: 2px; }
.ug-step-card h3 {margin: 0 0 3px;font-size: 15px;font-weight: 800;line-height: 1.5;overflow-wrap: anywhere}
.ug-step-card p {margin: 0;font-size: 12.5px;color: var(--color-text-secondary);line-height: 1.65;overflow-wrap: anywhere}
.ug-step-note {display: block;margin-top: 5px;font-size: 11px;color: var(--color-text-muted);line-height: 1.6;overflow-wrap: anywhere}
.ug-step-tags {display: flex;flex-wrap: wrap;gap: 5px;margin-top: 7px}
.ug-tag {display: inline-flex;align-items: center;gap: 4px;padding: 3px 9px;border-radius: 999px;font-size: 10.5px;font-weight: 700;line-height: 1.5;overflow-wrap: anywhere}
.ug-tag svg { flex: 0 0 auto; width: 11px; height: 11px; }
.ug-tag--plain { background: var(--color-bg-secondary); color: var(--color-text-muted); }
.ug-tag--ai { background: #ede9fe; color: #6d28d9; font-weight: 800; }
.ug-tag--fun { background: #fef3c7; color: #92400e; font-weight: 800; }
.ug-phase-hint {display: flex;align-items: flex-start;gap: 8px;margin: 0 14px 14px;padding: 10px 12px;border-radius: var(--radius-sm);background: var(--color-bg-muted);border: 1px dashed var(--color-border);font-size: 11.5px;color: var(--color-text-muted);line-height: 1.65;overflow-wrap: anywhere}
.ug-phase-hint svg {flex: 0 0 auto;width: 14px;height: 14px;margin-top: 2px;color: var(--ug-ch)}
.ug-bridge {display: flex;align-items: center;justify-content: center;gap: 8px;margin: -4px 12px 14px;color: var(--color-text-light);font-size: 11.5px;font-weight: 700}
.ug-bridge::before,
.ug-bridge::after {content: "";flex: 1;height: 1px;background: var(--color-border)}
.ug-bridge svg { width: 16px; height: 16px; }
.ug-extras { margin: 26px 12px 0; scroll-margin-top: 16px; }
.ug-extras-head { text-align: center; padding: 0 4px 14px; }
.ug-extras-kicker {display: inline-block;padding: 4px 12px;border-radius: 999px;background: var(--color-bg-secondary);color: var(--color-text-muted);font-size: 10.5px;font-weight: 800;letter-spacing: 0.14em}
.ug-extras-head h2 { margin: 10px 0 6px; font-size: 20px; font-weight: 800; line-height: 1.4; }
.ug-extras-head p {margin: 0;font-size: 13px;color: var(--color-text-muted);overflow-wrap: anywhere}
.ug-extra-group + .ug-extra-group { margin-top: 24px; }
.ug-extra-group-title {display: flex;align-items: center;gap: 10px;margin: 0 0 4px;font-size: 13.5px;font-weight: 800;color: var(--color-text-secondary);white-space: nowrap}
.ug-extra-group-title::after {content: "";flex: 1;height: 1px;background: var(--color-border)}
.ug-extra-group-desc {margin: 0 0 12px;font-size: 12px;color: var(--color-text-muted);line-height: 1.6;overflow-wrap: anywhere}
.ug-extra-grid {display: grid;grid-template-columns: minmax(0, 1fr);gap: 10px}
.ug-extra {position: relative;display: flex;gap: 12px;min-width: 0;padding: 14px;background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-md);box-shadow: var(--shadow-sm)}
.ug-extra--link {border-color: color-mix(in srgb, var(--ug-x) 32%, #fff);box-shadow: 0 2px 10px color-mix(in srgb, var(--ug-x) 12%, transparent)}
.ug-extra--link .ug-extra-icon {background: color-mix(in srgb, var(--ug-x) 16%, #fff)}
.ug-extra-icon {flex: 0 0 auto;width: 44px;height: 44px;border-radius: 14px;display: grid;place-items: center;background: color-mix(in srgb, var(--ug-x) 12%, #fff);color: var(--ug-x)}
.ug-extra-icon svg { width: 23px; height: 23px; }
.ug-extra-body { min-width: 0; }
.ug-extra-body h4 {margin: 0 0 3px;font-size: 14.5px;font-weight: 800;line-height: 1.5;overflow-wrap: anywhere}
.ug-extra-body p {margin: 0;font-size: 12.5px;color: var(--color-text-secondary);line-height: 1.65;overflow-wrap: anywhere}
.ug-extra-entry {display: inline-flex;align-items: center;gap: 3px;margin-top: 7px;padding: 3px 9px 3px 6px;border-radius: 999px;background: var(--color-bg-muted);border: 1px solid var(--color-border);font-size: 10.5px;font-weight: 700;color: var(--color-text-muted);overflow-wrap: anywhere}
.ug-extra-entry svg { flex: 0 0 auto; width: 11px; height: 11px; color: var(--ug-x); }
.ug-extra-entry--link {gap: 5px;padding: 5px 9px 5px 12px;color: #fff;font-weight: 800;background: var(--ug-x);border-color: transparent;text-decoration: none;box-shadow: 0 3px 8px color-mix(in srgb, var(--ug-x) 32%, transparent);transition: box-shadow 0.15s ease, filter 0.15s ease}
.ug-extra-entry--link svg { color: #fff; transition: transform 0.15s ease; }
.ug-extra-entry--link::after {content: "";position: absolute;inset: 0;border-radius: var(--radius-md)}
.ug-extra--link:hover .ug-extra-entry--link {box-shadow: 0 6px 14px color-mix(in srgb, var(--ug-x) 42%, transparent);filter: brightness(1.06)}
.ug-extra--link:hover .ug-extra-entry--link svg { transform: translateX(2px); }
.ug-disclaimer {margin: 18px 12px 0;padding: 12px 14px;border-radius: var(--radius-md);background: var(--color-bg-secondary);border: 1px solid var(--color-border);font-size: 11.5px;color: var(--color-text-muted);line-height: 1.75;overflow-wrap: anywhere}
.ug-cta {margin: 18px 12px 0;padding: 28px 20px;border-radius: var(--radius-lg);text-align: center;color: #fff;background: linear-gradient(160deg, #0f766e 0%, #0891b2 45%, #1d4ed8 100%)}
.ug-cta h2 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.ug-cta p {margin: 0 0 16px;font-size: 13px;color: rgba(255, 255, 255, 0.9);overflow-wrap: anywhere}
.ug-cta-btn {display: inline-flex;align-items: center;justify-content: center;gap: 8px;min-height: 52px;padding: 14px 30px;border-radius: 999px;background: #fff;color: #1d4ed8;font-size: 15.5px;font-weight: 800;text-decoration: none;box-shadow: 0 10px 24px rgba(3, 15, 30, 0.28);transition: transform 0.12s ease, box-shadow 0.15s ease}
.ug-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(3, 15, 30, 0.34); }
.ug-cta-btn svg { width: 18px; height: 18px; }
@media (min-width: 769px) {.ug-phase, .ug-extras { scroll-margin-top: 72px; }}
@media (min-width: 861px) {.ug-page { padding-bottom: 72px; }
.ug-hero { margin: 20px 20px 0; padding: 52px 32px 44px; }
.ug-hero-title { font-size: 34px; }
.ug-hero-lead { font-size: 15.5px; }
.ug-nav { margin: 0 20px; padding: 14px 0 10px; }
.ug-nav-inner { justify-content: center; overflow: visible; }
.ug-chip { font-size: 13px; padding: 9px 18px; }
.ug-phase { margin: 0 20px 20px; }
.ug-phase-head { padding: 18px 24px; }
.ug-phase-head-icon { width: 44px; height: 44px; }
.ug-phase-head-icon svg { width: 23px; height: 23px; }
.ug-phase-head-text h2 { font-size: 20px; }
.ug-phase-head-text p { font-size: 13px; }
.ug-steps { display: flex; align-items: stretch; padding: 30px 20px 10px; }
.ug-steps.is-short { max-width: 720px; margin: 0 auto; }
.ug-step {flex: 1 1 0;display: block;gap: 0;padding: 0 6px;text-align: center}
.ug-step:not(:last-child)::after { display: none; }
.ug-step-mark {width: 60px;height: 60px;margin: 0 auto 12px;background: #fff;border: 2px solid color-mix(in srgb, var(--ug-ch) 32%, #fff);box-shadow: var(--shadow-sm);transition: transform 0.15s ease, box-shadow 0.15s ease}
.ug-step-mark > svg { width: 27px; height: 27px; }
.ug-step:hover .ug-step-mark { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ug-step-num {top: -7px;left: 50%;transform: translateX(-50%);width: 23px;height: 23px;font-size: 11.5px}
.ug-step-card { padding: 0; }
.ug-step-tags { justify-content: center; }
.ug-arrow {display: flex;align-items: flex-start;justify-content: center;flex: 0 0 34px;padding-top: 18px;color: color-mix(in srgb, var(--ug-ch) 55%, #fff)}
.ug-arrow svg { width: 24px; height: 24px; }
.ug-phase-hint { margin: 4px 20px 18px; padding: 12px 16px; font-size: 12.5px; }
.ug-bridge { margin: -6px 20px 16px; font-size: 12px; }
.ug-extras { margin: 34px 20px 0; }
.ug-extras-head { padding-bottom: 18px; }
.ug-extras-head h2 { font-size: 24px; }
.ug-extra-grid {display: flex;flex-wrap: wrap;justify-content: flex-start;gap: 14px}
.ug-extra {flex: 0 1 calc((100% - 28px) / 3);flex-direction: column;align-items: center;text-align: center;padding: 22px 18px 18px;transition: transform 0.15s ease, box-shadow 0.15s ease}
.ug-extra:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ug-extra--link:hover {border-color: color-mix(in srgb, var(--ug-x) 55%, #fff);box-shadow: 0 10px 22px color-mix(in srgb, var(--ug-x) 22%, transparent)}
.ug-extra-icon { width: 52px; height: 52px; border-radius: 16px; }
.ug-extra-icon svg { width: 26px; height: 26px; }
.ug-extra-body h4 { font-size: 15.5px; }
.ug-disclaimer, .ug-cta { margin-left: 20px; margin-right: 20px; }
.ug-cta { padding: 40px 24px; }
.ug-cta h2 { font-size: 24px; }}
@media (max-width: 380px) {.ug-step { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; }
.ug-step-mark { width: 42px; height: 42px; }
.ug-step:not(:last-child)::after { left: 19px; top: 46px; }
.ug-step-card h3 { font-size: 14.5px; }}