/* Wellness Therapy Brand Color Palette Variables */
        :root {
            --bg-color: #f8fafc;         /* Soft light wellness gray/white */
            --card-bg: #ffffff;          /* Pure crisp white cards */
            --primary: #0d9488;          /* Healing Ocean Teal accent */
            --primary-hover: #0f766e;    /* Deep Sea Teal */
            --text-main: #1e293b;        /* Crisp Charcoal Slate for readability */
            --text-heading: #1a365d;     /* Deep Royal Blue for premium trust anchoring */
            --text-muted: #64748b;       /* Soft slate metadata text */
            --border: #e2e8f0;           /* Gentle dividers */
            --border-hover: #cbd5e1;     /* Subtle interactive border shift */
            --error: #df4759;            /* Warning alerts */
            --success: #10b981;          /* Renewal Emerald green */
        }
        
        .tn-beginning-container { 
            background-color: var(--bg-color); 
            color: var(--text-main); 
            min-height: 100vh; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            padding: 24px 16px; 
            line-height: 1.6; 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        
        .tn-beginning-container .container-box { 
            width: 100%; 
            max-width: 680px; 
            background: var(--card-bg); 
            border: 1px solid var(--border); 
            border-radius: 20px; 
            padding: 45px; 
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); 
            position: relative; 
        }
        
        /* High-Converting Wellness Header Framing */
        .tn-beginning-container .container-box .headline-banner { 
            text-align: center; 
            margin-bottom: 35px; 
        }
        .tn-beginning-container .container-box .headline-banner p { 
            color: var(--primary); 
            font-size: 0.9rem; 
            text-transform: uppercase; 
            letter-spacing: 1.5px; 
            font-weight: 700; 
            margin-bottom: 8px;
        }
        .tn-beginning-container .container-box .headline-banner h1 { 
            font-size: 1.75rem; 
            color: var(--text-heading); 
            font-weight: 800; 
            line-height: 1.3; 
        }
        
        /* Modern Segmented Progress Bar */
        .tn-beginning-container .container-box .progress-container { 
            width: 100%; 
            height: 6px; 
            background: #f1f5f9; 
            border-radius: 10px; 
            margin-bottom: 40px; 
            overflow: hidden; 
        }
        .tn-beginning-container .container-box .progress-bar { 
            height: 100%; 
            width: 14.2%; 
            background: linear-gradient(90deg, var(--primary), #2dd4bf); 
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
        }

        /* Step Visibility Control */
        .tn-beginning-container .container-box .form-step { display: none; }
        .tn-beginning-container .container-box .form-step.active { display: block; animation: fadeInUp 0.4s ease-out forwards; }
        @keyframes fadeInUp { 
            from { opacity: 0; transform: translateY(10px); } 
            to { opacity: 1; transform: translateY(0); } 
        }

        .tn-beginning-container .container-box .step-title { 
            font-size: 1.4rem; 
            font-weight: 700; 
            color: var(--text-heading); 
            margin-bottom: 6px; 
        }
        .tn-beginning-container .container-box .step-subtitle { 
            font-size: 0.98rem; 
            color: var(--text-muted); 
            margin-bottom: 28px; 
        }

        /* Pure Input Styling fields */
        .tn-beginning-container .container-box .input-group { margin-bottom: 24px; }
        .tn-beginning-container .container-box .input-group label { 
            display: block; 
            font-size: 0.85rem; 
            font-weight: 700; 
            text-transform: uppercase; 
            margin-bottom: 8px; 
            letter-spacing: 0.5px; 
            color: var(--text-heading); 
        }
        .tn-beginning-container .container-box .input-control { 
            width: 100%; 
            background: #fafafa; 
            border: 1px solid var(--border); 
            padding: 14px 18px; 
            border-radius: 10px; 
            color: var(--text-main); 
            font-size: 1rem; 
            transition: all 0.2s ease; 
        }
        .tn-beginning-container .container-box .input-control:focus { 
            outline: none; 
            border-color: var(--primary); 
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15); 
        }

        /* Premium Selection Option Blocks */
        .tn-beginning-container .container-box .options-grid { 
            display: grid; 
            grid-template-columns: 1fr; 
            gap: 12px; 
        }
        .tn-beginning-container .container-box .clickable-card { 
            position: relative; 
            background: #ffffff; 
            border: 1px solid var(--border); 
            padding: 16px 20px; 
            border-radius: 12px; 
            cursor: pointer; 
            transition: all 0.2s ease; 
            display: flex; 
            align-items: center; 
            gap: 14px; 
            user-select: none; 
        }
        .tn-beginning-container .container-box .clickable-card:hover { 
            border-color: var(--border-hover); 
            background: #fafafa; 
        }
        .tn-beginning-container .container-box .clickable-card input { 
            position: absolute; 
            opacity: 0; 
            cursor: pointer; 
        }
        
        /* Custom Custom Choice Rings/Boxes */
        .tn-beginning-container .container-box .indicator { 
            width: 20px; 
            height: 20px; 
            border: 2px solid #cbd5e1; 
            display: inline-block; 
            flex-shrink: 0; 
            transition: all 0.2s ease; 
            background: #ffffff;
        }
        .tn-beginning-container .container-box .type-radio .indicator { border-radius: 50%; }
        .tn-beginning-container .container-box .type-checkbox .indicator { border-radius: 6px; }
        
        /* Card Active Highlight Patterns */
        .tn-beginning-container .container-box .clickable-card input:checked ~ .indicator { 
            background: var(--primary); 
            border-color: var(--primary); 
            box-shadow: inset 0 0 0 4px #ffffff; 
        }
        .tn-beginning-container .container-box .clickable-card input:checked ~ .card-text { 
            color: var(--text-heading); 
            font-weight: 600; 
        }
        .tn-beginning-container .container-box .clickable-card.selected-card-style { 
            border-color: var(--primary); 
            background: rgba(13, 148, 136, 0.04); 
            box-shadow: 0 4px 12px rgba(13, 148, 136, 0.05);
        }

        /* Commitment Scale Slider Elements */
        .tn-beginning-container .container-box .slider-wrapper { 
            padding: 20px 10px; 
            text-align: center; 
        }
        .tn-beginning-container .container-box .range-slider { 
            width: 100%; 
            -webkit-appearance: none; 
            height: 8px; 
            border-radius: 5px; 
            background: #e2e8f0; 
            outline: none; 
            margin: 30px 0; 
        }
        .tn-beginning-container .container-box .range-slider::-webkit-slider-thumb { 
            -webkit-appearance: none; 
            appearance: none; 
            width: 26px; 
            height: 26px; 
            border-radius: 50%; 
            background: var(--primary); 
            cursor: pointer; 
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
            transition: transform 0.1s; 
        }
        .tn-beginning-container .container-box .range-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
        .tn-beginning-container .container-box .slider-badge { 
            font-size: 3rem; 
            font-weight: 800; 
            color: var(--primary); 
            margin-bottom: 5px; 
        }
        .tn-beginning-container .container-box .slider-desc { 
            font-size: 1.05rem; 
            color: var(--text-heading); 
            min-height: 24px; 
            font-weight: 600; 
        }

        /* Clean Footer Controls */
        .tn-beginning-container .container-box .button-row { 
            display: flex; 
            justify-content: space-between; 
            margin-top: 40px; 
            gap: 15px; 
            border-top: 1px solid var(--border); 
            padding-top: 30px; 
        }
        .tn-beginning-container .container-box .btn { 
            padding: 14px 30px; 
            font-size: 1rem; 
            font-weight: 600; 
            border-radius: 10px; 
            cursor: pointer; 
            transition: all 0.2s ease; 
            outline: none; 
            border: none; 
            min-width: 130px; 
        }
        .tn-beginning-container .container-box .btn-primary { 
            background: var(--primary); 
            color: #ffffff; 
            margin-left: auto; 
            display: flex; 
            align-items: center; 
            gap: 8px; 
            box-shadow: 0 4px 12px rgba(13, 148, 136, 0.2);
        }
        .tn-beginning-container .container-box .btn-primary:hover { 
            background: var(--primary-hover); 
            box-shadow: 0 4px 16px rgba(13, 148, 136, 0.3);
        }
        .tn-beginning-container .container-box .btn-secondary { 
            background: transparent; 
            color: var(--text-muted); 
            border: 1px solid var(--border); 
        }
        .tn-beginning-container .container-box .btn-secondary:hover { 
            color: var(--text-main); 
            border-color: var(--text-muted); 
            background: #fafafa;
        }

        /* Renewal Thank You Confirmation Frame */
        .tn-beginning-container .container-box .success-view { 
            text-align: center; 
            display: none; 
            animation: fadeInUp 0.5s ease-out forwards; 
        }
        .tn-beginning-container .container-box .success-icon { 
            width: 72px; 
            height: 72px; 
            background: rgba(16, 185, 129, 0.1); 
            color: var(--success); 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            margin: 0 auto 28px; 
            font-size: 36px; 
            font-weight: bold; 
        }
        .tn-beginning-container .container-box .success-view h2 { 
            font-size: 2rem; 
            margin-bottom: 12px; 
            color: var(--text-heading); 
        }
        .tn-beginning-container .container-box .success-view p.lead { 
            color: var(--text-muted); 
            font-size: 1.1rem; 
            margin-bottom: 35px; 
        }
        
        .tn-beginning-container .container-box .urgency-block { 
            background: rgba(239, 68, 68, 0.02); 
            border: 1px dashed #fca5a5; 
            border-radius: 14px; 
            padding: 26px; 
            margin-bottom: 35px; 
            text-align: left; 
        }
        .tn-beginning-container .container-box .urgency-block h4 { 
            color: #dc2626; 
            font-size: 1.05rem; 
            text-transform: uppercase; 
            letter-spacing: 0.5px; 
            margin-bottom: 14px; 
            font-weight: 700; 
        }
        .tn-beginning-container .container-box .urgency-list { list-style: none; }
        .tn-beginning-container .container-box .urgency-list li { 
            margin-bottom: 10px; 
            color: var(--text-main); 
            font-size: 1rem; 
            display: flex; 
            align-items: center; 
            gap: 12px; 
        }
        .tn-beginning-container .container-box .urgency-list li::before { 
            content: "•"; 
            color: #dc2626; 
            font-weight: bold; 
            font-size: 1.4rem; 
        }
        
        .tn-beginning-container .container-box .callout { 
            background: rgba(13, 148, 136, 0.03); 
            border-left: 4px solid var(--primary); 
            padding: 20px; 
            border-radius: 0 12px 12px 0; 
            text-align: left; 
            font-size: 1rem; 
            color: var(--text-main); 
            line-height: 1.6;
        }
        
        .tn-beginning-container .container-box .phone-wrapper{
            display:flex;
            gap:10px;
        }
        
        .tn-beginning-container .container-box #countryCode{
            width:100px;
            background:#f1f5f9;
            border:1px solid #e2e8f0;
            border-radius:10px;
            text-align:center;
            font-weight:600;
        }

        @media (max-width: 550px) {
            .tn-beginning-container .container-box .container { padding: 30px 20px; }
            .tn-beginning-container .container-box .button-row { flex-direction: column-reverse; }
            .tn-beginning-container .container-box .btn { width: 100%; justify-content: center; }
            .tn-beginning-container .container-box .headline-banner h1 { font-size: 1.5rem; }
        }
#formMessage{margin-top:20px}
.tn-beginning-container .container-box .error-message{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;padding:12px;border-radius:10px}
