/* ----- NEW THEME: Orange, White, Steel Gray with Glassmorphism ----- */

        :root {
            --oga-orange: #FF9800;
            --oga-orange-dark: #F57C00; /* For hover states */
            --oga-white: #FFFFFF;
            --oga-steel-gray-dark: #424242;
            --oga-steel-gray-medium: #757575;
            --oga-steel-gray-light: #E0E0E0;
            --oga-glass-bg: rgba(255, 255, 255, 0.2); /* More transparent for better blur effect */
            --oga-glass-border: rgba(255, 255, 255, 0.3);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: var(--oga-steel-gray-dark);
            /* Background for glassmorphism to work effectively - needs something to blur */
            background: linear-gradient(135deg, var(--oga-steel-gray-medium) 0%, var(--oga-steel-gray-light) 100%);
            /* Or use a background image: */
            /* background-image: url('your-subtle-background-image.jpg'); */
            /* background-size: cover; */
            /* background-attachment: fixed; */
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 900px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

       .background-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* Ensure it's behind the content */
            pointer-events: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1002%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(45%2c 41%2c 41%2c 1)'%3e%3c/rect%3e%3cg transform='translate(0%2c 0)' stroke-linecap='round' stroke='url(%26quot%3b%23SvgjsRadialGradient1003%26quot%3b)'%3e%3cpath d='M150 255.09 L150 304.9' stroke-width='15'%3e%3c/path%3e%3cpath d='M170 131.96 L170 428.04' stroke-width='15'%3e%3c/path%3e%3cpath d='M190 114.42 L190 445.58' stroke-width='15'%3e%3c/path%3e%3cpath d='M210 114.44 L210 445.56' stroke-width='15'%3e%3c/path%3e%3cpath d='M230 213.51 L230 346.49' stroke-width='15'%3e%3c/path%3e%3cpath d='M250 226.82 L250 333.18' stroke-width='15'%3e%3c/path%3e%3cpath d='M270 242.19 L270 317.81' stroke-width='15'%3e%3c/path%3e%3cpath d='M290 132.03 L290 427.97' stroke-width='15'%3e%3c/path%3e%3cpath d='M310 75.97 L310 484.03' stroke-width='15'%3e%3c/path%3e%3cpath d='M330 140.17 L330 419.83' stroke-width='15'%3e%3c/path%3e%3cpath d='M350 79.03 L350 480.97' stroke-width='15'%3e%3c/path%3e%3cpath d='M370 238.71 L370 321.29' stroke-width='15'%3e%3c/path%3e%3cpath d='M390 63.29 L390 496.71' stroke-width='15'%3e%3c/path%3e%3cpath d='M410 124.6 L410 435.4' stroke-width='15'%3e%3c/path%3e%3cpath d='M430 104.31 L430 455.69' stroke-width='15'%3e%3c/path%3e%3cpath d='M450 197.12 L450 362.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M470 240.84 L470 319.16' stroke-width='15'%3e%3c/path%3e%3cpath d='M490 70.62 L490 489.38' stroke-width='15'%3e%3c/path%3e%3cpath d='M510 197.34 L510 362.66' stroke-width='15'%3e%3c/path%3e%3cpath d='M530 185.75 L530 374.25' stroke-width='15'%3e%3c/path%3e%3cpath d='M550 233.06 L550 326.94' stroke-width='15'%3e%3c/path%3e%3cpath d='M570 97.81 L570 462.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M590 95.45 L590 464.55' stroke-width='15'%3e%3c/path%3e%3cpath d='M610 96.88 L610 463.12' stroke-width='15'%3e%3c/path%3e%3cpath d='M630 177.42 L630 382.58' stroke-width='15'%3e%3c/path%3e%3cpath d='M650 105.92 L650 454.08' stroke-width='15'%3e%3c/path%3e%3cpath d='M670 186.93 L670 373.07' stroke-width='15'%3e%3c/path%3e%3cpath d='M690 256.46 L690 303.54' stroke-width='15'%3e%3c/path%3e%3cpath d='M710 93.61 L710 466.39' stroke-width='15'%3e%3c/path%3e%3cpath d='M730 110.04 L730 449.96' stroke-width='15'%3e%3c/path%3e%3cpath d='M750 196.95 L750 363.05' stroke-width='15'%3e%3c/path%3e%3cpath d='M770 178.28 L770 381.72' stroke-width='15'%3e%3c/path%3e%3cpath d='M790 218.09 L790 341.92' stroke-width='15'%3e%3c/path%3e%3cpath d='M810 74.78 L810 485.22' stroke-width='15'%3e%3c/path%3e%3cpath d='M830 83.28 L830 476.73' stroke-width='15'%3e%3c/path%3e%3cpath d='M850 183.53 L850 376.48' stroke-width='15'%3e%3c/path%3e%3cpath d='M870 249.84 L870 310.17' stroke-width='15'%3e%3c/path%3e%3cpath d='M890 123.81 L890 436.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M910 183.99 L910 376.01' stroke-width='15'%3e%3c/path%3e%3cpath d='M930 66.54 L930 493.46' stroke-width='15'%3e%3c/path%3e%3cpath d='M950 236.62 L950 323.38' stroke-width='15'%3e%3c/path%3e%3cpath d='M970 109.81 L970 450.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M990 133.38 L990 426.63' stroke-width='15'%3e%3c/path%3e%3cpath d='M1010 208.34 L1010 351.65' stroke-width='15'%3e%3c/path%3e%3cpath d='M1030 218.09 L1030 341.91' stroke-width='15'%3e%3c/path%3e%3cpath d='M1050 248.28 L1050 311.71' stroke-width='15'%3e%3c/path%3e%3cpath d='M1070 191.13 L1070 368.87' stroke-width='15'%3e%3c/path%3e%3cpath d='M1090 141.13 L1090 418.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M1110 249.12 L1110 310.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M1130 84.91 L1130 475.09' stroke-width='15'%3e%3c/path%3e%3cpath d='M1150 211.07 L1150 348.93' stroke-width='15'%3e%3c/path%3e%3cpath d='M1170 246.77 L1170 313.23' stroke-width='15'%3e%3c/path%3e%3cpath d='M1190 158.69 L1190 401.31' stroke-width='15'%3e%3c/path%3e%3cpath d='M1210 218.26 L1210 341.74' stroke-width='15'%3e%3c/path%3e%3cpath d='M1230 113.88 L1230 446.12' stroke-width='15'%3e%3c/path%3e%3cpath d='M1250 187.94 L1250 372.06' stroke-width='15'%3e%3c/path%3e%3cpath d='M1270 185.73 L1270 374.27' stroke-width='15'%3e%3c/path%3e%3cpath d='M1290 180.03 L1290 379.97' stroke-width='15'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1002'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='720' cy='280' r='625.75' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1003'%3e%3cstop stop-color='rgba(0%2c 0%2c 0%2c 1)' offset='0.25'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 124%2c 0%2c 1)' offset='1'%3e%3c/stop%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e");    background-repeat: repeat-y;
            background-size: contain;
            background-position: center;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: monospace;
        }

       .container {
            max-width: 900px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        header {
            background-color: var(--oga-orange);
            color: var(--oga-white);
            padding: 1.5rem 1rem;
            text-align: center;
            margin-bottom: 2rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        header h1 { margin: 0; font-size: 2rem; }
        header p { margin: 0.5rem 0 0 0; opacity: 0.9; }

        h2 { /* Page title like "Getting Started Guide" */
            color: var(--oga-white);
            text-shadow: 0 1px 3px rgba(0,0,0,0.2);
            margin-bottom: 1rem;
            font-size: 1.8rem;
        }

        .intro { /* Paragraph under H2 */
            font-size: 1.1rem;
            color: var(--oga-steel-gray-light);
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
            margin-bottom: 2.5rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .onboarding-step { /* Glassmorphic cards */
            background: var(--oga-glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 12px;
            border: 1px solid var(--oga-glass-border);
            padding: 2rem 2.5rem;
            margin-bottom: 2.5rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.17);
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .onboarding-step h3 { /* Card titles */
            color: var(--oga-orange);
            margin-top: 0;
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--oga-steel-gray-light);
            text-align: center;
            font-size: 1.6rem;
        }

        .onboarding-step p,
        .onboarding-step li {
            margin-bottom: 1.25rem;
            line-height: 1.7;
            color: ghostwhite;
            font-size: 1rem;
        }
        .onboarding-step strong { color: var(--oga-orange); }

        .onboarding-step ul { list-style: none; padding-left: 0; margin-bottom: 1.5rem; }
        .onboarding-step ul li { position: relative; padding-left: 25px; margin-bottom: 0.8rem; }
        .onboarding-step ul li::before {
            content: '✓'; position: absolute; left: 0; top: 1px;
            color: var(--oga-orange); font-weight: bold;
        }
        .portal-features { list-style: none; padding-left: 0; }
        .portal-features li { display: flex; align-items: flex-start; padding-left: 0; margin-bottom: 0.8rem; }
        .portal-features li::before { content: none; }
        .portal-features i {
            color: var(--oga-orange); margin-right: 12px; width: 20px;
            text-align: center; margin-top: 4px; flex-shrink: 0;
        }
        .onboarding-step ol { list-style: decimal inside; padding-left: 5px; margin-bottom: 1.5rem; }
        .onboarding-step ol li { padding-left: 0; margin-bottom: 0.8rem; }
        .onboarding-step ol li::before { content: none; }

        .onboarding-step img.onboarding-image {
            display: block; margin: 1.5rem auto; max-width: 90%; height: auto;
            border-radius: 6px; border: 1px solid var(--oga-steel-gray-light);
            box-shadow: 0 2px 5px rgba(0,0,0,0.08);
        }
        .image-pair-container { overflow: hidden; margin-bottom: 1.5rem; }
        .image-pair-container img { margin-top: 0.5rem; margin-bottom: 0.5rem; }
        .img-left { float: left; max-width: 48%; margin-right: 4%; }
        .img-right { float: left; max-width: 48%; }
        .clear-float { clear: both; }

        .video-container {
            position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
            max-width: 100%; background: var(--oga-steel-gray-dark); margin: 1.5rem auto;
            border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

        .cta-button {
            display: block; width: fit-content; margin: 2rem auto 0.5rem auto;
            background-color: var(--oga-orange); color: var(--oga-white) !important;
            padding: 14px 30px; text-decoration: none; border-radius: 5px;
            font-weight: bold; font-size: 1.1rem; text-align: center;
            transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
            border: none; cursor: pointer; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }
        .cta-button:hover, .cta-button:focus {
            background-color: var(--oga-orange-dark); color: var(--oga-white) !important;
            transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
        }

        .resource-link {
            color: var(--oga-orange); font-weight: 600; text-decoration: none;
            border-bottom: 1px dotted var(--oga-orange);
            transition: color 0.2s ease, border-bottom 0.2s ease;
        }
        .resource-link:hover {
            color: var(--oga-orange-dark); border-bottom: 1px solid var(--oga-orange-dark);
        }

        /* --- START: Interactive SVG Flowchart Styles --- */
        .interactive-flowchart-wrapper { margin-top: 2.5rem; margin-bottom: 1.5rem; }
        .interactive-flowchart-wrapper h4 { /* Title above the flowchart */
            font-size: 1.3rem; color: var(--oga-orange);
            margin-bottom: 1.5rem; text-align: center;
        }
        .flowchart-container { width: 100%; position: relative; overflow: hidden; }

        .interactive-node { cursor: pointer; transition: filter 0.3s; }
        /* Removed transform from node group as it's better on the rect directly for SVG */

        .interactive-node .node-rect { /* Target the rect for hover/active effects */
             transition: transform 0.3s, fill 0.3s, stroke 0.3s;
        }
        .interactive-node:hover .node-rect {
            transform: scale(1.05);
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
        }
        .interactive-node.active .node-rect {
            filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
            stroke-width: 3px !important;
        }

        .node-rect.completed-step {
            fill: rgba(255, 152, 0, 0.15); stroke: var(--oga-orange-dark); stroke-width: 2px;
        }
        .node-rect.completed-step:hover { fill: rgba(255, 152, 0, 0.25); }

        .node-rect.current-step {
            fill: var(--oga-glass-bg); stroke: var(--oga-orange); stroke-width: 3px;
        }
        .node-rect.current-step:hover { fill: rgba(255, 255, 255, 0.3); }

        .node-rect.future-step {
            fill: rgba(255, 255, 255, 0.1); stroke: var(--oga-steel-gray-light); stroke-width: 1.5px;
        }
        .node-rect.future-step:hover { fill: rgba(255, 255, 255, 0.15); stroke: var(--oga-steel-gray-medium); }

        .interactive-node .node-text { /* General text style within nodes */
            pointer-events: none; font-size: 10px; font-weight: 500; fill: var(--oga-steel-gray-dark);
        }
        /* Specific text styles for different step states */
        .interactive-node .completed-step + .node-text,
        .interactive-node .completed-step ~ .node-text { /* Use ~ for subsequent siblings */
            fill: var(--oga-steel-gray-dark); font-weight: normal; /* Changed from bold to normal for completed */
        }
        .interactive-node .current-step + .node-text,
        .interactive-node .current-step ~ .node-text {
            fill: var(--oga-orange-dark); font-weight: bold;
        }
        .interactive-node .future-step + .node-text,
        .interactive-node .future-step ~ .node-text {
            fill: ghostwhite; /* Slightly lighter for future steps */
        }

        .interactive-connection {
            stroke-dasharray: 1000; stroke-dashoffset: 1000;
            animation: interactive-draw 1.5s ease-in-out forwards;
            stroke: var(--oga-orange); stroke-width: 2px;
        }
        /* ----- START: OGA Learning Loop (Static Styled) CSS ----- */
.oga-learning-loop-container h4 { /* Title above this specific loop */
    font-size: 1.3rem; /* Or reuse .diagram-container h4 if preferred */
    color: var(--oga-orange);
    margin-bottom: 1.5rem;
    text-align: center;
}

.loop-node-static .node-rect.loop-item-rect {
    /* Style these like one of your preferred interactive node states, e.g., current-step */
    fill: var(--oga-glass-bg);
    stroke: var(--oga-orange);
    stroke-width: 2.5px; /* Slightly emphasized stroke */
    rx: 8;
    ry: 8; /* Ensure rounded corners are explicitly set if not inherited */
    filter: url(#dropshadow-loop); /* Use the filter defined in this SVG */
    transition: transform 0.2s ease-out; /* Optional: slight hover effect */
}

.loop-node-static:hover .node-rect.loop-item-rect {
    transform: scale(1.03); /* Slight hover scale */
}

.loop-node-static .node-text-static {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 500; /* Or bold if preferred for all loop items */
    fill: ghostwhite;
    text-anchor: middle;
    dominant-baseline: central; /* Helps with vertical centering */
    pointer-events: none; /* Text shouldn't capture clicks */
}

.loop-arrow-static {
    stroke: var(--oga-orange);
    stroke-width: 2px;
    fill: none;
    marker-end: url(#arrowhead-loop); /* Use marker defined in this SVG */
}

        /* Specific styling for article links list in Section 6 - remove checkmark */
        #support-articles-list li::before {
            content: ''; /* No checkmark for these links */
        }
        #support-articles-list li {
            padding-left: 0; /* No extra padding if no icon */
        }

        @keyframes interactive-draw { to { stroke-dashoffset: 0; } }

        .interactive-info-panel {
            margin-top: 25px; padding: 20px; border-radius: 8px;
            background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            display: none; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
            opacity: 0; transform: translateY(10px);
        }
        .interactive-info-panel.active { display: block; opacity: 1; transform: translateY(0); }
        .interactive-info-title {
            margin-top: 0; color: var(--oga-orange);
            border-bottom: 2px solid var(--oga-steel-gray-light);
            padding-bottom: 10px; font-size: 1.2rem;
        }
        .interactive-info-panel p {
            color: var(--oga-steel-gray-dark); font-size: 0.95rem; line-height: 1.6;
        }

        .interactive-btn-container { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }
        .interactive-button {
            padding: 10px 20px; background-color: var(--oga-orange); color: var(--oga-white);
            border: none; border-radius: 5px; cursor: pointer;
            font-weight: bold; font-size: 0.9rem;
            transition: background-color 0.2s ease, transform 0.1s ease;
        }
        .interactive-button:hover { background-color: var(--oga-orange-dark); transform: translateY(-1px); }
        .interactive-button:disabled { background-color: var(--oga-steel-gray-medium); cursor: not-allowed; }
        /* --- END: Interactive SVG Flowchart Styles --- */


        /* --- OGA Learning Loop SVG (Section 3) Styles --- */
        .diagram-container { /* General container for diagrams if you have more */
            text-align: center; margin: 2rem auto; padding: 1rem 0;
        }
        .diagram-container h4 { /* Title for OGA Learning Loop SVG */
            color: var(--oga-orange); margin-bottom: 1.5rem;
            text-align: center; font-size: 1.2rem;
        }
        .loop-node rect { /* For OGA Learning Loop SVG */
            fill: var(--oga-glass-bg); stroke: var(--oga-orange);
            stroke-width: 2px; rx: 8; filter: url(#dropshadow); /* Ensure #dropshadow is defined in its SVG */
        }
        .loop-node text { /* For OGA Learning Loop SVG */
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 10px; fill: var(--oga-steel-gray-dark);
            text-anchor: middle; dominant-baseline: central; pointer-events: none;
        }
        .loop-arrow { /* For OGA Learning Loop SVG */
            stroke: var(--oga-orange); stroke-width: 2; fill: none;
            marker-end: url(#arrowhead); /* Ensure #arrowhead is defined in its SVG */
        }
        /* Make sure #arrowhead polygon fill is var(--oga-orange) within its SVG defs */
        /* --- END: OGA Learning Loop SVG Styles --- */

        footer {
            text-align: center; margin-top: 3rem; padding: 1.5rem;
            background-color: var(--oga-steel-gray-dark); color: var(--oga-steel-gray-light);
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .container { margin: 1rem auto; padding: 0 0.5rem; }
            .onboarding-step { padding: 1.5rem; margin-bottom: 1.5rem; }
            .onboarding-step h3 { font-size: 1.4rem; }
            .onboarding-step p, .onboarding-step li { font-size: 0.95rem; }
            header h1 { font-size: 1.8rem; }
            h2 { font-size: 1.6rem; }
            .intro { font-size: 1rem; }
            .cta-button { padding: 12px 25px; font-size: 1rem; }
            .img-left, .img-right { float: none; max-width: 90%; margin: 1rem auto; }
        }
        @media (max-width: 480px) {
            .onboarding-step { padding: 1rem; }
            .onboarding-step h3 { font-size: 1.3rem; }
            header { padding: 1rem; }
            header h1 { font-size: 1.6rem; }
            .intro { font-size: 0.95rem; }
        }