/* ============================================================
   Remote Viewing Training — shared styles.

   Every page links this file. It holds the design tokens, the
   header, nav, footer, buttons and form styling, plus the
   responsive rules. Change something here and it changes on
   every page at once.

   Page-specific styling stays in that page's own <style> block.
   ============================================================ */
:root {
                --ink: #060912;
                --ink-2: #0a0f1d;
                --slate-line: #243049;
                --mist: #8e9bb3;
                --bone: #f3ecdd;
                --ember: #c89d5f; /* gold accent */
                --signal: #f3ecdd; /* highlight accent — matches body text (no second hue) */
                --danger: #b35a4a;
                /* Avenir Next ships on Apple devices; Poppins is the
                   Google Fonts fallback for everyone else (matches the
                   brand booklet). */
                --font-body: "Avenir Next", "Avenir", "Poppins",
                    -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
                    sans-serif;
                --font-display: "Avenir Next", "Avenir", "Poppins",
                    -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
                    sans-serif;
                --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
                --radius: 10px;
            }
* {
                box-sizing: border-box;
            }
html,
            body {
                margin: 0;
                padding: 0;
            }
html {
                scroll-behavior: smooth;
            }
body {
                min-height: 100vh;
                background-color: #04050c;
                background-image:
                    radial-gradient(
                        1200px 600px at 50% -10%,
                        rgba(200, 157, 95, 0.07),
                        transparent 60%
                    ),
                    radial-gradient(
                        900px 500px at 100% 110%,
                        rgba(200, 157, 95, 0.05),
                        transparent 55%
                    );
                color: var(--bone);
                font-family: var(--font-body);
                font-size: 16px;
                line-height: 1.6;
                -webkit-font-smoothing: antialiased;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 0;
            }
#starfield {
                position: fixed;
                inset: 0;
                width: 100%;
                height: 100%;
                z-index: 0;
                pointer-events: none;
                display: block;
            }
a {
                color: var(--ember);
                text-decoration: none;
            }
a:hover {
                text-decoration: underline;
            }
.wrap {
                width: 100%;
                max-width: 960px;
                position: relative;
                z-index: 1;
                flex: 1 0 auto;
                padding: clamp(30px, 6vw, 60px) 20px;
            }
.site-header {
                position: sticky;
                top: 0;
                z-index: 10;
                width: 100%;
                background: rgba(4, 5, 12, 0.72);
                -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
                border-bottom: 1px solid rgba(36, 48, 73, 0.55);
            }
.header-inner {
                max-width: 960px;
                width: 100%;
                margin: 0 auto;
                padding: 11px 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
            }
.brand {
                display: flex;
                align-items: center;
                gap: 12px;
            }
.brand img {
                width: auto;
                height: 46px;
                max-width: 60px;
                object-fit: contain;
                opacity: 0.95;
            }
.brand .marks {
                display: flex;
                flex-direction: column;
                line-height: 1.2;
            }
.brand .name {
                font-family: var(--font-display);
                font-weight: 600;
                font-size: 13px;
                letter-spacing: 0.16em;
                text-transform: uppercase;
                color: var(--bone);
            }
.brand .sub {
                font-family: var(--font-display);
                font-weight: 400;
                font-size: 11px;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: var(--mist);
            }
.header-nav {
                display: flex;
                align-items: center;
                gap: 20px;
                flex: 1;
                justify-content: flex-end;
                margin-right: 4px;
            }
.header-nav a {
                font-family: var(--font-mono);
                font-size: 11.5px;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: var(--mist);
                white-space: nowrap;
                transition: color 0.18s ease;
            }
.header-nav a:hover {
                color: var(--ember);
                text-decoration: none;
            }
.nav-toggle {
                display: none;
                appearance: none;
                background: transparent;
                border: 1px solid var(--slate-line);
                border-radius: var(--radius);
                width: 40px;
                height: 36px;
                padding: 0 9px;
                cursor: pointer;
                flex-direction: column;
                justify-content: center;
                gap: 4px;
                flex-shrink: 0;
                transition: border-color 0.18s ease;
            }
.nav-toggle:hover { border-color: rgba(200, 157, 95, 0.6); }
.nav-toggle span {
                display: block;
                height: 1.5px;
                width: 100%;
                background: var(--bone);
                border-radius: 2px;
                transition:
                    transform 0.22s ease,
                    opacity 0.16s ease;
            }
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
                transform: translateY(5.5px) rotate(45deg);
            }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
                transform: translateY(-5.5px) rotate(-45deg);
            }
.header-actions {
                display: flex;
                align-items: center;
                gap: 14px;
                flex-shrink: 0;
            }
.social {
                display: flex;
                align-items: center;
                gap: 2px;
            }
.social a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                color: var(--mist);
                border-radius: var(--radius);
                transition:
                    color 0.18s ease,
                    background 0.18s ease;
            }
.social a:hover {
                color: var(--ember);
                background: rgba(200, 157, 95, 0.1);
                text-decoration: none;
            }
.social svg {
                width: 17px;
                height: 17px;
                display: block;
                fill: currentColor;
            }
.btn {
                appearance: none;
                width: 100%;
                border: 1px solid var(--ember);
                background: var(--ember);
                color: var(--ink);
                font-family: var(--font-mono);
                font-size: 12px;
                font-weight: 500;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                padding: 13px 18px;
                border-radius: var(--radius);
                cursor: pointer;
                transition:
                    transform 0.12s ease,
                    background 0.18s ease,
                    color 0.18s ease;
            }
.btn:hover {
                background: transparent;
                color: var(--ember);
            }
.btn:active {
                transform: translateY(1px);
            }
.btn:disabled {
                opacity: 0.55;
                cursor: default;
            }
a.btn {
                display: block;
                text-align: center;
                text-decoration: none;
            }
a.btn:hover {
                text-decoration: none;
            }
.field {
                margin-bottom: 14px;
            }
label {
                display: block;
                font-family: var(--font-mono);
                font-size: 11px;
                letter-spacing: 0.18em;
                text-transform: uppercase;
                color: var(--mist);
                margin-bottom: 7px;
            }
input,
            textarea {
                width: 100%;
                background: var(--ink);
                border: 1px solid var(--slate-line);
                border-radius: var(--radius);
                color: var(--bone);
                font-family: var(--font-body);
                font-size: 15px;
                padding: 12px 14px;
                transition:
                    border-color 0.18s ease,
                    box-shadow 0.18s ease;
            }
input:focus,
            textarea:focus {
                outline: none;
                border-color: var(--ember);
                box-shadow: 0 0 0 3px rgba(200, 157, 95, 0.14);
            }
textarea {
                resize: vertical;
                min-height: 110px;
            }
.row2 {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
            }
.hp {
                position: absolute;
                left: -9999px;
                width: 1px;
                height: 1px;
                overflow: hidden;
            }
.form-status {
                display: none;
                font-family: var(--font-mono);
                font-size: 12px;
                letter-spacing: 0.04em;
                margin-top: 14px;
                padding: 12px 14px;
                border-radius: var(--radius);
            }
.form-status.show {
                display: block;
            }
.form-status.ok {
                color: var(--ember);
                border: 1px solid rgba(200, 157, 95, 0.45);
                background: rgba(200, 157, 95, 0.09);
            }
.form-status.err {
                color: var(--danger);
                border: 1px solid rgba(179, 90, 74, 0.45);
                background: rgba(179, 90, 74, 0.08);
            }
.site-footer {
                position: relative;
                z-index: 1;
                width: 100%;
                margin-top: clamp(48px, 9vw, 88px);
                border-top: 1px solid rgba(36, 48, 73, 0.55);
                background: rgba(4, 5, 12, 0.55);
            }
.footer-inner {
                max-width: 960px;
                width: 100%;
                margin: 0 auto;
                padding: 38px 20px 42px;
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 16px;
            }
.footer-brand {
                display: flex;
                align-items: center;
                gap: 10px;
            }
.footer-brand img {
                width: 26px;
                height: 26px;
                object-fit: contain;
                opacity: 0.95;
            }
.footer-brand span {
                font-family: var(--font-display);
                font-weight: 600;
                font-size: 12px;
                letter-spacing: 0.16em;
                text-transform: uppercase;
                color: var(--bone);
            }
.footer-tag {
                margin: 0;
                color: var(--mist);
                font-size: 13.5px;
                line-height: 1.6;
                max-width: 64ch;
            }
.nowrap {
                white-space: nowrap;
            }
.footer-pedigree {
                display: block;
                margin-top: 4px;
                font-style: italic;
                color: var(--signal);
            }
.footer-social {
                justify-content: center;
                margin-bottom: 2px;
            }
.footer-social a {
                width: 34px;
                height: 34px;
            }
.footer-social svg {
                width: 18px;
                height: 18px;
            }
.footer-links {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px 22px;
            }
.footer-links a {
                font-family: var(--font-mono);
                font-size: 11.5px;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                color: var(--mist);
                transition: color 0.18s ease;
            }
.footer-links a:hover {
                color: var(--ember);
                text-decoration: none;
            }
.footer-legal {
                font-family: var(--font-mono);
                font-size: 10.5px;
                letter-spacing: 0.16em;
                text-transform: uppercase;
                color: #5f6b80;
                margin-top: 4px;
            }

            /* =========================================================
               RESPONSIVE — three tiers:
                 <= 900px  wide-tablet: tighten the header
                 <= 720px  tablet/large phone: all two-column layouts stack
                 <= 480px  phone: tighten type, padding and controls
               ========================================================= */

            /* ---------- <= 900px ---------- */
            @media (max-width: 900px) {
                .header-nav {
                    gap: 15px;
                }
                .header-nav a {
                    font-size: 11px;
                    letter-spacing: 0.1em;
                }
                .header-actions {
                    gap: 10px;
                }
            }

            /* ---------- <= 720px: single column ---------- */
            @media (max-width: 720px) {
                .header-inner {
                    flex-wrap: wrap;
                    row-gap: 9px;
                    justify-content: space-between;
                }
                .nav-toggle {
                    display: flex;
                    order: 2;
                }
                .header-actions {
                    order: 3;
                }
                /* nav collapses into a panel below the header row */
                .header-nav {
                    order: 4;
                    width: 100%;
                    flex: none;
                    flex-direction: column;
                    align-items: stretch;
                    gap: 0;
                    margin-right: 0;
                    padding-top: 0;
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.26s ease;
                }
                .header-nav a {
                    padding: 12px 4px;
                    font-size: 11px;
                    letter-spacing: 0.16em;
                    border-top: 1px solid rgba(36, 48, 73, 0.7);
                }
            }

            /* ---------- <= 480px: phone ---------- */
            @media (max-width: 480px) {
                .wrap {
                    padding-left: 16px;
                    padding-right: 16px;
                }
                /* keep the sticky header compact — it eats screen height */
                .header-inner {
                    padding: 8px 16px 6px;
                    row-gap: 3px;
                }
                .header-nav {
                    padding-top: 0;
                }
                .footer-inner {
                    padding-left: 16px;
                    padding-right: 16px;
                }
                /* Centred header: brand on its own row, then nav + icons
                   together on a second centred row. Matches the centred
                   hero and footer, and stays at two rows. */
                .brand {
                    gap: 9px;
                }
                .brand img {
                    height: 36px;
                }
                .brand .name {
                    font-size: 11.5px;
                    letter-spacing: 0.08em;
                }
                .brand .sub {
                    font-size: 10.5px;
                    letter-spacing: 0.08em;
                }
                .header-nav {
                    gap: 15px;
                }
                .header-actions {
                    gap: 0;
                }
                .social a {
                    width: 28px;
                    height: 28px;
                }
                .social svg {
                    width: 15px;
                    height: 15px;
                }
                .row2 {
                    grid-template-columns: 1fr;
                }
                .faq-item summary { font-size: 15.5px; }
                .faq-a p { font-size: 15px; }
                .footer-tag { font-size: 14.5px; }
                .header-nav a { font-size: 12px; }
                input, textarea { font-size: 16px; }
            }

            /* ---------- FAQ ---------- */
            .faq {
                margin-bottom: 20px;
            }
            .faq-head {
                text-align: center;
                margin-bottom: 20px;
            }
            .faq-head h2 {
                font-family: var(--font-display);
                font-weight: 600;
                font-size: 22px;
                letter-spacing: -0.01em;
                margin: 0;
            }
            .faq-item {
                background: rgba(10, 15, 29, 0.55);
                border: 1px solid var(--slate-line);
                border-radius: var(--radius);
                margin-bottom: 9px;
                overflow: hidden;
            }
            .faq-item summary {
                display: flex;
                align-items: flex-start;
                gap: 12px;
                cursor: pointer;
                padding: 16px 20px;
                font-size: 15.5px;
                line-height: 1.45;
                color: var(--bone);
                list-style: none;
                transition: color 0.16s ease;
            }
            .faq-item summary::-webkit-details-marker {
                display: none;
            }
            /* chevron, rotated when open */
            .faq-item summary::after {
                content: "";
                flex-shrink: 0;
                width: 8px;
                height: 8px;
                margin-top: 6px;
                margin-left: auto;
                border-right: 1.5px solid var(--ember);
                border-bottom: 1.5px solid var(--ember);
                transform: rotate(45deg);
                transition: transform 0.2s ease;
            }
            .faq-item[open] summary::after {
                transform: rotate(-135deg);
            }
            .faq-item summary:hover {
                color: var(--ember);
            }
            .faq-item[open] summary {
                color: var(--ember);
                padding-bottom: 8px;
            }
            .faq-a {
                padding: 0 20px 18px;
            }
            .faq-a p {
                margin: 0;
                color: #cfc8b8;
                font-size: 14.5px;
                line-height: 1.65;
                max-width: 78ch;
            }
            .faq-a em {
                color: var(--bone);
                font-style: italic;
            }
            .faq-note {
                margin: 18px 0 0;
                text-align: center;
                font-size: 13px;
                color: var(--mist);
                line-height: 1.6;
            }
            @media (max-width: 480px) {
                .faq-item summary {
                    padding: 14px 16px;
                    font-size: 14.5px;
                }
                .faq-a {
                    padding: 0 16px 16px;
                }
            }


            /* ---------- EmailOctopus embed ----------
               EO ships its own markup: form.emailoctopus-form > .main-form,
               text fields .form-control, submit .btn.btn-primary, honeypot
               .emailoctopus-form-row-hp. These rules restyle it to match the
               site. If EO renames anything, this is the block to update. */
            .eo-wrap { margin-top: auto; }
            .emailoctopus-form { max-width: none; margin: 0; }
            .emailoctopus-form .emailoctopus-form-row { margin-bottom: 12px; }
            .emailoctopus-form label {
                display: block;
                font-family: var(--font-mono) !important;
                font-size: 11px !important;
                letter-spacing: 0.18em;
                text-transform: uppercase;
                color: var(--mist) !important;
                margin-bottom: 7px;
            }
            .emailoctopus-form .form-control {
                width: 100% !important;
                background: var(--ink) !important;
                border: 1px solid var(--slate-line) !important;
                border-radius: var(--radius) !important;
                color: var(--bone) !important;
                font-family: var(--font-body) !important;
                font-size: 15px !important;
                padding: 12px 14px !important;
                box-shadow: none !important;
            }
            .emailoctopus-form .form-control::placeholder { color: #5f6b80 !important; }
            .emailoctopus-form .form-control:focus {
                outline: none !important;
                border-color: var(--ember) !important;
                box-shadow: 0 0 0 3px rgba(200, 157, 95, 0.14) !important;
            }
            .emailoctopus-form input[type="submit"],
            .emailoctopus-form .btn-primary {
                width: 100% !important;
                background: var(--ember) !important;
                border: 1px solid var(--ember) !important;
                border-radius: var(--radius) !important;
                color: var(--ink) !important;
                font-family: var(--font-mono) !important;
                font-size: 12px !important;
                font-weight: 500 !important;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                padding: 13px 18px !important;
                cursor: pointer;
                transition: background 0.18s ease, color 0.18s ease;
            }
            .emailoctopus-form input[type="submit"]:hover,
            .emailoctopus-form .btn-primary:hover {
                background: transparent !important;
                color: var(--ember) !important;
            }
            /* honeypot — off-screen, never seen by real visitors */
            .emailoctopus-form .emailoctopus-form-row-hp {
                position: absolute !important;
                left: -5000px !important;
            }
            .emailoctopus-success-message,
            .emailoctopus-error-message {
                font-family: var(--font-mono);
                font-size: 12px;
                letter-spacing: 0.04em;
                line-height: 1.5;
                margin-top: 12px;
                padding: 12px 14px;
                border-radius: var(--radius);
            }
            .emailoctopus-success-message {
                color: var(--ember);
                border: 1px solid rgba(200, 157, 95, 0.45);
                background: rgba(200, 157, 95, 0.09);
            }
            .emailoctopus-error-message {
                color: var(--danger);
                border: 1px solid rgba(179, 90, 74, 0.45);
                background: rgba(179, 90, 74, 0.08);
            }
            .eo-consent {
                font-size: 12px;
                line-height: 1.55;
                color: var(--mist);
                margin: 12px 0 0;
            }
            .eo-fallback { font-size: 14px; color: #cfc8b8; margin: 0; }