*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

html{
scroll-behavior:smooth;
}

body{
background:
linear-gradient(
180deg,
#03101d 0%,
#041527 100%
);
font-family:'Syne',sans-serif;
color:#f5f7fb;
line-height:1.7;
overflow-x:hidden;
}

body.embx-lock{
overflow:hidden;
}

#embx{
width:100%;
padding:42px 18px 90px;
}

.embx-wrap{
width:100%;
max-width:980px;
margin:0 auto;
}

.embx-header{
background:
linear-gradient(
135deg,
rgba(9,22,40,.98),
rgba(3,12,25,.99)
);
border:
1px solid rgba(255,255,255,.06);
border-radius:38px;
padding:48px 42px;
margin-bottom:34px;
box-shadow:
0 20px 60px rgba(0,0,0,.32);
}

.embx-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:11px 24px;
border-radius:999px;
background:
rgba(72,120,255,.12);
border:
1px solid rgba(88,138,255,.25);
font-size:13px;
font-weight:700;
letter-spacing:.6px;
color:#7ea8ff;
margin-bottom:28px;
}

.embx-title{
font-family:
'Cormorant Garamond',
serif;
font-size:84px;
line-height:.94;
font-weight:700;
letter-spacing:-1.5px;
margin-bottom:30px;
color:#ffffff;
}

.embx-title span{
display:block;
color:#4f8bff;
}

.embx-sub{
font-size:22px;
line-height:2;
color:
rgba(255,255,255,.7);
max-width:760px;
margin-bottom:30px;
}

.embx-note{
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.07);
border-radius:24px;
padding:22px 24px;
font-size:15px;
line-height:1.9;
color:
rgba(255,255,255,.7);
}

.embx-note strong{
color:#ffd76a;
}

.embx-progress{
display:grid;
grid-template-columns:
repeat(5,1fr);
gap:16px;
margin-bottom:36px;
}

.embx-step{
padding:16px 14px;
border-radius:18px;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.06);
text-align:center;
font-size:14px;
font-weight:700;
letter-spacing:.3px;
color:
rgba(255,255,255,.42);
transition:.25s ease;
}

.embx-step.active{
background:
linear-gradient(
135deg,
rgba(67,117,255,.16),
rgba(67,117,255,.04)
);
border:
1px solid rgba(88,138,255,.35);
color:#ffffff;
box-shadow:
0 10px 24px rgba(67,117,255,.14);
}

.embx-screen{
display:none;
animation:embxFade .25s ease;
}

.embx-screen.active{
display:block;
}

@keyframes embxFade{
from{
opacity:0;
transform:translateY(8px);
}
to{
opacity:1;
transform:none;
}
}

.embx-panel,
.embx-resultbox{
background:
linear-gradient(
180deg,
rgba(7,20,38,.98),
rgba(4,14,28,.99)
);
border:
1px solid rgba(255,255,255,.06);
border-radius:36px;
padding:46px 38px;
box-shadow:
0 18px 55px rgba(0,0,0,.28);
animation:embxFade .25s ease;
}

.embx-h{
font-family:
'Cormorant Garamond',
serif;
font-size:64px;
line-height:1;
margin-bottom:18px;
font-weight:700;
color:#ffffff;
}

.embx-p{
font-size:19px;
line-height:2;
color:
rgba(255,255,255,.68);
margin-bottom:36px;
max-width:720px;
}

.embx-grid{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:26px;
margin-bottom:36px;
}

.embx-field{
position:relative;
}

.embx-lbl{
display:block;
margin-bottom:12px;
font-size:14px;
font-weight:700;
letter-spacing:.5px;
color:#ffffff;
}

.embx-inp,
.embx-select,
.embx-textarea{
width:100%;
border-radius:18px;
border:
1px solid rgba(255,255,255,.08);
background:
rgba(255,255,255,.04);
padding:0 20px;
font-size:16px;
font-family:'Syne',sans-serif;
color:#ffffff;
outline:none;
transition:.22s ease;
appearance:none;
}

.embx-inp,
.embx-select{
height:66px;
}

.embx-textarea{
padding:22px;
min-height:220px;
resize:vertical;
line-height:1.9;
}

.embx-inp::placeholder,
.embx-textarea::placeholder{
color:
rgba(255,255,255,.32);
}

.embx-select option{
background:#081525;
color:#ffffff;
}

.embx-inp:focus,
.embx-select:focus,
.embx-textarea:focus{
border:
1px solid rgba(92,138,255,.45);
background:
rgba(255,255,255,.06);
box-shadow:
0 0 0 4px rgba(92,138,255,.12);
}

.embx-error{
border:
1px solid rgba(255,95,95,.7)!important;
background:
rgba(255,70,70,.06)!important;
box-shadow:
0 0 0 4px rgba(255,70,70,.08)!important;
}

.embx-error-text{
margin-top:8px;
font-size:13px;
line-height:1.6;
color:#ff9d9d;
font-weight:600;
display:flex;
align-items:flex-start;
gap:6px;
}

.embx-actions{
display:flex;
flex-wrap:wrap;
gap:16px;
margin-top:18px;
}

.embx-btn{
border:none;
outline:none;
cursor:pointer;
min-height:58px;
padding:0 28px;
border-radius:18px;
font-family:'Syne',sans-serif;
font-size:15px;
font-weight:700;
transition:.22s ease;
display:inline-flex;
align-items:center;
justify-content:center;
text-align:center;
}

.embx-next,
.embx-send,
.embx-restart{
background:
linear-gradient(
135deg,
#4d86ff,
#2f6cff
);
color:#ffffff;
box-shadow:
0 12px 28px rgba(54,110,255,.26);
}

.embx-next:hover,
.embx-send:hover,
.embx-restart:hover{
transform:
translateY(-2px);
}

.embx-back{
background:
rgba(255,255,255,.05);
border:
1px solid rgba(255,255,255,.08);
color:#ffffff;
}

.embx-mini{
font-size:14px;
font-weight:700;
letter-spacing:.4px;
margin-bottom:20px;
color:#7ea8ff;
}

.embx-mode-grid{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:22px;
margin-bottom:34px;
}

.embx-mode{
position:relative;
overflow:hidden;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.06);
border-radius:28px;
padding:30px 28px;
cursor:pointer;
transition:.25s ease;
}

.embx-mode:hover{
transform:
translateY(-3px);
border:
1px solid rgba(91,135,255,.22);
}

.embx-mode.active{
background:
linear-gradient(
135deg,
rgba(67,117,255,.16),
rgba(67,117,255,.05)
);
border:
1px solid rgba(86,132,255,.38);
box-shadow:
0 14px 34px rgba(67,117,255,.16);
}

.embx-mode.active::after{
content:'Selected';
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:18px;
padding:8px 14px;
border-radius:999px;
background:
rgba(88,132,255,.14);
border:
1px solid rgba(120,160,255,.2);
font-size:12px;
font-weight:700;
color:#bdd3ff;
letter-spacing:.3px;
}

.embx-mode-title{
font-size:24px;
font-weight:800;
line-height:1.3;
margin-bottom:12px;
color:#ffffff;
}

.embx-mode-text{
font-size:15px;
line-height:1.9;
color:
rgba(255,255,255,.65);
}

.embx-interview-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:28px;
padding:24px 26px;
border-radius:26px;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.05);
}

.embx-stat{
flex:1;
text-align:center;
}

.embx-stat strong{
display:block;
font-size:34px;
font-weight:800;
line-height:1;
margin-bottom:8px;
color:#f5c518;
}

.embx-stat span{
font-size:12px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
color:
rgba(255,255,255,.42);
}

.embx-question-card{
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.06);
border-radius:32px;
padding:34px;
margin-bottom:26px;
}

.embx-question-meta{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:22px;
}

.embx-pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 18px;
border-radius:999px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.07);
font-size:12px;
font-weight:700;
letter-spacing:.5px;
color:#f5c518;
}

.embx-question{
font-size:34px;
line-height:1.45;
font-weight:700;
color:#ffffff;
margin-bottom:28px;
max-width:850px;
}

.embx-scoreline{
display:flex;
align-items:center;
gap:24px;
margin-bottom:34px;
flex-wrap:wrap;
}

.embx-circle{
width:110px;
height:110px;
border-radius:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border:5px solid #4d86ff;
background:
rgba(255,255,255,.03);
box-shadow:
0 10px 26px rgba(0,0,0,.2);
flex-shrink:0;
}

.embx-num{
font-size:36px;
font-weight:800;
line-height:1;
color:#ffffff;
}

.embx-subnum{
font-size:12px;
margin-top:4px;
opacity:.6;
color:#ffffff;
}

.embx-scorecontent{
flex:1;
min-width:240px;
}

.embx-status{
font-size:34px;
font-weight:800;
margin-bottom:12px;
line-height:1.2;
color:#4d86ff;
}

.embx-advice{
font-size:17px;
line-height:1.9;
color:
rgba(255,255,255,.7);
}

.embx-list{
display:flex;
flex-direction:column;
gap:14px;
padding-left:20px;
margin-bottom:38px;
}

.embx-list li{
font-size:15px;
line-height:1.9;
color:
rgba(255,255,255,.76);
}

.embx-risk li{
color:#ffb1b1;
}

.embx-review-list{
display:flex;
flex-direction:column;
gap:18px;
margin-bottom:38px;
}

.embx-review-item{
padding:24px;
border-radius:24px;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.05);
}

.embx-review-item strong{
display:block;
font-size:18px;
line-height:1.6;
margin-bottom:14px;
color:#ffffff;
}

.embx-review-item p{
font-size:15px;
line-height:1.9;
color:
rgba(255,255,255,.72);
margin-bottom:14px;
}

.embx-review-item small{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 14px;
border-radius:999px;
background:
rgba(77,134,255,.12);
border:
1px solid rgba(77,134,255,.18);
font-size:12px;
font-weight:700;
letter-spacing:.3px;
color:#9fc0ff;
}

.embx-emailbox{
background:
linear-gradient(
180deg,
rgba(7,20,38,.98),
rgba(4,14,28,.99)
);
border:
1px solid rgba(255,255,255,.06);
border-radius:36px;
padding:48px 40px;
box-shadow:
0 18px 55px rgba(0,0,0,.28);
}

#embx-msg{
margin-top:20px;
font-size:14px;
line-height:1.8;
text-align:center;
}

.embx-footer{
text-align:center;
padding:40px 10px 0;
font-size:13px;
line-height:1.9;
color:
rgba(255,255,255,.42);
}

.embx-footer a{
color:#7aa4ff;
text-decoration:none;
}


/* =========================================
SMOOTH STATES + INTERACTIONS
========================================= */

.embx-btn,
.embx-mode,
.embx-step,
.embx-inp,
.embx-select,
.embx-textarea,
.embx-review-item,
.embx-question-card,
.embx-panel,
.embx-resultbox,
.embx-emailbox{
will-change:transform;
}

.embx-btn:focus-visible,
.embx-inp:focus-visible,
.embx-select:focus-visible,
.embx-textarea:focus-visible{
outline:none;
}

.embx-btn:active{
transform:
translateY(1px)
scale(.995);
}

.embx-mode:active,
.embx-review-item:active{
transform:
scale(.995);
}

/* =========================================
CUSTOM SCROLLBAR
========================================= */

.embx-textarea::-webkit-scrollbar{
width:10px;
}

.embx-textarea::-webkit-scrollbar-track{
background:
rgba(255,255,255,.04);
border-radius:999px;
}

.embx-textarea::-webkit-scrollbar-thumb{
background:
rgba(245,197,24,.35);
border-radius:999px;
}

.embx-textarea::-webkit-scrollbar-thumb:hover{
background:
rgba(245,197,24,.55);
}

/* =========================================
SELECTION
========================================= */

::selection{
background:
rgba(245,197,24,.24);
color:#ffffff;
}

/* =========================================
LOADING STATE
========================================= */

.embx-loading{
opacity:.65;
pointer-events:none;
filter:blur(.3px);
}

/* =========================================
RESULT STATUS COLORS
========================================= */

.embx-circle.high{
border-color:#34d17f;
box-shadow:
0 0 28px rgba(52,209,127,.18);
}

.embx-circle.mid{
border-color:#f5c518;
box-shadow:
0 0 28px rgba(245,197,24,.14);
}

.embx-circle.low{
border-color:#ff7070;
box-shadow:
0 0 28px rgba(255,112,112,.14);
}

.embx-status.high{
color:#34d17f;
}

.embx-status.mid{
color:#f5c518;
}

.embx-status.low{
color:#ff7070;
}

/* =========================================
EMAIL STATES
========================================= */

#embx-msg.success{
color:#8ff0b8;
}

#embx-msg.fail{
color:#ffb1b1;
}

#embx-msg.loading{
color:#ffd76a;
}

/* =========================================
EMPTY ANSWER STYLE
========================================= */

.embx-review-item em{
font-style:normal;
color:
rgba(255,255,255,.38);
}

/* =========================================
ANIMATION HELPERS
========================================= */

@keyframes embxPulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.03);
}

100%{
transform:scale(1);
}

}

.embx-circle.high{
animation:
embxPulse 4s ease infinite;
}

/* =========================================
MOBILE SAFE SPACING
========================================= */

@supports(padding:max(0px)){

#embx-app{
padding-left:
max(18px,env(safe-area-inset-left));

padding-right:
max(18px,env(safe-area-inset-right));

padding-bottom:
max(80px,env(safe-area-inset-bottom));
}

}

/* =========================================
REDUCED MOTION
========================================= */

@media(prefers-reduced-motion:reduce){

*{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important;
}

}

/* =========================================
ULTRA SMALL DEVICES
========================================= */

@media(max-width:360px){

.embx-title{
font-size:40px;
}

.embx-h{
font-size:34px;
}

.embx-question{
font-size:20px;
}

.embx-btn{
padding:16px;
font-size:13px;
}

.embx-inp,
.embx-select{
height:60px;
font-size:15px;
}

.embx-textarea{
min-height:130px;
font-size:15px;
}

}

/* =========================================
OPTIONAL PREMIUM ENHANCEMENTS
========================================= */

/* Floating ambient glow */

.embx-panel::before,
.embx-resultbox::before,
.embx-emailbox::before{
content:'';
position:absolute;
top:-120px;
right:-120px;
width:260px;
height:260px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(245,197,24,.06),
transparent 70%
);
pointer-events:none;
z-index:0;
}

.embx-panel > *,
.embx-resultbox > *,
.embx-emailbox > *{
position:relative;
z-index:2;
}

/* =========================================
INPUT AUTOFILL FIX
========================================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{

-webkit-text-fill-color:#ffffff;

-webkit-box-shadow:
0 0 0px 1000px rgba(255,255,255,.04) inset;

transition:
background-color 5000s ease-in-out 0s;

border-radius:14px;

}

/* =========================================
QUESTION TRANSITION
========================================= */

.embx-question-card{
animation:
embxQuestionIn .35s ease;
}

@keyframes embxQuestionIn{

from{
opacity:0;
transform:
translateY(10px)
scale(.985);
}

to{
opacity:1;
transform:none;
}

}

/* =========================================
QUESTION TEXT EMPHASIS
========================================= */

.embx-question{
position:relative;
padding-left:18px;
}

.embx-question::before{
content:'';
position:absolute;
left:0;
top:4px;
bottom:4px;
width:4px;
border-radius:999px;
background:
linear-gradient(
180deg,
#f5c518,
#d4a017
);
}

/* =========================================
TEXTAREA PREMIUM FEEL
========================================= */

.embx-textarea{
background:
linear-gradient(
180deg,
rgba(255,255,255,.04),
rgba(255,255,255,.025)
);

border:
1px solid rgba(255,255,255,.08);

box-shadow:
inset 0 1px 0 rgba(255,255,255,.03);
}

.embx-textarea::placeholder{
color:
rgba(255,255,255,.28);
}

/* =========================================
BUTTON GLOW
========================================= */

.embx-next,
.embx-submit,
.embx-send{

position:relative;
overflow:hidden;

}

.embx-next::before,
.embx-submit::before,
.embx-send::before{
content:'';
position:absolute;
top:0;
left:-120%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.22),
transparent
);
transform:skewX(-20deg);
transition:.7s ease;
}

.embx-next:hover::before,
.embx-submit:hover::before,
.embx-send:hover::before{
left:130%;
}

/* =========================================
REVIEW CARD HOVER
========================================= */

.embx-review-item{
transition:
transform .25s ease,
border-color .25s ease,
background .25s ease;
}

.embx-review-item:hover{
transform:
translateY(-3px);

border-color:
rgba(245,197,24,.12);

background:
rgba(255,255,255,.04);
}

/* =========================================
INTERVIEW TOP BAR
========================================= */

.embx-interview-top{
border:
1px solid rgba(255,255,255,.06);

backdrop-filter:
blur(10px);
}

/* =========================================
STATUS GRADIENT
========================================= */

.embx-status{
background:
linear-gradient(
90deg,
#ffffff,
#f5c518
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* =========================================
SOFT PANEL BORDER LIGHT
========================================= */

.embx-panel,
.embx-resultbox,
.embx-emailbox{

box-shadow:
0 20px 60px rgba(0,0,0,.32),
inset 0 1px 0 rgba(255,255,255,.02);

}

/* =========================================
FOCUS MODE
========================================= */

.embx-textarea:focus{
transform:
translateY(-1px);
}

/* =========================================
BETTER MOBILE TYPOGRAPHY
========================================= */

@media(max-width:768px){

.embx-question{
font-size:22px;
line-height:1.55;
}

.embx-review-item{
padding:18px;
}

.embx-interview-top{
padding:18px;
}

.embx-question-card{
padding:24px;
}

}

/* =========================================
IPHONE SAFE FIXES
========================================= */

@media(max-width:768px){

input,
textarea,
select{
font-size:16px!important;
}

}

/* =========================================
LANDSCAPE MOBILE
========================================= */

@media(max-height:500px)
and (orientation:landscape){

.embx-title{
font-size:42px;
}

.embx-panel,
.embx-resultbox,
.embx-emailbox{
padding:24px;
}

}

/* =========================================
PRINT PROTECTION
========================================= */

@media print{

body{
background:#fff!important;
color:#000!important;
}

#embx-app:before,
#embx-app:after{
display:none!important;
}

.embx-btn,
.embx-progress,
.embx-footer{
display:none!important;
}

}

/* =========================================
END
========================================= */






/* =========================================
EMBX RESPONSIVE BREATHING LAYOUT FIX
========================================= */

#embx{
width:100%;
padding:
clamp(22px,4vw,54px)
clamp(16px,3vw,28px)
90px;
}

.embx-wrap{
width:100%;
max-width:1320px;
margin:0 auto;
padding:0 14px;
}

/* =========================================
HEADER RELAXED LAYOUT
========================================= */

.embx-header{
padding:
clamp(34px,5vw,72px);
}

.embx-title{
font-family:
'Cormorant Garamond',
serif;

font-size:
clamp(54px,9vw,104px);

line-height:.92;

font-weight:700;

letter-spacing:-1.5px;

margin-bottom:30px;

color:#ffffff;

max-width:900px;
}

.embx-sub{
font-size:
clamp(18px,2.2vw,25px);

line-height:1.9;

color:
rgba(255,255,255,.74);

max-width:980px;

margin-bottom:34px;
}

/* =========================================
PANELS
========================================= */

.embx-panel,
.embx-resultbox,
.embx-emailbox{

padding:
clamp(26px,4vw,52px);

}

/* =========================================
QUESTION CARD
========================================= */

.embx-question-card{
padding:
clamp(24px,4vw,42px);
}

/* =========================================
QUESTION TEXT
========================================= */

.embx-question{
font-size:
clamp(24px,3.5vw,40px);

line-height:1.5;

font-weight:700;

color:#ffffff;

margin-bottom:32px;

max-width:980px;
}

/* =========================================
TEXTAREA BREATHING FIX
========================================= */

.embx-textarea{

padding:
clamp(20px,3vw,30px);

min-height:
clamp(220px,34vw,320px);

resize:vertical;

line-height:2;

font-size:
clamp(16px,2vw,19px);

border-radius:24px;

}

/* =========================================
INPUTS BETTER SPACING
========================================= */

.embx-inp,
.embx-select{
height:
clamp(60px,7vw,72px);

font-size:
clamp(15px,2vw,18px);
}

/* =========================================
INTERVIEW TOP
========================================= */

.embx-interview-top{
padding:
clamp(18px,3vw,30px);
}

/* =========================================
BUTTONS
========================================= */

.embx-btn{

min-height:
clamp(56px,6vw,68px);

padding:
0 clamp(22px,3vw,34px);

font-size:
clamp(14px,2vw,17px);

}

/* =========================================
RESULTS TYPOGRAPHY
========================================= */

.embx-status{
font-size:
clamp(28px,4vw,42px);
}

.embx-advice{
font-size:
clamp(15px,2vw,18px);

line-height:1.9;
}

/* =========================================
MOBILE FIXES
========================================= */

@media(max-width:768px){

.embx-grid,
.embx-mode-grid{
grid-template-columns:1fr;
gap:20px;
}

.embx-progress{
grid-template-columns:1fr;
}

.embx-actions{
flex-direction:column;
}

.embx-btn{
width:100%;
}

.embx-scoreline{
flex-direction:column;
align-items:flex-start;
}

.embx-interview-top{
flex-direction:column;
align-items:stretch;
}

}

/* =========================================
ULTRA SMALL DEVICES
========================================= */

@media(max-width:480px){

.embx-wrap{
padding:0 4px;
}

.embx-header{
border-radius:28px;
}

.embx-panel,
.embx-resultbox,
.embx-emailbox{
border-radius:28px;
}

.embx-question-card{
border-radius:26px;
}

}

/* =========================================
TABLET OPTIMIZATION
========================================= */

@media(min-width:769px)
and (max-width:1100px){

.embx-wrap{
max-width:1000px;
}

}

/* =========================================
LARGE SCREEN ENHANCEMENT
========================================= */

@media(min-width:1400px){

.embx-wrap{
max-width:1450px;
}

.embx-sub{
max-width:1100px;
}

.embx-question{
max-width:1100px;
}

}





/* =========================================
FINAL GLOBAL RESPONSIVE OVERRIDE
========================================= */

#embx{
width:100%;
padding:
24px
16px
90px!important;

overflow:hidden;
}

.embx-wrap{
width:100%;
max-width:1100px!important;
margin:0 auto;
padding:0!important;
}

/* =========================================
HEADER
========================================= */

.embx-header{
width:100%;
padding:
34px 24px!important;

border-radius:32px!important;

overflow:hidden;
}

/* =========================================
TITLE
========================================= */

.embx-title{
font-size:
clamp(46px,11vw,92px)!important;

line-height:1.02!important;

letter-spacing:-1px!important;

max-width:100%!important;

word-break:normal!important;

overflow-wrap:normal!important;

text-wrap:balance;

margin-bottom:24px!important;
}

.embx-title span{
display:inline!important;
}

/* =========================================
SUBTEXT
========================================= */

.embx-sub{
font-size:
clamp(16px,4.5vw,24px)!important;

line-height:1.75!important;

max-width:100%!important;

word-break:normal!important;

overflow-wrap:break-word!important;

text-wrap:pretty;

margin-bottom:28px!important;
}

/* =========================================
PANELS
========================================= */

.embx-panel,
.embx-resultbox,
.embx-emailbox{
padding:
30px 22px!important;

border-radius:30px!important;

overflow:hidden;
}

/* =========================================
QUESTION TEXT
========================================= */

.embx-question{
font-size:
clamp(22px,5vw,40px)!important;

line-height:1.5!important;

max-width:100%!important;

overflow-wrap:break-word!important;
}

/* =========================================
INPUTS
========================================= */

.embx-inp,
.embx-select{
height:64px!important;
font-size:16px!important;
}

.embx-textarea{
min-height:240px!important;

padding:24px!important;

font-size:17px!important;

line-height:1.9!important;

border-radius:22px!important;
}

/* =========================================
BUTTONS
========================================= */

.embx-btn{
min-height:58px!important;

width:auto;

font-size:15px!important;
}

/* =========================================
MOBILE
========================================= */

@media(max-width:768px){

.embx-grid,
.embx-mode-grid{
grid-template-columns:1fr!important;
}

.embx-progress{
grid-template-columns:1fr!important;
}

.embx-actions{
flex-direction:column!important;
}

.embx-btn{
width:100%!important;
}

.embx-interview-top{
flex-direction:column!important;
align-items:stretch!important;
}

.embx-scoreline{
flex-direction:column!important;
align-items:flex-start!important;
}

}

/* =========================================
SMALL PHONES
========================================= */

@media(max-width:480px){

#embx{
padding-left:14px!important;
padding-right:14px!important;
}

.embx-header,
.embx-panel,
.embx-resultbox,
.embx-emailbox{
padding:24px 18px!important;
border-radius:26px!important;
}

.embx-title{
font-size:52px!important;
line-height:1!important;
}

.embx-sub{
font-size:16px!important;
line-height:1.8!important;
}

.embx-question{
font-size:22px!important;
}

}

/* =========================================
SAFARI IOS FIX
========================================= */

html,
body{
max-width:100%;
overflow-x:hidden!important;
}

*{
min-width:0;
}





/* =========================================
EMBX PREMIUM BREATHING REFINEMENT
========================================= */

/* Wider overall layout */

.embx-wrap{
max-width:1240px!important;
}

/* More air inside panels */

.embx-header,
.embx-panel,
.embx-resultbox,
.embx-emailbox{
padding:
42px 34px!important;
}

/* Better title breathing */

.embx-title{
margin-bottom:36px!important;
max-width:11ch!important;
}

/* Subtitle spacing */

.embx-sub{
margin-bottom:40px!important;
max-width:36ch!important;
}

/* Better vertical rhythm */

.embx-progress{
margin-bottom:46px!important;
gap:20px!important;
}

/* Setup cards */

.embx-mode{
padding:38px 34px!important;
border-radius:32px!important;
}

/* Card titles */

.embx-mode-title{
font-size:
clamp(28px,4vw,44px)!important;

line-height:1.08!important;

margin-bottom:20px!important;
}

/* Card text */

.embx-mode-text{
font-size:
clamp(16px,2vw,20px)!important;

line-height:1.9!important;
}

/* Main section headings */

.embx-h{
font-size:
clamp(52px,7vw,82px)!important;

line-height:1!important;

margin-bottom:24px!important;
}

/* Better paragraph spacing */

.embx-p{
font-size:
clamp(17px,2vw,21px)!important;

line-height:1.95!important;

margin-bottom:42px!important;

max-width:42ch!important;
}

/* Question card breathing */

.embx-question-card{
padding:
42px 36px!important;
}

/* Better question spacing */

.embx-question{
margin-bottom:38px!important;
}

/* Inputs */

.embx-inp,
.embx-select{
height:70px!important;
border-radius:22px!important;
padding:0 24px!important;
}

/* Textarea */

.embx-textarea{
padding:30px!important;
min-height:280px!important;
}

/* Mobile refinement */

@media(max-width:768px){

.embx-header,
.embx-panel,
.embx-resultbox,
.embx-emailbox{
padding:32px 24px!important;
}

.embx-mode{
padding:30px 24px!important;
}

.embx-question-card{
padding:30px 24px!important;
}

}

/* Small phones */

@media(max-width:480px){

.embx-title{
max-width:100%!important;
}

.embx-sub,
.embx-p{
max-width:100%!important;
}

.embx-header,
.embx-panel,
.embx-resultbox,
.embx-emailbox{
padding:26px 20px!important;
}

}






/* =========================================
PREMIUM GLOBAL TOOL FOOTER
========================================= */

.gsgx-tool-footer{
margin-top:90px;
padding:55px 22px 46px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.015)
);
border-top:
1px solid rgba(255,255,255,.07);
position:relative;
overflow:hidden;
}

.gsgx-tool-footer::before{
content:'';
position:absolute;
top:-120px;
right:-120px;
width:260px;
height:260px;
background:
radial-gradient(
circle,
rgba(245,197,24,.08),
transparent 72%
);
pointer-events:none;
}

.gsgx-tool-footer-inner{
width:100%;
max-width:1120px;
margin:0 auto;
position:relative;
z-index:2;
}

.gsgx-tool-brand h3{
font-size:1.45rem;
line-height:1.2;
font-weight:800;
letter-spacing:-0.5px;
color:#ffffff;
margin-bottom:18px;
}

.gsgx-tool-brand p{
max-width:820px;
font-size:1rem;
line-height:1.95;
color:#c9d4df;
}

.gsgx-tool-footer-links{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:34px;
}

.gsgx-tool-footer-links a{
display:inline-flex;
align-items:center;
justify-content:center;
padding:13px 18px;
border-radius:14px;
background:
rgba(255,255,255,.05);
border:
1px solid rgba(255,255,255,.08);
text-decoration:none;
font-size:.9rem;
font-weight:700;
letter-spacing:.01em;
color:#f5f7fb;
transition:
all .28s ease;
backdrop-filter:blur(8px);
}

.gsgx-tool-footer-links a:hover{
transform:
translateY(-2px);
background:
rgba(212,175,55,.10);
border-color:
rgba(212,175,55,.30);
color:#f5c518;
}

.gsgx-tool-footer-copy{
margin-top:30px;
padding-top:22px;
border-top:
1px solid rgba(255,255,255,.06);
font-size:.84rem;
line-height:1.8;
color:#8ea0b5;
}

/* =========================================
MOBILE
========================================= */

@media(max-width:768px){

.gsgx-tool-footer{
margin-top:70px;
padding:42px 20px 40px;
}

.gsgx-tool-brand h3{
font-size:1.2rem;
margin-bottom:16px;
}

.gsgx-tool-brand p{
font-size:.93rem;
line-height:1.9;
}

.gsgx-tool-footer-links{
flex-direction:column;
gap:12px;
}

.gsgx-tool-footer-links a{
width:100%;
padding:15px 18px;
font-size:.92rem;
}

.gsgx-tool-footer-copy{
font-size:.8rem;
line-height:1.7;
}

}