:root {
        --app-surface: #ffffff;
        --app-border: #d4dee9;
        --app-text: #162234;
        --app-focus: #2d79d8;
        --app-link: #1d5fbf;
        --app-link-visited: #1d5fbf;
        --app-row-even: #f7faff;
        --app-button-border: #2b66ad;
        --app-button-a: #3a84de;
        --app-button-b: #2b6fc2;
        --app-button-text: #ffffff;
        --app-font-body: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", "Noto Sans", sans-serif;
        --app-font-heading: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", "Noto Sans", sans-serif;
        --sg-bg: #e8eff6;
        --sg-card: #ffffff;
        --sg-line: #ccd3db;
        --sg-ink: #111827;
        --sg-muted: #4b5563;
        --sg-blue: #2c69b2;
        --sg-blue-deep: #1f4f87;
        --sg-green: #1f9d57;
        --sg-focus: #3b82f6;
        --sg-shadow: 0 18px 34px rgba(28, 42, 62, 0.08);
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    body.sg-page {
        margin: 0;
        padding: 20px 12px 28px;
        background: radial-gradient(circle at 10% -20%, rgba(69, 135, 199, 0.16), rgba(69, 135, 199, 0) 40%), var(--sg-bg);
        color: var(--sg-ink);
        font-family: var(--app-font-body);
    }

    .sg-shell {
        max-width: 1120px;
        margin: 0 auto;
    }

    .sg-browser {
        border: 1px solid #9ea6b1;
        border-radius: 12px;
        overflow: hidden;
        background: #f7f8fa;
        box-shadow: var(--sg-shadow);
    }

    .sg-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid #bfc6cf;
        padding: 14px 16px;
        background: #f9fafb;
    }

    .sg-brand-link {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        text-decoration: none;
    }

    .sg-brand-logo {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        object-fit: cover;
        border: 1px solid #b9c1cb;
        background: #ffffff;
        box-shadow: 0 6px 12px rgba(32, 46, 64, 0.14);
    }

    .sg-brand-nameplate {
        display: block;
        width: auto;
        height: 58px;
        max-width: 320px;
        object-fit: contain;
    }

    .sg-nav-links {
        display: inline-flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
    }

    .sg-nav-links a,
    .sg-nav-link-btn {
        color: #111827;
        text-decoration: none;
        font-weight: 700;
        font-size: 22px;
    }

    .sg-nav-logout-form {
        margin: 0;
    }

    .sg-nav-link-btn {
        border: 0;
        background: transparent;
        padding: 0;
        cursor: pointer;
        font-family: inherit;
    }

    .sg-main {
        padding: 24px 16px;
    }

    .sg-alert {
        border: 1px solid #dca3a3;
        border-radius: 12px;
        background: #fff3f3;
        padding: 11px 13px;
        color: #8f1b1b;
        font-weight: 700;
        margin-bottom: 14px;
    }

    .sg-alert.notice {
        border-color: #b9cbdb;
        background: #edf5ff;
        color: #1f4f87;
    }

    .sg-alert.success {
        border-color: #9bd8af;
        background: #ecfbef;
        color: #0f5a34;
    }

    .sg-success-cta {
        margin-top: 10px;
        font-size: 18px;
        font-weight: 700;
    }

    .sg-success-cta a {
        color: var(--app-link-visited, var(--app-link));
        text-decoration: none;
    }

    .sg-success-cta a:hover {
        text-decoration: underline;
    }

    .sg-modal-backdrop {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(15, 23, 42, 0.58);
        --sr-dialog-backdrop: rgba(15, 23, 42, 0.58);
        z-index: 1200;
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sg-modal-backdrop[hidden] {
        display: none;
    }

    .sg-modal-dialog {
        width: min(100%, 520px);
        max-height: calc(100vh - 32px);
        border: 1px solid #b8c4d0;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 24px 46px rgba(15, 23, 42, 0.24);
        padding: 16px;
        overflow: auto;
    }

    .sg-modal-title {
        margin: 0;
        font-size: 26px;
        line-height: 1.15;
        color: #0f172a;
    }

    .sg-modal-body {
        margin: 10px 0 0;
        font-size: 17px;
        line-height: 1.5;
        color: #334155;
    }

    .sg-modal-body--review {
        margin-top: 14px;
        font-size: 14px;
    }

    .sg-modal-actions {
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 9px;
    }

    .sg-username-status {
        min-height: 18px;
        margin-top: 2px;
        font-size: 13px;
        font-weight: 700;
        color: #4b5563;
    }

    .sg-username-status.is-success {
        color: #166534;
    }

    .sg-username-status.is-warning {
        color: #9a3412;
    }

    .sg-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
        gap: 18px;
        align-items: center;
        border-bottom: 1px solid #bac2cb;
        padding-bottom: 18px;
    }

    .sg-hero h1 {
        margin: 0 0 8px;
        font-size: clamp(34px, 5.1vw, 68px);
        line-height: 0.95;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        font-family: var(--app-font-heading);
    }

    .sg-hero p {
        margin: 0;
        font-size: 20px;
        line-height: 1.45;
        color: #111827;
    }

    .sg-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid var(--app-button-border);
        border-radius: 11px;
        background: linear-gradient(150deg, var(--app-button-a) 0%, var(--app-button-b) 100%);
        color: var(--app-button-text);
        text-decoration: none;
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: 0.16px;
        line-height: 1;
        padding: 9px 16px;
        cursor: pointer;
        box-shadow: 0 8px 16px rgba(32, 72, 121, 0.22);
        transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    }

    .sg-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(26, 62, 106, 0.28);
        filter: brightness(1.03);
    }

    .sg-btn:active {
        transform: translateY(0);
        box-shadow: 0 4px 10px rgba(26, 62, 106, 0.22);
    }

    .sg-btn:focus-visible {
        outline: none;
        border-color: var(--app-focus);
        box-shadow: 0 0 0 3px rgba(45, 121, 216, 0.2);
    }

    .sg-btn.secondary {
        border-color: var(--app-border);
        background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-row-even) 100%);
        color: var(--app-text);
        box-shadow: none;
    }

    .sg-btn.secondary:hover {
        filter: none;
        color: var(--app-text);
        border-color: var(--app-focus);
        background: linear-gradient(180deg, var(--app-row-even) 0%, var(--app-surface) 100%);
    }

    .sg-btn.secondary:active {
        box-shadow: 0 4px 10px rgba(26, 62, 106, 0.12);
    }

    .sg-btn.small {
        font-size: 13px;
        padding: 7px 12px;
    }

    .sg-hero-visual {
        border: 2px solid #9ca5af;
        border-radius: 10px;
        background: #f4f6f8;
        overflow: hidden;
        display: grid;
        gap: 8px;
        padding: 8px;
    }

    .sg-mini-window {
        border: 1px solid #bec8d3;
        border-radius: 8px;
        background: #ffffff;
        overflow: hidden;
    }

    .sg-mini-top {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid #a3aeb9;
        background: #e2e8ef;
        padding: 8px 10px;
    }

    .sg-mini-dotrow {
        display: inline-flex;
        gap: 4px;
    }

    .sg-mini-dotrow span {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #9aa4af;
    }

    .sg-mini-title {
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sg-mini-live {
        border: 1px solid #83b893;
        border-radius: 999px;
        background: #e9f7ee;
        color: #1b6b3b;
        font-size: 10px;
        font-weight: 800;
        padding: 2px 7px;
    }

    .sg-mini-tabs {
        display: flex;
        align-items: center;
        gap: 4px;
        border-bottom: 1px solid #c1c9d3;
        background: #f7f9fb;
        padding: 6px 8px;
    }

    .sg-mini-tabs span {
        border: 1px solid #c5cdd7;
        border-radius: 999px;
        padding: 3px 8px;
        font-size: 10px;
        font-weight: 700;
        color: #32475d;
        background: #ffffff;
    }

    .sg-mini-tabs .active {
        color: #ffffff;
        border-color: #2c69b2;
        background: linear-gradient(180deg, #3a81cf, #2c69b2);
    }

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

    .sg-mini-panel {
        border: 1px solid #bec8d3;
        border-radius: 8px;
        background: #ffffff;
        padding: 7px;
    }

    .sg-mini-panel h5 {
        margin: 0 0 6px;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        color: #334155;
        letter-spacing: 0.03em;
    }

    .sg-mini-event,
    .sg-mini-item {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 6px;
        border: 1px solid #d7dde4;
        border-radius: 6px;
        background: #f9fbfd;
        padding: 5px 6px;
        margin-top: 4px;
    }

    .sg-mini-event span {
        min-width: 40px;
        color: #475569;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .sg-mini-event b,
    .sg-mini-item b {
        font-size: 10px;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sg-mini-item {
        grid-template-columns: 1fr auto;
    }

    .sg-mini-item .reserve {
        border: 1px solid #8eb2d9;
        border-radius: 999px;
        background: #eaf3ff;
        color: #1f4f87;
        font-size: 9px;
        font-weight: 800;
        padding: 2px 6px;
    }

    .sg-mini-footer {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        border-top: 1px solid #c4ccd5;
        background: #f4f7fa;
        padding: 7px 8px;
    }

    .sg-mini-footer span {
        border: 1px solid #c5ced8;
        border-radius: 6px;
        background: #ffffff;
        text-align: center;
        font-size: 10px;
        font-weight: 800;
        padding: 4px 5px;
        color: #334155;
    }

    .sg-mini-caption {
        margin: 6px 0 8px;
        text-align: center;
        font-weight: 800;
        color: #4b5563;
        font-size: 13px;
    }

    .sg-paths {
        padding-top: 14px;
    }

    .sg-paths h4 {
        margin: 0 0 10px;
        font-size: 32px;
        text-transform: uppercase;
    }

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

    .sg-path-card {
        border: 1px solid #abb3be;
        border-radius: 10px;
        background: #f8fafc;
        text-align: center;
        padding: 18px 10px 14px;
        text-decoration: none;
        color: #111827;
        font-weight: 900;
        font-size: 20px;
        text-transform: uppercase;
    }

    .sg-path-card .icon {
        display: block;
        font-size: 52px;
        margin-bottom: 8px;
    }

    .sg-stage-layout {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 16px;
        align-items: start;
    }

    .sg-sidebar {
        border: 1px solid var(--sg-line);
        border-radius: 12px;
        background: #f8fafc;
        padding: 14px;
    }

    .sg-sidebar h4 {
        margin: 0 0 12px;
        font-size: 18px;
    }

    .sg-progress-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 12px;
    }

    .sg-progress-list li {
        display: grid;
        grid-template-columns: 22px 1fr;
        gap: 10px;
        align-items: start;
        font-weight: 700;
    }

    .sg-step-dot {
        width: 22px;
        height: 22px;
        border-radius: 999px;
        border: 2px solid #c0c8d1;
        background: #ffffff;
        margin-top: 2px;
        box-sizing: border-box;
    }

    .sg-step-dot.active {
        background: var(--sg-blue);
        border-color: var(--sg-blue-deep);
    }

    .sg-step-dot.done {
        background: var(--sg-green);
        border-color: #177a43;
        position: relative;
    }

    .sg-step-dot.done::after {
        content: "✓";
        position: absolute;
        inset: 0;
        color: #ffffff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sg-sidebar section {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid #d4dbe3;
        font-size: 16px;
    }

    .sg-sidebar ul {
        margin: 8px 0 0 20px;
        padding: 0;
        line-height: 1.55;
    }

    .sg-license-summary {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid #d4dbe3;
    }

    .sg-license-summary-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
    }

    .sg-license-summary-head strong {
        font-size: 15px;
        color: #17365c;
    }

    .sg-license-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        border: 1px solid #bfccdc;
        background: #ecf2fa;
        color: #27466d;
        white-space: nowrap;
    }

    .sg-license-status.is-active {
        border-color: #2b8a56;
        background: #e7f6ef;
        color: #1f6f44;
    }

    .sg-license-status.is-warning {
        border-color: #b78a27;
        background: #fff7df;
        color: #8b6514;
    }

    .sg-license-status.is-bad {
        border-color: #b85656;
        background: #fdecec;
        color: #8e2f2f;
    }

    .sg-license-code {
        margin: 0 0 9px;
        font-size: 13px;
        color: #4f627d;
    }

    .sg-license-code code {
        padding: 2px 6px;
        border-radius: 8px;
        border: 1px solid #cad7e6;
        background: #f3f7fc;
        color: #1c3f68;
        font-weight: 700;
    }

    .sg-license-label {
        margin: -4px 0 8px;
        font-size: 13px;
        color: #4f627d;
        font-weight: 700;
    }

    .sg-license-blurb {
        margin: 0;
        font-size: 13px;
        line-height: 1.45;
        color: #4f627d;
    }

    .sg-license-blurb strong {
        color: #17365c;
    }

    .sg-license-meta {
        margin: 6px 0 0;
        font-size: 12px;
        line-height: 1.45;
        color: #607792;
    }

    .sg-license-meta strong {
        color: #17365c;
    }

    .sg-license-footnote {
        margin: 6px 0 0;
        font-size: 12px;
        line-height: 1.45;
        color: #607792;
    }

    .sg-card {
        border: 1px solid var(--sg-line);
        border-radius: 12px;
        background: var(--sg-card);
        box-shadow: var(--sg-shadow);
        padding: 16px;
    }

    .sg-card h2 {
        margin: 8px 0 4px;
        font-size: 48px;
        line-height: 1.02;
        font-family: var(--app-font-heading);
    }

    .sg-card p {
        margin: 0;
        font-size: 18px;
        color: var(--sg-muted);
        line-height: 1.45;
    }

    .sg-progress-strip {
        margin-bottom: 10px;
    }

    .sg-progress-strip .bar {
        height: 8px;
        border-radius: 999px;
        background: #e2e8ef;
        overflow: hidden;
    }

    .sg-progress-strip .bar span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--sg-blue-deep), var(--sg-blue));
    }

    .sg-progress-strip .meta {
        display: flex;
        justify-content: space-between;
        font-weight: 800;
        margin-bottom: 5px;
        font-size: 15px;
    }

    .sg-template-grid {
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .sg-template-grid input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .sg-template {
        border: 1px solid #c2cad4;
        border-radius: 10px;
        padding: 11px 8px;
        text-align: center;
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
        background: #fbfdff;
    }

    .sg-template .icon {
        display: block;
        font-size: 28px;
        margin-bottom: 6px;
    }

    .sg-template-grid input:checked + .sg-template {
        border-color: #6f879f;
        box-shadow: 0 0 0 2px rgba(60, 111, 162, 0.18);
        background: #edf5ff;
    }

    .sg-form {
        margin-top: 12px;
        display: grid;
        gap: 10px;
    }

    .sg-field {
        display: grid;
        gap: 4px;
    }

    .sg-field label {
        font-size: 14px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .sg-field label .sg-label-note {
        margin-left: 4px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-transform: none;
        color: #64748b;
    }

    .sg-input,
    .sg-textarea,
    .sg-select {
        width: 100%;
        box-sizing: border-box;
        min-height: 42px;
        border: 1px solid #b6c0cb;
        border-radius: 9px;
        background: #ffffff;
        font-size: 18px;
        padding: 8px 11px;
    }

    .sg-textarea {
        min-height: 90px;
        resize: vertical;
    }

    .sg-input:focus,
    .sg-textarea:focus,
    .sg-select:focus {
        outline: none;
        border-color: var(--sg-focus);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
    }

    .sg-password-wrap {
        position: relative;
    }

    .sg-password-wrap .sg-input {
        padding-right: 52px;
    }

    .sg-password-toggle {
        position: absolute;
        top: 50%;
        right: 7px;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #64748b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.14s ease, color 0.14s ease;
    }

    .sg-password-toggle:hover,
    .sg-password-toggle:active {
        transform: translateY(-50%);
        background: rgba(59, 130, 246, 0.12);
        color: #0f172a;
    }

    .sg-password-toggle:focus-visible {
        outline: 2px solid var(--sg-focus);
        outline-offset: 1px;
    }

    .sg-password-toggle-icon {
        width: 20px;
        height: 20px;
        display: block;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .sg-password-toggle-icon-eye-off {
        display: none;
    }

    .sg-password-toggle.is-active .sg-password-toggle-icon-eye {
        display: none;
    }

    .sg-password-toggle.is-active .sg-password-toggle-icon-eye-off {
        display: block;
    }

    .sg-username-row {
        display: flex;
        align-items: stretch;
        gap: 8px;
    }

    .sg-username-row .sg-input {
        flex: 1;
        min-width: 0;
    }

    .sg-username-check {
        min-height: 42px;
        border-radius: 9px;
        padding: 0 12px;
        font-size: 14px;
        white-space: nowrap;
    }

    .sg-gated-details {
        display: grid;
        gap: 10px;
    }

    .sg-gated-details[hidden] {
        display: none !important;
    }

    .sg-actions {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
    }

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

    .sg-invite-block {
        border: 2px dashed #8b98a7;
        border-radius: 10px;
        background: #eef4fb;
        padding: 12px;
        margin: 12px 0;
    }

    .sg-invite-field {
        display: flex;
        gap: 8px;
    }

    .sg-invite-field .sg-input {
        flex: 1;
        min-width: 0;
    }

    .sg-action-cards {
        margin: 12px 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .sg-action-card {
        border: 1px solid #c2cad4;
        border-radius: 10px;
        background: #f8fafc;
        min-height: 170px;
        text-align: center;
        padding: 12px 10px;
    }

    .sg-action-card strong {
        display: block;
        font-size: 30px;
        margin-bottom: 9px;
    }

    .sg-action-card p {
        font-size: 16px;
        margin: 0;
    }

    @media (max-width: 980px) {
        .sg-hero {
            grid-template-columns: minmax(0, 1fr);
        }
        .sg-stage-layout {
            grid-template-columns: minmax(0, 1fr);
        }
        .sg-dual {
            grid-template-columns: minmax(0, 1fr);
        }
        .sg-template-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 680px) {
        body.sg-page {
            padding: 8px;
        }
        .sg-nav-links {
            gap: 10px;
        }
        .sg-nav-links a {
            font-size: 16px;
        }
        .sg-nav-link-btn {
            font-size: 16px;
        }
        .sg-brand-logo {
            width: 44px;
            height: 44px;
            border-radius: 10px;
        }
        .sg-brand-nameplate {
            height: 39px;
            max-width: 245px;
        }
        .sg-main {
            padding: 14px 10px;
        }
        .sg-hero h1,
        .sg-card h2 {
            font-size: 34px;
        }
        .sg-path-grid,
        .sg-action-cards {
            grid-template-columns: minmax(0, 1fr);
        }
        .sg-actions .sg-btn {
            width: 100%;
        }
        .sg-modal-actions .sg-btn {
            width: auto;
        }
    }

    /* Aggressive SaaS marketing polish for /start. */
    :root {
        --sg-bg: #edf3fb;
        --sg-card: #ffffff;
        --sg-line: #c8d5e7;
        --sg-ink: #0f223b;
        --sg-muted: #4f627d;
        --sg-blue: #2577d9;
        --sg-blue-deep: #1a5fb5;
        --sg-green: #159765;
        --sg-focus: #3b82f6;
        --sg-shadow: 0 24px 48px rgba(16, 38, 67, 0.14);
    }

    body.sg-page {
        padding: clamp(10px, 2.1vw, 24px) clamp(10px, 1.8vw, 20px) 36px;
        min-height: 100vh;
        overflow-x: hidden;
        background:
            radial-gradient(circle at 16% -12%, rgba(116, 166, 231, 0.32), rgba(116, 166, 231, 0) 44%),
            radial-gradient(circle at 92% -10%, rgba(82, 130, 214, 0.26), rgba(82, 130, 214, 0) 40%),
            linear-gradient(146deg, #f5f9ff 0%, #e8f0fb 100%);
        position: relative;
    }

    body.sg-page::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.22;
        background-image:
            linear-gradient(rgba(140, 160, 186, 0.16) 1px, transparent 1px),
            linear-gradient(90deg, rgba(140, 160, 186, 0.16) 1px, transparent 1px);
        background-size: 38px 38px;
        -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 18%, transparent 100%);
        mask-image: radial-gradient(circle at 50% 0%, #000 18%, transparent 100%);
    }

    .sg-shell {
        max-width: 1200px;
        position: relative;
        z-index: 1;
    }

    .sg-browser {
        border: 1px solid #b8c8de;
        border-radius: 24px;
        background: linear-gradient(166deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 251, 255, 0.96) 100%);
        box-shadow: var(--sg-shadow);
    }

    .sg-nav {
        padding: 16px 22px;
        border-bottom: 1px solid #c9d5e6;
        background: linear-gradient(170deg, rgba(255, 255, 255, 0.92), rgba(240, 248, 255, 0.92));
        backdrop-filter: blur(14px);
    }

    .sg-brand-logo {
        width: 54px;
        height: 54px;
        border: 1px solid #b9c9de;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
    }

    .sg-brand-nameplate {
        height: 56px;
    }

    .sg-nav-links {
        gap: 10px;
    }

    .sg-nav-links a,
    .sg-nav-link-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 0 14px;
        border: 1px solid transparent;
        border-radius: 999px;
        color: #1b3658;
        text-decoration: none;
        font-size: 12px;
        letter-spacing: 0.08em;
        font-weight: 900;
        text-transform: uppercase;
        transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
    }

    .sg-nav-links a:hover,
    .sg-nav-link-btn:hover {
        border-color: #bed0e5;
        background: #edf4fd;
        color: #173255;
    }

    .sg-nav-links a:focus-visible,
    .sg-nav-link-btn:focus-visible {
        outline: 2px solid var(--sg-focus);
        outline-offset: 2px;
    }

    .sg-main {
        display: grid;
        gap: 14px;
        padding: clamp(16px, 2.5vw, 30px);
    }

    .sg-alert {
        border: 1px solid #d4a7a2;
        border-radius: 14px;
        background: #fff3f1;
        color: #7f2e28;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    }

    .sg-alert.notice {
        border-color: #c3d5ea;
        background: #edf6ff;
        color: #234c7f;
    }

    .sg-alert.success {
        border-color: #9dd8bc;
        background: #ecfbf4;
        color: #0f5a34;
    }

    .sg-alert-inline {
        margin-top: 14px;
        margin-bottom: 0;
    }

    .sg-hero {
        position: relative;
        overflow: hidden;
        border: 1px solid #c8d8eb;
        border-radius: 22px;
        background:
            radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0) 46%),
            linear-gradient(145deg, #ffffff 0%, #f2f8ff 100%);
        box-shadow: 0 18px 38px rgba(18, 43, 74, 0.12);
        padding: clamp(20px, 3.8vw, 38px);
    }

    .sg-hero h1 {
        margin: 0;
        max-width: 12ch;
        font-size: clamp(42px, 6.7vw, 82px);
        line-height: 0.9;
        letter-spacing: -0.035em;
        color: #0d2440;
        text-wrap: balance;
    }

    .sg-hero p {
        margin-top: 14px;
        max-width: 52ch;
        color: #49607c;
        font-size: clamp(18px, 2.25vw, 23px);
        line-height: 1.5;
    }

    .sg-actions {
        margin-top: 16px;
        gap: 10px;
    }

    .sg-actions--hero {
        margin-top: 20px;
    }

    .sg-start-invite-gate {
        margin-top: 18px;
        display: grid;
        gap: 7px;
        max-width: 460px;
    }

    .sg-start-invite-gate label {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #2f4c70;
    }

    .sg-start-invite-row {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .sg-start-invite-row .sg-input {
        flex: 1;
        min-width: 0;
    }

    .sg-start-invite-status {
        min-height: 20px;
        margin: 0;
        font-size: 13px;
        line-height: 1.35;
        color: #5a6f89;
        font-weight: 700;
    }

    .sg-start-invite-status.is-success {
        color: #17643a;
    }

    .sg-start-invite-status.is-warning {
        color: #9a3412;
    }

    .sg-actions--hero .sg-btn {
        min-height: 50px;
        padding: 11px 24px;
        font-size: 13px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .sg-btn.is-disabled,
    .sg-btn[aria-disabled="true"] {
        opacity: 0.56;
        filter: saturate(0.72);
        box-shadow: none;
        cursor: not-allowed;
    }

    .sg-btn.is-disabled:hover,
    .sg-btn[aria-disabled="true"]:hover {
        transform: none;
        filter: saturate(0.72);
        box-shadow: none;
    }

    .sg-btn {
        border: 1px solid #2a69b4;
        border-radius: 12px;
        background: linear-gradient(150deg, #3f8ae2 0%, #2b70c4 100%);
        color: #ffffff;
        min-height: 44px;
        padding: 10px 17px;
        box-shadow: 0 10px 20px rgba(25, 72, 125, 0.24);
    }

    .sg-btn.secondary {
        border-color: #c4d3e4;
        background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
        color: #1d385c;
        box-shadow: none;
    }

    .sg-btn.small {
        min-height: 38px;
        padding: 7px 12px;
    }

    .sg-hero-visual {
        border: 1px solid #c7d5e8;
        border-radius: 16px;
        background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 24px rgba(15, 23, 42, 0.12);
    }

    .sg-mini-window {
        border: 1px solid #c4d3e5;
        border-radius: 12px;
        background: #ffffff;
        animation: sgHeroFloat 7s ease-in-out infinite;
    }

    @keyframes sgHeroFloat {
        0%,
        100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-5px);
        }
    }

    .sg-mini-top {
        border-bottom: 1px solid #c3d3e7;
        background: linear-gradient(180deg, #ecf3fd 0%, #e4eefc 100%);
    }

    .sg-mini-title {
        color: #18355a;
    }

    .sg-mini-live {
        border-color: #7cc39f;
        background: #e8f8ef;
        color: #176641;
    }

    .sg-mini-kpis {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 7px 8px 6px;
        border-bottom: 1px solid #d2dceb;
        background: #f9fbff;
    }

    .sg-mini-kpi {
        border: 1px solid #d2deef;
        border-radius: 8px;
        background: #ffffff;
        text-align: center;
        padding: 6px 4px;
    }

    .sg-mini-kpi strong {
        display: block;
        color: #174679;
        font-size: 14px;
        line-height: 1.05;
        font-weight: 900;
    }

    .sg-mini-kpi span {
        display: block;
        margin-top: 2px;
        color: #4e607a;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .sg-mini-tabs {
        border-bottom: 1px solid #cfdaea;
        background: #f7faff;
    }

    .sg-mini-panel {
        border: 1px solid #c4d3e6;
    }

    .sg-mini-panel h5 {
        color: #304868;
    }

    .sg-mini-event,
    .sg-mini-item {
        border: 1px solid #d4dfec;
        background: #f7fbff;
    }

    .sg-mini-item .reserve {
        border-color: #9bbce2;
        background: #edf5ff;
        color: #1f4f87;
    }

    .sg-mini-activity {
        display: grid;
        gap: 4px;
        border-top: 1px solid #d2dceb;
        padding: 8px;
        background: #fcfeff;
    }

    .sg-mini-activity-row {
        display: grid;
        grid-template-columns: 30px 1fr;
        gap: 6px;
        align-items: center;
        border: 1px solid #d4deec;
        border-radius: 7px;
        padding: 5px 6px;
        background: #f6faff;
    }

    .sg-mini-activity-row span {
        color: #4f6482;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .sg-mini-activity-row b {
        font-size: 10px;
        color: #183354;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sg-mini-footer {
        border-top: 1px solid #cdd9e8;
        background: #f3f7fd;
    }

    .sg-mini-caption {
        margin: 8px 0 10px;
        color: #4c6180;
        font-size: 12px;
    }

    .sg-proof-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .sg-proof-chip {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        border: 1px solid #c9d9ec;
        border-radius: 999px;
        background: #f2f8ff;
        color: #204d80;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 0 11px;
    }

    .sg-proof-chip::before {
        content: "✓";
        margin-right: 7px;
        font-weight: 900;
    }

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

    .sg-value-card {
        border: 1px solid #c7d6e8;
        border-radius: 14px;
        background: linear-gradient(160deg, #ffffff 0%, #f3f8ff 100%);
        padding: 16px 14px;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    }

    .sg-value-card h3 {
        margin: 0 0 8px;
        font-family: var(--app-font-heading);
        font-size: 20px;
        line-height: 1.2;
        color: #123456;
    }

    .sg-value-card p {
        margin: 0;
        color: #4f627d;
        font-size: 15px;
        line-height: 1.55;
    }

    .sg-section-head {
        display: grid;
        gap: 6px;
        margin-top: 4px;
    }

    .sg-section-kicker {
        margin: 0;
        color: #20558f;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .sg-section-head h2,
    .sg-answer-card h2,
    .sg-answer-card h3,
    .sg-faq-card h3 {
        margin: 0;
        color: #123456;
        font-family: var(--app-font-heading);
        line-height: 1.2;
    }

    .sg-section-head p,
    .sg-answer-card p,
    .sg-faq-card p {
        margin: 0;
        color: #4f627d;
        font-size: 15px;
        line-height: 1.65;
    }

    .sg-answer-grid,
    .sg-faq-grid {
        display: grid;
        gap: 12px;
    }

    .sg-answer-grid {
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    }

    .sg-answer-card,
    .sg-faq-card {
        border: 1px solid #c7d6e8;
        border-radius: 14px;
        background: linear-gradient(165deg, #ffffff 0%, #f4f8ff 100%);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
        padding: 18px 16px;
    }

    .sg-answer-card {
        display: grid;
        gap: 10px;
    }

    .sg-answer-list {
        margin: 0;
        padding-left: 18px;
        color: #2c4d73;
        display: grid;
        gap: 8px;
    }

    .sg-answer-list li {
        line-height: 1.5;
    }

    .sg-answer-meta {
        color: #365777;
        font-size: 14px;
        font-weight: 700;
    }

    .sg-answer-meta a {
        color: #1d5ea7;
    }

    .sg-use-case-shell,
    .sg-faq-shell {
        display: grid;
        gap: 12px;
    }

    .sg-answer-grid,
    .sg-use-case-shell,
    .sg-faq-shell {
        content-visibility: auto;
        contain-intrinsic-size: auto 520px;
    }

    .sg-ai-table-wrap {
        border: 1px solid #c7d6e8;
        border-radius: 14px;
        overflow: auto;
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    }

    .sg-ai-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 640px;
    }

    .sg-ai-table th,
    .sg-ai-table td {
        border-bottom: 1px solid #d7e2ef;
        padding: 14px 16px;
        text-align: left;
        vertical-align: top;
    }

    .sg-ai-table th {
        background: #edf4fc;
        color: #17365c;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .sg-ai-table td {
        color: #35506f;
        font-size: 15px;
        line-height: 1.55;
    }

    .sg-ai-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .sg-faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sg-stage-layout {
        gap: 18px;
    }

    .sg-sidebar {
        position: sticky;
        top: 16px;
        border: 1px solid #c8d6e8;
        border-radius: 16px;
        background: linear-gradient(165deg, #ffffff 0%, #f4f8ff 100%);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
        padding: 16px;
    }

    .sg-sidebar h4 {
        margin: 0 0 12px;
        color: #17365c;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        font-size: 17px;
    }

    .sg-sidebar strong {
        color: #17365c;
    }

    .sg-sidebar section {
        border-top: 1px solid #d5deea;
        color: #51657f;
    }

    .sg-sidebar-note {
        margin: 8px 0 0;
        color: #51657f;
        font-style: italic;
    }

    .sg-progress-list li {
        color: #203f66;
    }

    .sg-step-dot {
        border-color: #bfd0e4;
    }

    .sg-step-dot.active {
        background: linear-gradient(180deg, #3e86dd, #276dbf);
        border-color: #205ca3;
    }

    .sg-step-dot.done {
        background: linear-gradient(180deg, #29a66d, #188552);
        border-color: #177c4d;
    }

    .sg-card {
        border: 1px solid #c8d6e8;
        border-radius: 18px;
        background: linear-gradient(170deg, #ffffff 0%, #f5f9ff 100%);
        box-shadow: 0 16px 30px rgba(15, 23, 42, 0.1);
        padding: clamp(16px, 2.5vw, 28px);
    }

    .sg-card h2 {
        margin-top: 8px;
        margin-bottom: 7px;
        color: #0f2b4c;
        font-size: clamp(32px, 4.8vw, 58px);
        line-height: 0.98;
        letter-spacing: -0.02em;
        text-wrap: balance;
    }

    .sg-card p {
        color: #4f627d;
        font-size: 18px;
    }

    .sg-progress-strip {
        margin-bottom: 14px;
    }

    .sg-progress-strip .meta {
        color: #2f4c70;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .sg-progress-strip .bar {
        height: 10px;
        background: #e4edf8;
    }

    .sg-progress-strip .bar span {
        background: linear-gradient(90deg, #1f5fb2, #3f8ae2);
    }

    .sg-field label {
        color: #314d6f;
        font-size: 12px;
    }

    .sg-field label .sg-label-note {
        color: #5b7291;
    }

    .sg-input,
    .sg-textarea,
    .sg-select {
        border: 1px solid #bdcbde;
        background: #ffffff;
        color: #122942;
        border-radius: 11px;
        font-size: 17px;
    }

    .sg-input::placeholder,
    .sg-textarea::placeholder {
        color: #8a99ad;
    }

    .sg-input:disabled,
    .sg-textarea:disabled,
    .sg-select:disabled {
        opacity: 0.76;
        background: #f2f6fc;
    }

    .sg-input-readonly,
    .sg-input[readonly].sg-input-readonly {
        background: linear-gradient(180deg, #f3f6fb 0%, #e9eef6 100%);
        border-color: #c3cfdf;
        color: #5b6f89;
        -webkit-text-fill-color: #5b6f89;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
        cursor: default;
    }

    .sg-input-readonly:focus,
    .sg-input[readonly].sg-input-readonly:focus {
        border-color: #c3cfdf;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    #registry_name.sg-input,
    #registry_description.sg-textarea {
        background: #ffffff;
        border-color: #bdcbde;
        color: #122942;
        -webkit-text-fill-color: #122942;
        font-size: 19px;
        line-height: 1.4;
    }

    .sg-invite-block {
        border: 1px dashed #8fb1d9;
        border-radius: 14px;
        background: linear-gradient(180deg, #edf6ff 0%, #ffffff 100%);
        padding: 14px;
        margin: 14px 0 8px;
    }

    .sg-invite-title {
        margin: 0 0 10px;
        font-family: var(--app-font-heading);
        font-size: 26px;
        line-height: 1.15;
        color: #14385f;
    }

    .sg-invite-note {
        margin: 10px 0 0;
        font-size: 14px;
        color: #51667f;
    }

    .sg-success-cta {
        margin-top: 12px;
    }

    .sg-success-intro {
        margin-top: 10px;
    }

    .sg-success-note {
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.55;
    }

    .sg-action-cards {
        margin-top: 14px;
    }

    .sg-action-card {
        border: 1px solid #c7d6e8;
        border-radius: 12px;
        background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
        box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .sg-action-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 24px rgba(15, 23, 42, 0.12);
    }

    .sg-action-card strong {
        color: #15395f;
    }

    .sg-modal-dialog {
        border: 1px solid #c7d6e8;
        border-radius: 16px;
        background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    }

    @media (max-width: 1080px) {
        .sg-nav {
            padding: 14px 16px;
        }
        .sg-brand-nameplate {
            max-width: 260px;
        }
        .sg-answer-grid,
        .sg-faq-grid {
            grid-template-columns: minmax(0, 1fr);
        }
        .sg-value-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .sg-sidebar {
            position: static;
        }
    }

    @media (max-width: 760px) {
        body.sg-page::before {
            opacity: 0.16;
            background-size: 32px 32px;
        }
        .sg-nav {
            flex-wrap: wrap;
            justify-content: center;
        }
        .sg-brand-link {
            justify-content: center;
        }
        .sg-nav-links {
            width: 100%;
            justify-content: center;
        }
        .sg-proof-row {
            gap: 7px;
        }
        .sg-proof-chip {
            font-size: 11px;
            letter-spacing: 0.03em;
        }
        .sg-ai-table th,
        .sg-ai-table td {
            padding: 12px 13px;
        }
        .sg-value-grid {
            grid-template-columns: minmax(0, 1fr);
        }
        .sg-hero {
            padding: 16px;
        }
        .sg-invite-title {
            font-size: 22px;
        }
        .sg-start-invite-row {
            flex-direction: column;
            align-items: stretch;
        }
        .sg-start-invite-row .sg-btn {
            width: 100%;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .sg-mini-window {
            animation: none;
        }
        .sg-action-card,
        .sg-btn {
            transition: none;
        }
    }