/* TwilioSansText font faces */
        @font-face {
            font-family: "TwilioSansText";
            font-style: normal;
            font-display: swap;
            font-weight: 400;
            src: local("") , url("https://pages.twilio.com/rs/294-TKB-300/images/TwilioSansText-Regular.woff2") format("woff2"), url("https://pages.twilio.com/rs/294-TKB-300/images/TwilioSansText-Regular.woff") format("woff");
            mso-generic-font-family: swiss;
            mso-font-alt: Arial;
        }
        @font-face {
            font-family: "TwilioSansText";
            font-style: italic;
            font-display: swap;
            font-weight: 400;
            src: local("") , url("https://pages.twilio.com/rs/294-TKB-300/images/TwilioSansText-RegularItl.woff2") format("woff2"), url("https://pages.twilio.com/rs/294-TKB-300/images/TwilioSansText-RegularItl.woff") format("woff");
            mso-generic-font-family: swiss;
            mso-font-alt: Arial;
        }
        @font-face {
            font-family: "TwilioSansText";
            font-style: normal;
            font-display: swap;
            font-weight: 700;
            src: local("") , url("https://pages.twilio.com/rs/294-TKB-300/images/TwilioSansText-Bold.woff2") format("woff2"), url("https://pages.twilio.com/rs/294-TKB-300/images/TwilioSansText-Bold.woff") format("woff");
            mso-generic-font-family: swiss;
            mso-font-alt: Arial;
        }
        @font-face {
            font-family: "TwilioSansText";
            font-style: italic;
            font-display: swap;
            font-weight: 700;
            src: local("") , url("https://pages.twilio.com/rs/294-TKB-300/images/TwilioSansText-BoldItl.woff2") format("woff2"), url("https://pages.twilio.com/rs/294-TKB-300/images/TwilioSansText-BoldItl.woff") format("woff");
            mso-generic-font-family: swiss;
            mso-font-alt: Arial;
        }

        /* Liquid glass look: lighter top/left, darker bottom/right */
        .card-glow {
            background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
            border: 1px solid rgba(255,255,255,0.06);
            box-shadow:
                -8px -8px 24px rgba(255,255,255,0.03), /* soft highlight top-left */
                10px 14px 34px rgba(0,0,0,0.6),       /* deep shadow bottom-right */
                inset 1px 1px 0 rgba(255,255,255,0.02);
            backdrop-filter: blur(6px);
        }

        /* slightly darker diagonal gradient background */
        body {
            margin: 0;
            background: url('/images/oc-background-1.png') center/cover no-repeat fixed, linear-gradient(135deg, #04162a 0%, #06243a 45%, #07324a 100%);
            color: white;
            font-family: 'TwilioSansText', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
        }

        /* Mode badges */
        .mode-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }
        .mode-badge.user {
            background: rgba(59,130,246,0.2);
            border: 1px solid rgba(59,130,246,0.3);
            color: rgba(147,197,253,0.9);
        }
        .mode-badge.kiosk {
            background: rgba(239,68,68,0.2);
            border: 1px solid rgba(239,68,68,0.3);
            color: rgba(252,165,165,0.9);
        }