/* Her Startup application form. Builds on portal.css tokens. */

body.site{font-size:14px}
.site-top{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--bg);
  display:flex; align-items:center; gap:14px; padding:16px 22px 12px; max-width:1120px; margin:0 auto;
}
.site-logo{width:92px; height:auto; display:block}
.site-label{font-size:11.5px; color:var(--ink-3); border-left:1px solid var(--hair); padding-left:13px}
.site-actions{margin-left:auto; display:flex; gap:8px; align-items:center}
body.site main{max-width:1120px; margin:0 auto; padding:6px 22px 60px}
.site-foot{border-top:1px solid var(--hair); margin-top:20px}
.site-foot-in{max-width:1120px; margin:0 auto; padding:28px 22px 40px}
.site-foot-logo{width:66px; height:auto; display:block; margin-bottom:12px}
.site-foot p{margin:0 0 6px; font-size:12px; color:var(--ink-2); max-width:70ch; line-height:1.6}
.site-foot p.muted{color:var(--ink-3); font-size:11.5px}
body.site main > .fv-wrap,body.site main > .alert{margin-top:10px}

/* ---------------------------------------------------------- intro */
.af-hero{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:40px; align-items:center; margin-bottom:8px}
.af-intro{padding:18px 0 22px; max-width:760px}

/* framed brand portrait beside the heading */
.af-visual{position:relative; margin:10px 18px 40px 0; height:300px}
.af-visual picture{display:contents}
.af-visual img{display:block; object-fit:cover; border-radius:26px}
.af-visual-bg{position:absolute; inset:22px -18px -22px 34px; width:calc(100% - 16px); height:100%; opacity:.9}
.af-visual-photo{position:relative; width:86%; height:100%; box-shadow:0 18px 40px -18px rgba(20,8,60,.55)}
.af-visual-chip{position:absolute; left:-14px; bottom:22px; display:inline-flex; align-items:center; gap:8px; background:var(--bg); color:var(--ink); border-radius:var(--r-pill); padding:8px 14px; font-size:12px; font-weight:600; box-shadow:0 8px 24px -10px rgba(0,0,0,.45)}
.af-visual-chip i{width:8px; height:8px; border-radius:50%; background:var(--pass); box-shadow:0 0 0 4px var(--pass-dim)}

/* a photo for each section, under the progress list */
.af-shots{position:relative; margin:14px 0 0; aspect-ratio:4/5; border-radius:16px; overflow:hidden; background:var(--panel-2)}
.af-shots img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity .5s ease, transform .9s ease}
.af-shots[data-step="1"] [data-shot="1"],.af-shots[data-step="2"] [data-shot="2"],.af-shots[data-step="3"] [data-shot="3"],
.af-shots[data-step="4"] [data-shot="4"],.af-shots[data-step="5"] [data-shot="5"],.af-shots[data-step="6"] [data-shot="6"]{opacity:1; transform:none}
.af-intro .eyebrow{margin-bottom:12px}
.af-intro h1{font-size:40px; font-weight:600; letter-spacing:-.04em; line-height:1.05}
.af-meta{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px}
.af-meta li{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2)}
.af-meta svg{color:var(--accent)}
.af-ready{margin-top:18px; background:var(--panel); border-radius:16px; padding:15px 18px; font-size:13px; color:var(--ink-2); line-height:1.55}
.af-ready b{color:var(--ink)}
.af-ready ul{margin:8px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px}
.af-ready li{background:var(--panel-2); border-radius:var(--r-pill); padding:5px 11px; font-size:12px; color:var(--ink)}

.af-card{background:var(--panel); border-radius:var(--r-panel)}
.af-closed{padding:32px 30px; max-width:640px}
.af-closed h2{font-size:22px; letter-spacing:-.03em}
.af-closed p{color:var(--ink-2); margin:8px 0 0; line-height:1.6}

/* ---------------------------------------------------------- layout */
.af-wrap{display:grid; grid-template-columns:250px minmax(0,1fr); gap:18px; align-items:start}
.af-rail{position:sticky; top:78px; background:var(--panel); border-radius:var(--r-panel); padding:16px}
.af-progress{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.af-progress li{display:flex; align-items:center; gap:11px; padding:9px 8px; border-radius:10px; cursor:pointer; font-size:13px; color:var(--ink-3); font-weight:500; line-height:1.3}
.af-progress li:hover{background:var(--panel-2); color:var(--ink-2)}
.af-progress i{font-style:normal; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; background:var(--panel-2); color:var(--ink-3); flex:0 0 24px}
.af-progress li.on{color:var(--ink); background:var(--panel-2)}
.af-progress li.on i{background:var(--accent); color:#fff}
.af-progress li.done{color:var(--ink-2)}
.af-progress li.done i{background:var(--pass); color:#04301F; font-size:0}
.af-progress li.done i::after{content:"\2713"; font-size:11px}
.af-saved{display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:11px; color:var(--ink-3); margin-top:12px; padding:10px 8px 0; border-top:1px solid var(--hair)}
.af-saved svg{color:var(--pass)}
.af-saved .link{background:none; border:0; padding:0; cursor:pointer; font-size:inherit}

.af-form{padding:28px 30px 24px; min-width:0}
.af-step{border:0; margin:0 0 8px; padding:0; min-width:0}
.af-step legend{padding:0; font-size:24px; font-weight:600; letter-spacing:-.03em; margin-bottom:6px}
.af-n{display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:8px; font-family:var(--ui)}
.af-lede{font-size:13px; color:var(--ink-2); margin:6px 0 18px; line-height:1.6; max-width:66ch}
.af-step .form-grid{margin-bottom:18px; gap:16px 16px}
.af-q{margin-bottom:18px}
.af-form .field > label{line-height:1.45}
.af-form .input{background:var(--panel-2)}
.af-form .input:focus{background:var(--bg)}
.af-form input[type=month]::-webkit-calendar-picker-indicator,.af-form input[type=date]::-webkit-calendar-picker-indicator{opacity:.6; cursor:pointer}
:root:not([data-theme="light"]) .af-form input[type=month],:root:not([data-theme="light"]) .af-form input[type=date]{color-scheme:dark}
:root[data-theme="light"] .af-form input[type=month],:root[data-theme="light"] .af-form input[type=date]{color-scheme:light}

/* radio options as pills */
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt{position:relative; cursor:pointer}
.opt input{position:absolute; opacity:0; width:1px; height:1px}
.opt span{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--r-pill); background:var(--panel-2); font-size:13px; font-weight:500; color:var(--ink-2); box-shadow:inset 0 0 0 1px transparent; transition:background .14s, color .14s, box-shadow .14s}
.opt span::before{content:""; width:14px; height:14px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--ink-3); flex:0 0 14px; transition:all .14s}
.opt:hover span{color:var(--ink)}
.opt input:checked + span{background:var(--accent-dim); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--accent)}
.opt input:checked + span::before{box-shadow:inset 0 0 0 4.5px var(--accent); background:#fff}
.opt input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}

/* word counter */
.af-words{font-size:11px; color:var(--ink-3); text-align:right; margin-top:-2px; font-variant-numeric:tabular-nums}
.af-words.over{color:var(--fail); font-weight:600}

/* other countries */
.af-multi{background:var(--panel-2); border-radius:12px; padding:8px}
.af-multi .input{background:var(--panel)}
.af-chips{display:flex; flex-wrap:wrap; gap:6px; padding:2px 2px 8px}
.af-chip{border:0; cursor:pointer; border-radius:var(--r-pill); padding:5px 10px; font-size:12px; font-weight:500; background:var(--accent-dim); color:var(--ink)}
.af-chip span{opacity:.6; margin-left:2px}
.af-multi-list{max-height:180px; overflow-y:auto; margin-top:6px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px 10px; padding:4px 6px}
.af-multi-list label{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); padding:5px 2px; cursor:pointer}
.af-multi-list input{accent-color:var(--accent)}

/* documents */
.af-docs{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; align-items:start}
.af-doc{display:flex; flex-direction:column}
.af-doc .err{margin-top:6px}
.af-drop{display:flex; gap:13px; align-items:flex-start; padding:16px; border-radius:14px; cursor:pointer; background:var(--panel-2); box-shadow:inset 0 0 0 1.5px transparent; border:1.5px dashed var(--line-2, var(--hair)); transition:box-shadow .14s, background .14s}
.af-drop:hover{background:var(--panel-3)}
.af-drop input{position:absolute; opacity:0; width:1px; height:1px}
.af-drop:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.af-doc-ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--accent-dim); color:var(--accent); flex:0 0 38px}
.af-doc-tx{display:flex; flex-direction:column; gap:4px; min-width:0}
.af-doc-tx b{font-size:13.5px; font-weight:600; color:var(--ink)}
.af-doc-g{font-size:11.5px; color:var(--ink-3); line-height:1.5}
.af-doc-f{font-size:12px; color:var(--accent); font-weight:500; word-break:break-all}
.af-doc.has-file .af-drop{border-style:solid; border-color:var(--pass)}
.af-doc.has-file .af-doc-ic{background:var(--pass-dim); color:var(--pass)}
.af-doc.has-file .af-doc-f{color:var(--pass)}
.af-doc.bad .af-drop{border-color:var(--fail); border-style:solid}
.af-doc.bad .af-doc-f{color:var(--fail)}

/* declarations */
.af-decl{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.af-dec{display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; padding:14px 16px; border-radius:14px; background:var(--panel-2); cursor:pointer; position:relative; box-shadow:inset 0 0 0 1.5px transparent; transition:box-shadow .14s}
.af-dec input{position:absolute; opacity:0; width:1px; height:1px}
.af-box{width:20px; height:20px; border-radius:6px; box-shadow:inset 0 0 0 1.5px var(--ink-3); display:grid; place-items:center; margin-top:1px; transition:all .14s}
.af-dec input:checked ~ .af-box{background:var(--accent); box-shadow:none}
.af-dec input:checked ~ .af-box::after{content:"\2713"; color:#fff; font-size:12px; font-weight:700}
.af-dec input:focus-visible ~ .af-box{outline:2px solid var(--accent); outline-offset:2px}
.af-dec:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--accent)}
.af-dec.bad{box-shadow:inset 0 0 0 1.5px var(--fail)}
.af-dec-t{display:block; font-size:13px; line-height:1.6; color:var(--ink-2)}
.af-dec-l{display:inline-block; margin-top:7px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}

/* review */
.af-review{background:var(--panel-2); border-radius:14px; margin:4px 0 18px}
.af-review summary{cursor:pointer; padding:14px 16px; font-size:13.5px; font-weight:600; list-style:none; display:flex; align-items:center; gap:8px}
.af-review summary::-webkit-details-marker{display:none}
.af-review summary::before{content:"+"; width:20px; height:20px; border-radius:50%; background:var(--panel); display:grid; place-items:center; font-size:14px; color:var(--ink-2)}
.af-review[open] summary::before{content:"\2212"}
#af-review{padding:0 12px 12px; display:flex; flex-direction:column; gap:8px}
.af-rv{background:var(--panel); border-radius:12px; padding:12px 14px}
.af-rv-h{display:flex; align-items:center; margin-bottom:6px}
.af-rv-h h4{font-size:13px; font-weight:600; flex:1}
.af-rv dl{margin:0; display:grid; grid-template-columns:1fr 1fr; gap:4px 18px}
.af-rv dl > div{display:flex; gap:10px; justify-content:space-between; font-size:12.5px; border-bottom:1px solid var(--hair); padding:5px 0}
.af-rv dt{color:var(--ink-3)}
.af-rv dd{margin:0; font-weight:500; text-align:right; word-break:break-word}
.af-rv dl > div.long{grid-column:1 / -1; display:block}
.af-rv dl > div.long dd{text-align:left; font-weight:400; color:var(--ink-2); margin-top:4px; line-height:1.55}
.af-missing{color:var(--fail)}

/* footer nav */
.af-nav{display:flex; gap:10px; align-items:center; padding-top:18px; border-top:1px solid var(--hair)}
.af-count{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.btn.af-big{padding:13px 22px; font-size:14px}
.af-dots::after{content:"..."; display:inline-block; width:1.2em; text-align:left; animation:afd 1s steps(4,end) infinite; overflow:hidden; vertical-align:bottom}
@keyframes afd{0%{width:0}100%{width:1.2em}}

/* ---------------------------------------------------------- confirmation */
.cf{max-width:720px; margin:6px auto 0}
.cf-hero{background:var(--panel); border-radius:var(--r-panel); padding:34px 34px 30px; position:relative; overflow:hidden}
.cf-banner{height:120px; margin:-34px -34px 0; background-size:cover; background-position:center}
.cf-banner + .cf-badge{margin-top:-28px; position:relative; box-shadow:0 0 0 6px var(--panel), 0 0 0 14px var(--pass-dim)}
.cf-badge{width:56px; height:56px; border-radius:50%; background:var(--pass); color:#04301F; display:grid; place-items:center; font-size:26px; font-weight:700; box-shadow:0 0 0 8px var(--pass-dim); animation:cfpop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes cfpop{from{transform:scale(.4); opacity:0}to{transform:none; opacity:1}}
.cf-hero h1{font-size:32px; letter-spacing:-.035em; line-height:1.1; margin:22px 0 0}
.cf-hero p{font-size:14.5px; color:var(--ink-2); line-height:1.65; margin:12px 0 0; max-width:58ch}
.cf-hero p b{color:var(--ink)}
.cf-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px}
.cf-facts div{background:var(--panel-2); border-radius:14px; padding:13px 15px}
.cf-facts span{display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.cf-facts b{display:block; font-size:15px; margin-top:4px; word-break:break-word}
.cf-next{background:var(--panel); border-radius:var(--r-panel); padding:24px 30px; margin-top:12px}
.cf-next h2{font-size:15px; margin-bottom:14px}
.cf-steps{list-style:none; margin:0; padding:0}
.cf-steps li{display:grid; grid-template-columns:26px 1fr; gap:12px; padding:0 0 16px; position:relative}
.cf-steps li:not(:last-child)::after{content:""; position:absolute; left:12px; top:26px; bottom:2px; width:2px; background:var(--hair)}
.cf-steps i{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:700; background:var(--panel-2); color:var(--ink-3)}
.cf-steps li.done i{background:var(--pass); color:#04301F}
.cf-steps li.now i{background:var(--accent); color:#fff}
.cf-steps b{font-size:13.5px; display:block; padding-top:3px}
.cf-steps span{font-size:12.5px; color:var(--ink-3)}
.cf-social{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--accent-dim); border-radius:var(--r-panel); padding:18px 22px; margin-top:12px}
.cf-social b{font-size:14px}
.cf-social span{font-size:12.5px; color:var(--ink-2); display:block; margin-top:2px}

/* ---------------------------------------------------------- responsive */
@media (max-width:980px){
  .af-wrap{grid-template-columns:1fr}
  .af-rail{position:sticky; top:58px; z-index:20; padding:10px 12px}
  .af-progress{flex-direction:row; gap:4px}
  .af-progress li{flex:1 1 0; justify-content:center; padding:6px 2px}
  .af-progress li span{display:none}
  .af-progress li.on{flex:3 1 0}
  .af-progress li.on span{display:inline; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .af-saved,.af-shots{display:none}
  .af-hero{grid-template-columns:minmax(0,1fr) 250px; gap:28px}
  .af-visual{height:260px}
}
@media (max-width:760px){
  .site-top{padding:12px 16px 8px}
  .site-logo{width:74px}
  body.site main{padding:4px 16px 50px}
  .site-foot-in{padding:24px 16px 34px}
  .af-intro h1{font-size:30px}
  .af-hero{grid-template-columns:1fr; gap:0}
  .af-hero .af-visual{order:-1; margin:6px 0 4px; height:190px}
  .af-visual .af-visual-bg{display:none}
  .af-visual .af-visual-photo{width:100%; object-position:50% 30%; border-radius:20px}
  .af-visual-chip{left:12px; bottom:12px}
  .cf-banner{height:90px; margin:-26px -20px 0}
  .af-form{padding:22px 16px 18px}
  .af-step legend{font-size:21px}
  .af-docs{grid-template-columns:1fr}
  .af-multi-list{grid-template-columns:1fr 1fr}
  .af-rv dl{grid-template-columns:1fr}
  .af-nav .btn.af-big{padding:12px 16px}
  .af-count{display:none}
  .cf-hero{padding:26px 20px}
  .cf-hero h1{font-size:26px}
  .cf-facts{grid-template-columns:1fr}
  .cf-next{padding:20px}
}
@media (prefers-reduced-motion:reduce){.cf-badge,.af-dots::after{animation:none}}

/* security check */
.af-human{margin:0 0 18px}

/* home link back to her-startup.com */
.site-home{padding:8px 14px; font-size:12.5px; gap:7px; text-decoration:none}
@media (max-width:760px){.site-home{padding:8px 11px}.site-label{display:none}}

/* headings in Recife Display, as on her-startup.com */
.af-intro h1,.af-step legend,.cf-hero h1,.af-closed h2,.cf-next h2{font-family:var(--serif); font-weight:700; letter-spacing:-.04em}
.af-intro h1{font-size:46px; line-height:1.02}
.af-step legend{font-size:28px}
.af-step legend .af-n{font-family:var(--ui); letter-spacing:.1em}
@media (max-width:760px){.af-intro h1{font-size:34px}.af-step legend{font-size:24px}}

/* sections with answers still needed */
.af-progress li.miss{color:var(--ink-2)}
.af-progress li.miss i{background:var(--warn-dim, rgba(248,132,54,.18)); color:var(--warn, #F88436)}
.af-progress li.miss::after{content:""; margin-left:auto; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--warn, #F88436)}
@media (max-width:980px){.af-progress li.miss::after{content:none}}

/* preview before submitting */
dialog.af-pv{width:min(760px,calc(100% - 24px)); max-height:min(88vh,900px); padding:0; display:none; flex-direction:column}
dialog.af-pv[open]{display:flex}
.af-pv .dlg-h h3{font-family:var(--serif); font-size:24px; font-weight:700; letter-spacing:-.04em}
.af-pv-b{overflow-y:auto; padding:16px 22px 6px; display:flex; flex-direction:column; gap:8px}
.af-pv-b .af-rv{background:var(--panel-2)}
.af-pv-f{display:flex; align-items:center; gap:10px; padding:14px 22px 18px; border-top:1px solid var(--hair)}
.af-pv-f .btn[disabled]{opacity:.55; cursor:not-allowed}
.af-pv-missing{background:var(--warn-dim, rgba(248,132,54,.14)); border-radius:14px; padding:14px 16px; font-size:13px}
.af-pv-missing b{display:block; margin-bottom:8px}
.af-pv-missing ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.af-pv-missing li{display:flex; gap:10px; justify-content:space-between; align-items:baseline}
.af-pv-missing li span{font-size:11px; color:var(--ink-3); white-space:nowrap}
.af-pv-missing .link{background:none; border:0; padding:0; cursor:pointer; text-align:left; font:inherit; color:var(--ink); text-decoration:underline; text-underline-offset:3px}
#af-draft span{min-width:5.5em; text-align:left}
@media (max-width:760px){
  .af-pv-b{padding:14px 14px 6px}
  .af-pv-f{padding:12px 14px 16px; flex-wrap:wrap}
  .af-pv-f .af-big{flex:1 1 100%; justify-content:center}
  #af-draft span{display:none}
}

/* document uploads: progress, done, failed */
.af-up{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--ink-2)}
.af-bar{flex:1 1 120px; height:6px; border-radius:99px; background:var(--panel-3, rgba(127,127,127,.2)); overflow:hidden}
.af-bar i{display:block; height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .2s ease}
.af-doc.bad .af-bar i{background:var(--fail)}
.af-doc.bad .af-up-t{color:var(--fail); font-weight:500}
.af-up-r{background:none; border:0; padding:0; cursor:pointer; font:inherit; font-weight:600; color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.af-doc.done .af-drop{border-style:solid; border-color:var(--pass)}
.af-doc.done .af-doc-ic{background:var(--pass-dim); color:var(--pass)}
.af-doc.done .af-doc-f{color:var(--pass)}
.af-doc.uploading .af-drop{border-style:solid; border-color:var(--accent)}

/* business start: month and year dropdowns */
.af-my{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:8px}

/* date of birth: day, month and year dropdowns */
.af-dmy{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr); gap:8px}

/* optional declaration tag */
.af-dec-opt{display:inline-block; margin-left:8px; padding:2px 8px; border-radius:99px; font-size:10px; letter-spacing:.06em; background:var(--panel-3, rgba(127,127,127,.18)); color:var(--ink-3)}