/* ============================================================
   United Juntos — Get Involved intake form
   Combined intake with role selection. Built on tokens.css +
   base.css (buttons/nav/footer). Matches the Joyful concept.
   ============================================================ */

.gi-page{background:var(--cream); min-height:100vh;}
.gi-wrap{max-width:760px; margin:0 auto; padding:0 22px;}

/* header */
.gi-hero{position:relative; overflow:hidden; background:
  radial-gradient(90% 130% at 85% -30%, #FCEAB9 0%, var(--cream-2) 52%, var(--cream) 100%);
  border-bottom:1px solid var(--line);}
.gi-hero-bun{position:absolute; top:-12px; left:0; right:0; z-index:0;}
.gi-hero .gi-wrap{position:relative; z-index:1; padding:84px 22px 40px; text-align:center;}
.gi-hero .eyebrow{color:var(--coral-deep); margin-bottom:14px;}
.gi-hero h1{font-size:clamp(34px,5.2vw,52px); font-weight:800; color:var(--cobalt); line-height:1; text-wrap:balance;}
.gi-hero p{font-size:clamp(17px,2vw,19px); color:#5a4a2e; max-width:520px; margin:16px auto 0; font-weight:500;}

/* form card */
.gi-main{padding:40px 0 72px;}
.gi-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden;}
.gi-card-head{padding:24px 30px 0;}

/* steps indicator */
.gi-steps{display:flex; align-items:center; gap:0; padding:6px 30px 22px; flex-wrap:wrap;}
.gi-step{display:flex; align-items:center; gap:10px;}
.gi-step .dot{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-family:var(--uj-font-display); font-size:15px; background:#EFE7D6; color:#9a8a64; flex:none; transition:.2s;}
.gi-step.done .dot{background:var(--sage-deep); color:#fff;}
.gi-step.cur .dot{background:var(--cobalt); color:#fff; box-shadow:var(--uj-focus-ring);}
.gi-step .lbl{font-size:13.5px; font-weight:700; color:var(--muted);}
.gi-step.cur .lbl{color:var(--cobalt);}
.gi-step .line{width:34px; height:3px; background:#EFE7D6; margin:0 10px; border-radius:2px;}
.gi-step.done .line{background:var(--sage-deep);}
@media(max-width:560px){.gi-step .lbl{display:none;} .gi-step .line{width:20px;}}

.gi-body{padding:8px 30px 30px;}
@media(max-width:560px){.gi-card-head,.gi-steps,.gi-body{padding-left:18px; padding-right:18px;}}

/* panels */
.gi-panel{display:none; animation:giIn .35s var(--uj-ease-out);}
.gi-panel.on{display:block;}
@keyframes giIn{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}}
@media(prefers-reduced-motion:reduce){.gi-panel{animation:none;}}
.gi-panel h2{font-size:22px; color:var(--ink); margin:0 0 4px;}
.gi-panel .sub{font-size:15px; color:var(--muted); margin:0 0 20px;}

/* role cards */
.gi-roles{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:560px){.gi-roles{grid-template-columns:1fr;}}
.gi-role{position:relative; display:flex; gap:13px; align-items:flex-start; padding:16px 16px; border:2px solid var(--line); border-radius:var(--r-md); cursor:pointer; background:#fff; transition:.14s;}
.gi-role:hover{border-color:#C9BFA8; background:#FCFAF4;}
.gi-role input{position:absolute; opacity:0; pointer-events:none;}
.gi-role .ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none; color:var(--navy);}
.gi-role .tx b{display:block; font-family:var(--uj-font-display); font-weight:700; font-size:16px; color:var(--ink); line-height:1.2; margin-bottom:2px;}
.gi-role .tx span{font-size:13px; color:var(--muted); line-height:1.35;}
.gi-role .tick{position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; color:#fff; transition:.14s;}
.gi-role input:checked ~ .tick{background:var(--cobalt); border-color:var(--cobalt);}
.gi-role:has(input:checked){border-color:var(--cobalt); background:#F4F8FC; box-shadow:0 0 0 1px var(--cobalt);}

/* fields */
.gi-field{margin-bottom:16px;}
.gi-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:560px){.gi-row{grid-template-columns:1fr;}}
.gi-field label{display:block; font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:7px;}
.gi-field label .hint{font-weight:400; color:var(--muted); font-style:italic;}
.gi-field label .req{color:var(--coral-deep); margin-left:2px;}
.gi-field input, .gi-field select, .gi-field textarea{
  width:100%; min-height:50px; border:1.5px solid var(--line); border-radius:var(--r-md); background:#FCFAF4;
  padding:0 15px; font-size:16px; font-family:var(--uj-font-body); color:var(--ink); transition:.14s;}
.gi-field textarea{min-height:104px; padding:13px 15px; resize:vertical; line-height:1.5;}
.gi-field input::placeholder, .gi-field textarea::placeholder{color:#a59a80;}
.gi-field input:focus, .gi-field select:focus, .gi-field textarea:focus{
  outline:none; border-color:var(--cobalt); background:#fff; box-shadow:var(--uj-focus-ring);}
.gi-field.err input, .gi-field.err select, .gi-field.err textarea{border-color:var(--coral-deep); background:#FBF0EE;}
.gi-field .msg{display:none; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--coral-deep); margin-top:7px;}
.gi-field.err .msg{display:flex;}

/* conditional groups */
.gi-when{display:none;}
.gi-when.on{display:block;}
.gi-when .gi-divider{display:flex; align-items:center; gap:10px; margin:4px 0 16px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--coral-deep);}
.gi-when .gi-divider::after{content:""; flex:1; height:1px; background:var(--line);}

/* checkbox/radio rows */
.gi-opts{display:grid; gap:9px;}
.gi-opt{display:flex; align-items:center; gap:11px; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r-md); cursor:pointer; font-size:15px; background:#fff;}
.gi-opt:hover{border-color:#C9BFA8;}
.gi-opt input{width:20px; height:20px; min-height:0; accent-color:var(--cobalt); flex:none;}
.gi-opt:has(input:checked){border-color:var(--cobalt); background:#F4F8FC;}

/* review */
.gi-review{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin-bottom:18px;}
.gi-review dl{margin:0;}
.gi-review .rrow{display:grid; grid-template-columns:160px 1fr; gap:12px; padding:13px 18px; border-top:1px solid var(--line);}
.gi-review .rrow:first-child{border-top:0;}
.gi-review dt{font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.gi-review dd{margin:0; font-size:15px; color:var(--ink); word-break:break-word;}
@media(max-width:560px){.gi-review .rrow{grid-template-columns:1fr; gap:3px;}}
.gi-consent{display:flex; gap:11px; align-items:flex-start; font-size:14px; color:#5f5640; margin-bottom:18px;}
.gi-consent input{width:20px; height:20px; min-height:0; accent-color:var(--cobalt); flex:none; margin-top:1px;}

/* actions */
.gi-actions{display:flex; gap:12px; align-items:center; margin-top:24px;}
.gi-actions .spacer{flex:1;}
.gi-back{background:none; border:0; color:var(--muted); font-weight:700; font-size:15px; cursor:pointer; padding:10px; display:inline-flex; align-items:center; gap:6px;}
.gi-back:hover{color:var(--cobalt);}

/* honeypot — hidden from humans, catches bots */
.gi-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* success */
.gi-done{display:none; text-align:center; padding:30px 20px 14px;}
.gi-done.on{display:block; animation:giIn .4s var(--uj-ease-out);}
.gi-done .seal{width:84px; height:84px; border-radius:50%; background:var(--sage-deep); display:grid; place-items:center; margin:0 auto 22px; color:#fff; box-shadow:0 14px 30px -12px rgba(46,125,91,.6);}
.gi-done h2{font-size:28px; color:var(--ink); margin:0 0 10px;}
.gi-done p{font-size:17px; color:#5f5640; max-width:440px; margin:0 auto 24px;}
.gi-done .gi-also{font-size:14px; color:var(--muted); margin-top:18px;}
.gi-done .gi-also a{color:var(--cobalt); font-weight:700;}

/* note under form */
.gi-foot-note{text-align:center; font-size:13px; color:var(--muted); margin-top:18px; line-height:1.6;}
.gi-foot-note a{color:var(--cobalt);}

/* modal variant (when launched from a homepage) */
.gi-modal-scrim{position:fixed; inset:0; background:rgba(26,39,64,.6); backdrop-filter:blur(3px); display:none; place-items:start center; z-index:200; padding:28px 16px; overflow:auto;}
.gi-modal-scrim.open{display:grid;}
.gi-modal{width:100%; max-width:680px; margin:auto;}
.gi-modal .gi-card{position:relative;}
.gi-modal .gi-close{position:absolute; top:14px; right:14px; z-index:3; width:40px; height:40px; border-radius:50%; border:0; background:#fff; box-shadow:var(--shadow-md); cursor:pointer; display:grid; place-items:center; color:var(--ink);}
.gi-modal .gi-close:hover{background:var(--cream-2);}