/* =============================================================================
   Innovires Legal — onboarding design system (shared by index/apply/portal)
   ========================================================================== */
:root{
  --teal:#0e9aa7; --teal-deep:#0b7d88; --teal-soft:#e6f4f5; --teal-glow:rgba(14,154,167,.18);
  --ink:#0e1c1f; --ink-2:#33484c; --muted:#6a7b7e; --faint:#9aa9ab;
  --line:#e2eaeb; --line-2:#eef3f3;
  --bg:#eef4f4; --bg-2:#f7fafa; --card:#ffffff;
  --glass:rgba(255,255,255,.72); --glass-line:rgba(255,255,255,.85);
  --ok:#2e9e6b; --err:#d2483f; --err-soft:#fdeceb;
  --font-head:'Instrument Serif',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --r:16px; --r-sm:11px; --r-lg:24px;
  --sh-sm:0 1px 2px rgba(13,40,44,.05);
  --sh:0 18px 50px -22px rgba(11,80,88,.30), 0 4px 14px -8px rgba(11,80,88,.18);
  --sh-card:0 30px 70px -30px rgba(11,80,88,.40);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg); line-height:1.5; min-height:100dvh; -webkit-font-smoothing:antialiased; overflow-x:hidden}
#bg-canvas{position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none}
body::before{content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(60% 50% at 85% -5%, var(--teal-glow), transparent 60%),
    radial-gradient(55% 45% at 0% 100%, rgba(14,154,167,.10), transparent 60%),
    linear-gradient(180deg,var(--bg-2),var(--bg))}
.wrap{position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:clamp(18px,3vw,40px) clamp(16px,4vw,40px) 60px}

/* header */
header.top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(20px,4vw,40px)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{height:34px; width:auto; display:block}
.brand .firm{font-family:var(--font-head); font-size:20px; color:var(--ink); letter-spacing:.2px; line-height:1}
@media (max-width:420px){ .brand .firm{display:none} }
.page-intro{max-width:760px; margin:0 0 clamp(18px,3vw,30px)}
.page-intro .eyebrow{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-deep); font-weight:600; margin:0 0 8px}
.page-intro h1{font-family:var(--font-head); font-weight:400; font-size:clamp(26px,4.2vw,40px); line-height:1.05; margin:0 0 8px}
.page-intro p{color:var(--muted); font-size:15px; margin:0; max-width:60ch}
.top-right{display:flex; align-items:center; gap:14px}
.secure-pill{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2); background:var(--glass); border:1px solid var(--glass-line); padding:7px 12px; border-radius:999px; backdrop-filter:blur(8px); box-shadow:var(--sh-sm)}
.secure-pill svg{width:14px; height:14px; color:var(--teal)}
.lang{display:inline-flex; background:var(--glass); border:1px solid var(--glass-line); border-radius:999px; padding:3px; backdrop-filter:blur(8px)}
.lang button{font:600 12.5px/1 var(--font-body); border:0; background:transparent; color:var(--muted); padding:6px 11px; border-radius:999px; cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--teal); color:#fff}

/* ---------- CHOOSER (index.html) ---------- */
.hero{text-align:center; max-width:680px; margin:0 auto clamp(28px,5vw,48px)}
.hero .eyebrow{font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-deep); font-weight:600; margin:0 0 10px}
.hero h1{font-family:var(--font-head); font-weight:400; font-size:clamp(34px,6vw,58px); line-height:1.03; margin:0 0 14px}
.hero p{color:var(--muted); font-size:clamp(15px,2.2vw,18px); margin:0}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:980px; margin:0 auto}
@media (max-width:780px){ .cards{grid-template-columns:1fr} }
.scard{position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-card); backdrop-filter:blur(16px); transition:.22s var(--ease)}
.scard:hover{transform:translateY(-4px); box-shadow:0 36px 80px -28px rgba(11,80,88,.5)}
.scard .ic{width:54px; height:54px; border-radius:15px; background:var(--teal-soft); display:grid; place-items:center; margin-bottom:18px}
.scard .ic svg{width:27px; height:27px; color:var(--teal-deep)}
.scard h2{font-family:var(--font-head); font-weight:400; font-size:25px; margin:0 0 8px; line-height:1.1}
.scard p{color:var(--muted); font-size:14px; margin:0 0 18px; flex:1}
.scard .go{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--teal-deep)}
.scard .go svg{width:16px; height:16px; transition:.2s}
.scard:hover .go svg{transform:translateX(4px)}
.chooser-foot{text-align:center; color:var(--muted); font-size:13px; margin-top:34px}

/* layout (apply.html) */
.layout{display:grid; grid-template-columns:248px 1fr; gap:clamp(20px,3vw,40px); align-items:start}
@media (max-width:860px){ .layout{grid-template-columns:1fr; gap:18px} }
.rail{position:sticky; top:24px; padding:6px 0}
.rail ol{list-style:none; margin:0; padding:0; position:relative}
.rail ol::before{content:""; position:absolute; left:15px; top:14px; bottom:14px; width:2px; background:var(--line)}
.rail li{position:relative; display:flex; gap:13px; padding:10px 0; align-items:flex-start; cursor:pointer}
.rail .dot{flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--card); border:2px solid var(--line); display:grid; place-items:center; font-size:13px; font-weight:600; color:var(--muted); z-index:1; transition:.35s var(--ease)}
.rail li[data-state="active"] .dot{border-color:var(--teal); color:var(--teal); box-shadow:0 0 0 5px var(--teal-glow)}
.rail li[data-state="done"] .dot{background:var(--teal); border-color:var(--teal); color:#fff}
.rail .lbl{padding-top:5px}
.rail .lbl .n{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:1px}
.rail .lbl .t{font-size:14.5px; font-weight:500; color:var(--ink-2); line-height:1.25}
.rail li[data-state="active"] .lbl .t{color:var(--ink)}
.rail li[aria-disabled="true"]{cursor:not-allowed; opacity:.85}
.rail-m{display:none}
@media (max-width:860px){
  .rail{display:none}
  .rail-m{display:block; margin-bottom:4px}
  .rail-m .meta{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--muted); margin-bottom:8px}
  .rail-m .meta b{color:var(--ink); font-weight:600; font-size:14px}
}
.pbar{height:5px; background:var(--line-2); border-radius:999px; overflow:hidden}
.pbar i{display:block; height:100%; width:20%; background:linear-gradient(90deg,var(--teal),var(--teal-deep)); border-radius:999px; transition:width .5s var(--ease)}

/* card */
.card{position:relative; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-lg); box-shadow:var(--sh-card); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); overflow:hidden}
.card-pad{padding:clamp(22px,3.4vw,42px)}
.step-eyebrow{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-deep); font-weight:600; margin:0 0 8px}
.step-title{font-family:var(--font-head); font-weight:400; font-size:clamp(28px,4.4vw,46px); line-height:1.04; letter-spacing:.2px; margin:0 0 8px; color:var(--ink)}
.step-sub{font-size:15px; color:var(--muted); margin:0 0 24px; max-width:52ch}

fieldset{border:0; margin:0; padding:0}
legend{padding:0}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px}
.grid .full{grid-column:1/-1}
@media (max-width:560px){ .grid{grid-template-columns:1fr} .grid .full{grid-column:auto} }
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field > label{font-size:13.5px; font-weight:500; color:var(--ink-2)}
.field .req{color:var(--teal-deep)}
.field .opt{color:var(--faint); font-weight:400; font-size:12px}
.hint{font-size:12.5px; color:var(--muted); line-height:1.4}
.why{font-size:12.5px; color:var(--teal-deep); display:flex; gap:6px; align-items:flex-start; line-height:1.4}
.why svg{flex:0 0 auto; width:13px; height:13px; margin-top:2px}

input,select,textarea{font:400 15px/1.4 var(--font-body); color:var(--ink); width:100%; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 13px; transition:border-color .18s,box-shadow .18s,background .18s; appearance:none}
textarea{resize:vertical; min-height:84px}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a7b7e' stroke-width='2.2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px var(--teal-glow)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--err); box-shadow:0 0 0 4px var(--err-soft)}
.field.valid input:not(:placeholder-shown),.field.valid select{border-color:#bfe0dd}
.err-msg{display:none; font-size:12.5px; color:var(--err); gap:6px; align-items:center}
.err-msg.show{display:flex}
.field.invalid .err-msg{display:flex}
.field.invalid .why{display:none}

.choices{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:560px){ .choices{grid-template-columns:1fr} }
.choice{position:relative; border:1.5px solid var(--line); border-radius:var(--r); padding:16px 16px 16px 50px; cursor:pointer; background:#fff; transition:.18s var(--ease)}
.choice:hover{border-color:#bfe0dd; transform:translateY(-1px)}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice .mark{position:absolute; left:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; border:2px solid var(--line); border-radius:50%; transition:.18s}
.choice.cbx .mark{border-radius:6px}
.choice .ct{font-weight:600; font-size:14.5px; display:block}
.choice .cd{font-size:12.5px; color:var(--muted); margin-top:2px}
.choice:has(input:checked){border-color:var(--teal); background:var(--teal-soft); box-shadow:0 0 0 4px var(--teal-glow)}
.choice:has(input:checked) .mark{border-color:var(--teal); background:var(--teal); box-shadow:inset 0 0 0 3px #fff}
.choice.cbx:has(input:checked) .mark{box-shadow:none; background:var(--teal) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6L9 17l-5-5'/></svg>") center/13px no-repeat}
.choice:has(input:focus-visible){box-shadow:0 0 0 4px var(--teal-glow)}
/* robust class-based checked state (fallback + reinforcement for :has) */
.choice.is-on{border-color:var(--teal); background:var(--teal-soft); box-shadow:0 0 0 4px var(--teal-glow)}
.choice.is-on .mark{border-color:var(--teal); background:var(--teal)}
.choice:not(.cbx).is-on .mark{box-shadow:inset 0 0 0 3px #fff}
.choice.cbx.is-on .mark{box-shadow:none; background:var(--teal) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6L9 17l-5-5'/></svg>") center/13px no-repeat}

.seg{display:inline-flex; flex-wrap:wrap; gap:8px}
.seg label{border:1.5px solid var(--line); border-radius:999px; padding:9px 16px; font-size:13.5px; cursor:pointer; transition:.16s; background:#fff}
.seg input{position:absolute; opacity:0; width:0; height:0}
.seg label:has(input:checked){border-color:var(--teal); background:var(--teal-soft); color:var(--teal-deep); font-weight:600}
.seg label.is-on{border-color:var(--teal); background:var(--teal-soft); color:var(--teal-deep); font-weight:600}
.seg label:has(input:focus-visible){box-shadow:0 0 0 4px var(--teal-glow)}

/* file upload control */
.filebox{display:flex; align-items:center; gap:12px; border:1.5px dashed var(--line); border-radius:var(--r-sm); padding:9px 12px; cursor:pointer; background:#fff; transition:.16s}
.filebox:hover{border-color:var(--teal)}
.filebox.has{border-style:solid; border-color:#bfe0dd; background:var(--teal-soft)}
.fb-btn{flex:0 0 auto; font:600 13px var(--font-body); color:var(--teal-deep); background:var(--teal-soft); padding:7px 12px; border-radius:8px}
.filebox.has .fb-btn{background:#fff}
.fb-name{font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.repeat{display:flex; flex-direction:column; gap:12px}
.row{position:relative; border:1px solid var(--line); border-radius:var(--r); padding:16px; background:rgba(255,255,255,.6)}
.row .row-h{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.row .row-h .rn{font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--teal-deep)}
.row .row-h .rn .me{font-weight:400; color:var(--muted); text-transform:none; letter-spacing:0}
.btn-rm{border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; display:flex; align-items:center; gap:5px; padding:4px 6px; border-radius:8px}
.btn-rm:hover{color:var(--err); background:var(--err-soft)}
.btn-add{align-self:flex-start; border:1.5px dashed var(--line); background:transparent; color:var(--teal-deep); font:600 13.5px var(--font-body); padding:11px 16px; border-radius:var(--r-sm); cursor:pointer; display:flex; align-items:center; gap:8px; transition:.16s; margin-top:12px}
.btn-add:hover{border-color:var(--teal); background:var(--teal-soft)}
.btn-add[disabled]{opacity:.45; cursor:not-allowed}

.total{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-radius:var(--r-sm); background:var(--teal-soft); font-size:14px; font-weight:500; color:var(--teal-deep); margin-top:14px}
.total[data-ok="false"]{background:var(--err-soft); color:var(--err)}
.total .mini{font:600 12.5px var(--font-body); border:0; background:rgba(255,255,255,.7); color:var(--ink-2); padding:6px 10px; border-radius:8px; cursor:pointer}
.total .mini:hover{background:#fff}

.toggle{display:flex; gap:11px; align-items:flex-start; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--r); cursor:pointer; background:#fff; margin-bottom:14px}
/* Custom checkbox — the global `appearance:none` (input,select,textarea) wipes the native
   control + accent-color, so toggles/consent need an explicit checked state to be visible. */
.toggle input{appearance:none; -webkit-appearance:none; margin:1px 0 0; width:20px; height:20px; padding:0; border:2px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; flex:0 0 auto; transition:.18s}
.toggle input:checked{border-color:var(--teal); background:var(--teal) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6L9 17l-5-5'/></svg>") center/13px no-repeat}
.toggle input:focus-visible{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px var(--teal-glow)}
.toggle:has(input:checked){border-color:var(--teal); background:var(--teal-soft)}
/* Visible submit-time error (server rejections were previously only in the sr-only #live). */
.submit-msg{margin-top:16px; padding:13px 15px; border-radius:var(--r-sm); font-size:14px; font-weight:500; border:1.5px solid var(--err); background:var(--err-soft); color:var(--err)}
.filebox.fb-err{border:1.5px solid var(--err)!important; box-shadow:0 0 0 3px var(--err-soft)}
.toggle .tt{font-size:14px; font-weight:500}
.toggle .td{font-size:12.5px; color:var(--muted); margin-top:2px}

.consent{border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.6); padding:20px; max-height:300px; overflow:auto; font-size:13.5px; color:var(--ink-2); line-height:1.6}
.consent h4{font-family:var(--font-head); font-weight:400; font-size:19px; margin:0 0 10px}
.consent ul{margin:8px 0; padding-left:20px}
.consent li{margin:4px 0}

.bento{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){ .bento{grid-template-columns:1fr} }
.bcard{border:1px solid var(--line); border-radius:var(--r); padding:18px; background:rgba(255,255,255,.6)}
.bcard.full{grid-column:1/-1}
.bcard .bh{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.bcard .bh h3{font-family:var(--font-head); font-weight:400; font-size:19px; margin:0}
.bcard .edit{font:600 12.5px var(--font-body); color:var(--teal-deep); background:transparent; border:0; cursor:pointer; padding:4px 8px; border-radius:8px}
.bcard .edit:hover{background:var(--teal-soft)}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0; color:var(--ink); font-weight:500; word-break:break-word}
.next{display:flex; gap:12px; align-items:flex-start; background:var(--teal-soft); border-radius:var(--r); padding:16px 18px; margin-top:20px; font-size:13.5px; color:var(--teal-deep)}
.next svg{flex:0 0 auto; width:18px; height:18px; margin-top:1px}

.nav{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px clamp(22px,3.4vw,42px); border-top:1px solid var(--line-2); background:rgba(255,255,255,.45)}
.btn{font:600 15px var(--font-body); border-radius:var(--r-sm); padding:13px 24px; cursor:pointer; border:1.5px solid transparent; transition:.18s var(--ease); display:inline-flex; align-items:center; gap:9px}
.btn-primary{background:var(--teal); color:#fff; box-shadow:0 10px 24px -10px var(--teal)}
.btn-primary:hover{background:var(--teal-deep); transform:translateY(-1px)}
.btn-primary[disabled]{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.btn-ghost{background:transparent; color:var(--ink-2); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-2)}
.btn-ghost[hidden]{display:none}
.saved{font-size:12.5px; color:var(--ok); display:none; align-items:center; gap:6px; margin-right:auto; margin-left:6px}
.saved.show{display:flex}
.saved svg{width:14px;height:14px}

.done{text-align:center; padding:clamp(34px,6vw,70px) clamp(22px,4vw,50px)}
.done .ring{width:78px; height:78px; border-radius:50%; background:var(--teal-soft); display:grid; place-items:center; margin:0 auto 22px}
.done .ring svg{width:38px; height:38px; color:var(--teal)}
.done h2{font-family:var(--font-head); font-weight:400; font-size:clamp(28px,4.5vw,40px); margin:0 0 12px}
.done p{color:var(--muted); max-width:46ch; margin:0 auto 8px; font-size:15px}
.done .ref{display:inline-block; margin-top:18px; font:600 14px var(--font-body); background:var(--teal-soft); color:var(--teal-deep); padding:9px 16px; border-radius:999px}

.step{display:none}
.step.active{display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.section-h{font-family:var(--font-head); font-weight:400; font-size:21px; margin:26px 0 14px; padding-top:22px; border-top:1px solid var(--line-2)}
.section-h:first-of-type{border-top:0; padding-top:0; margin-top:0}
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} }