
/* signup-fullwidth-v10.css — Full-width layout; pale blue left panel; header row with big logo and login link */
/* Fonts unchanged intentionally. */

:root{
  --brand-orange:#F3950D;
  --brand-brown:#451703;
  --left-panel:#E9F1F8; /* pale blue */
  --mg-1:#ff6a6a; --mg-2:#ff874f; --mg-3:#ffb14f; --mg-4:#ffd36b;
  --text:#171513; --muted:#6B655F; --line:#E1E5EA;
  --radius:14px; --radius-sm:10px;
}

*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#fff;color:var(--text)}

.wrap{min-height:100vh;display:grid;grid-template-columns:1.2fr 0.8fr}

.left{padding:40px min(7vw,96px);display:flex;flex-direction:column;background:var(--left-panel)}
/* Header row */
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;min-height:72px}
.logo{height:72px;display:flex;align-items:center}
.logo img{height:100%;width:auto;display:block}
.header .login-link{display:flex;align-items:center;height:72px}
.header .login-link a{font-size:16px;color:#2b2b2b;text-decoration:none;padding-left:16px}
.header .login-link a:hover{text-decoration:underline}

h1{font-size:40px;line-height:1.2;margin:8px 0 22px;font-weight:800;color:var(--brand-brown)}
.form-card{max-width:760px}
.form-label{font-weight:600;color:var(--brand-brown)}
.form-control,.form-select{border:1px solid var(--line);padding:12px 14px;height:auto;border-radius:var(--radius-sm);font-size:16px;background:#fff}
.form-control:focus,.form-select:focus{outline:none;border-color:var(--brand-orange);box-shadow:0 0 0 4px rgba(243,149,13,.15)}
.input-group .form-control{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.input-group .toggle{border:1px solid var(--line);border-left:0;border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);background:#fff;padding:0 12px;cursor:pointer}
.input-group .toggle:focus{outline:none;box-shadow:0 0 0 4px rgba(243,149,13,.15);border-color:var(--brand-orange)}
.checkbox{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#333}
.btn-primary{background:var(--brand-orange);border:2px solid var(--brand-orange);color:#fff;border-radius:12px;padding:14px 18px;font-weight:700;width:100%;transition:all .2s ease}
.btn-primary:hover{background:#D86F07;border-color:#D86F07;color:#fff}
.btn-disabled{opacity:.6;cursor:not-allowed}
.helper{font-size:14px;margin-top:14px} .helper a{color:var(--brand-orange);text-decoration:none} .helper a:hover{text-decoration:underline}
.error{color:#B42318;font-size:13px;margin-top:6px;display:block} /* visible by default for demo */
.is-invalid{border-color:#B42318 !important;box-shadow:0 0 0 4px rgba(180,35,24,.12) !important}

/* Right panel */
.right{background:linear-gradient(180deg,var(--mg-1) 0%,var(--mg-2) 35%,var(--mg-3) 70%,var(--mg-4) 100%);color:#fff;position:relative;display:flex;align-items:flex-start;justify-content:center;padding:56px 32px 56px 24px}
.panel{width:100%;max-width:560px;position:sticky;top:56px}
/* Testimonial like reference screenshot */
.testimonial{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.testimonial-top{display:flex;align-items:center;justify-content:space-between}
.person{display:flex;align-items:center;gap:12px}
.person img{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block}
.person .who{line-height:1.1}
.person .name{font-weight:700;font-size:18px;letter-spacing:.2px}
.person .title{font-size:14px;opacity:.9}
.quote-icon{font-size:32px;line-height:1;color:#ffccd0;user-select:none}
.quote{margin:0;font-size:16px;line-height:1.6}
.meta{opacity:.9;font-size:14px}

/* list */
.side-title{font-size:36px;font-weight:800;margin:24px 0 14px;white-space:nowrap}
.list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.list li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;font-size:18px;line-height:1.7}
.dot{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25);margin-top:6px}

@media (max-width:1100px){.wrap{grid-template-columns:1.1fr 0.9fr} h1{font-size:36px}}
@media (max-width:900px){
  .wrap{grid-template-columns:1fr}
  .right{order:-1;padding:36px 18px}
  .panel{position:static;max-width:640px}
  .left{padding:24px 18px}
  .logo{height:56px}
  h1{font-size:32px;margin-bottom:16px}
  .side-title{font-size:26px;white-space:normal}
  .list li{font-size:17px;line-height:1.6}
  .header .login-link{display:none} /* simplify small screens */
}

/* Testimonial card + quote badge refresh */
.testimonial{position:relative;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:18px;padding:18px 18px 16px 18px;backdrop-filter:saturate(160%) blur(4px)}
.testimonial-top{margin-bottom:6px}
.quote-badge{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;color:#fff;position:absolute;top:-12px;right:-12px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,.15) 60%), linear-gradient(180deg, #ff9a57, #ff6a6a);
  box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 0 8px rgba(255,255,255,.35);
}
.quote{font-size:18px;line-height:1.7;font-style:italic;color:#fff;margin-top:8px}
.person img{box-shadow:0 2px 8px rgba(0,0,0,.25)}
.person .name{font-size:18px}
.person .title{font-size:14px;opacity:.95}


/* v16 — Removed header login link */
.header .login-link { display: none !important; }
