/* ---- Client portal (prototype) ---- */
.portal-section { padding-top: 8rem; }
.portal-card { background: var(--card-solid); border: 1px solid var(--card-line); border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2.4rem); margin-bottom: 1.5rem; }
.portal-title { font-size: clamp(2rem, 5vw, 3.2rem); margin: .4rem 0 1rem; }
.portal-h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.portal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.demo-banner { border: 1px dashed var(--amber); color: var(--amber-pale); background: rgba(255,179,71,.08); border-radius: var(--radius-sm); padding: .7rem 1rem; margin-bottom: 1.5rem; font-size: .9rem; }
.invoice-list { list-style: none; margin: 0; padding: 0; }
.invoice { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--indigo-line); flex-wrap: wrap; }
.invoice:first-child { border-top: 0; }
.inv-right { display: flex; align-items: center; gap: .8rem; }
.pill { font-size: .78rem; padding: .25rem .7rem; border-radius: 999px; font-family: var(--font-display); }
.pill-due { background: rgba(255,179,71,.15); color: var(--amber-2); }
.pill-paid { background: rgba(79,227,224,.12); color: var(--teal); }
.steps { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.step { font-size: .78rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--indigo-line); color: var(--text-faint); }
.step.on { border-color: var(--amber); color: var(--amber-pale); }
.step.done { color: var(--teal); }
.intake fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.intake legend { font-family: var(--font-display); color: #fff; margin-bottom: .8rem; }
.intake label { display: block; color: var(--text-dim); font-size: .92rem; margin: .9rem 0 .35rem; }
.intake input, .intake textarea { width: 100%; background: rgba(255,255,255,.03); border: 1px solid rgba(255,200,107,.2); border-radius: var(--radius-sm); color: var(--text); padding: .7rem .9rem; font: inherit; }
.intake input:focus, .intake textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; }