/* === ROOT VARIABLES === */
:root{
    --bg:#f6f1ed;
    --panel:#ffffff;
    --text:#111827;
    --muted:#6b7280;
    --line:#e5e7eb;
    --error:#e0453b;
    --shadow:0 20px 60px rgba(15,23,42,0.08);
}

*{box-sizing:border-box;}

body.org-page{
    margin:0;
    font-family:"Manrope","Segoe UI",sans-serif;
    color:var(--text);
    background:var(--bg);
}

/* === LAYOUT CONTAINERS === */
.org-layout{
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:48px;
    padding:40px 64px;
    max-width:1400px;
    margin:0 auto;
}

.org-left{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:30px 12px;
    align-items:flex-start;
}

.brand-row{
    display:flex;
    align-items:center;
}

.brand-logo{
    height:40px;
    width:auto;
}

.greeting{
    margin:14px 0 0 0;
    color:#374151;
    font-size:18px;
}

.org-left h1{
    margin:0;
    font-size:clamp(38px,4.4vw,58px);
    line-height:1.1;
    font-weight:600;
}

.illustration-card{
    margin-top:8px;
    width:100%;
    max-width:520px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.illustration-img{
    width:100%;
    height:auto;
    display:block;
}

.org-right{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:10px;
}

.org-form{
    width:100%;
    max-width:680px;
    background:var(--panel);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:28px 32px 32px;
    overflow:visible;
}

.form-row{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.form-row label{font-size:14px;color:var(--text);font-weight:600;display:flex;align-items:center;gap:6px;}
.req{color:var(--error);}
.info-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #cbd5e1;border-radius:999px;font-size:11px;color:#64748b;}
.hint{margin:0;color:var(--muted);font-size:13px;}

.form-row input,
.form-row select{
    width:100%;
    height:38px;
    border:none;
    border-bottom:2px solid var(--line);
    background:transparent;
    font-size:16px;
    color:var(--text);
    outline:none;
}

.form-row input::placeholder{color:#9ca3af;}
.form-row select{color:#9ca3af;}

.form-row input:focus,
.form-row select:focus{
    border-bottom-color:#111827;
}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}

.field-error{
    display:none;
    margin:6px 0 0;
    font-size:13px;
    color:var(--error);
    line-height:1.35;
    position:relative;
    padding-left:18px;
}

.field-error::before{
    content:"!";
    position:absolute;
    left:0;
    top:0;
    width:14px;
    height:14px;
    border:1px solid var(--error);
    border-radius:999px;
    font-size:10px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.show-errors .form-row input:invalid,
.show-errors .form-row select:invalid{
    border-bottom-color:var(--error);
}

.show-errors .form-row input:invalid ~ .field-error,
.show-errors .form-row select:invalid ~ .field-error{
    display:block;
}
.form-row.has-error input,
.form-row.has-error select,
.two-col .has-error input,
.two-col .has-error select,
.three-col .has-error input,
.three-col .has-error select{
    border-bottom-color:var(--error);
}
.form-row.has-error .field-error,
.two-col .has-error .field-error,
.three-col .has-error .field-error{
    display:block;
}

.radio-group{display:flex;flex-direction:column;gap:10px;}
.radio-title{margin:0 0 8px 0;font-weight:600;}
.radio-row{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;}
.radio-input{margin-top:4px;flex:0 0 14px;}
.radio-card{display:block;}
.radio-help{margin:4px 0 10px 22px;font-size:12.5px;color:var(--muted);line-height:1.4;display:none;}
.radio-option{
    display:grid;
    grid-template-columns:14px 1fr;
    column-gap:10px;
    row-gap:6px;
    align-items:start;
}
.radio-option .radio-input{grid-column:1;grid-row:1;margin-top:4px;}
.radio-option .radio-card{grid-column:2;grid-row:1;}
.radio-option .radio-help{grid-column:2;grid-row:2;margin:0;}
.radio-help.is-alert{
    display:block;
    color:#92400e;
    background:#fff7ed;
    border:1px solid #fed7aa;
    border-radius:10px;
    padding:10px 12px;
}

.show-errors .radio-group.is-invalid .field-error{display:block;}
.radio-group.has-error .field-error{display:block;}

/* Show payroll help when "yes" is checked (no JS) */
#payroll_yes:checked ~ #payrollHelp{
    display:block;
    color:#92400e;
    background:#fff7ed;
    border:1px solid #fed7aa;
    border-radius:10px;
    padding:10px 12px;
}

.primary-btn{
    width:100%;
    height:48px;
    border:none;
    border-radius:8px;
    background:#1f6be2;
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    margin-top:16px;
    display:block;
}

.primary-btn:hover{background:#1a5ec9;}

@media (max-width: 1100px){
    .org-layout{grid-template-columns:1fr; padding:32px 20px;}
    .org-left{display:none;}
    .org-right{justify-content:flex-start;}
    .org-form{max-width:100%;}
    .two-col,.three-col{grid-template-columns:1fr;}
}
