/*
 * Investor-facing styles: landing, signing page, confirmation, deal room.
 *
 * Kept separate from app.css, which dresses the admin and rep portals. The two
 * audiences want different things - an investor is being presented to, a rep is
 * working - and separating them means a change to one cannot break the other.
 */

:root{
  --ground:#F2F6F8; --surface:#FFFFFF; --surface-2:#F7FAFB;
  --ink:#0C1B27; --ink-2:#33505F; --muted:#5F7889;
  --line:#DCE5EB; --line-soft:#EAF0F4;
  --navy:#0B3264; --teal:#0E7490; --teal-2:#0C8FA6; --mint:#14B8A6;
  --amber:#A96A05; --amber-bg:#FDF6E7;
  --good:#0F766E; --good-bg:#ECFAF6;
  --shadow-sm:0 1px 2px rgba(12,27,39,.06);
  --shadow-md:0 6px 20px -8px rgba(12,27,39,.18), 0 1px 2px rgba(12,27,39,.05);
  --r:10px; --r-lg:14px;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#071119; --surface:#0E1E29; --surface-2:#132836;
    --ink:#E7EFF4; --ink-2:#B6CBD8; --muted:#8AA3B4;
    --line:#1D3243; --line-soft:#162937;
    --navy:#7FB0E8; --teal:#2AA7BE; --teal-2:#35BCD2; --mint:#2DD4BF;
    --amber:#E0A64A; --amber-bg:#241C0C;
    --good:#4ADEC0; --good-bg:#0B241F;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 8px 24px -10px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ground:#071119; --surface:#0E1E29; --surface-2:#132836;
  --ink:#E7EFF4; --ink-2:#B6CBD8; --muted:#8AA3B4;
  --line:#1D3243; --line-soft:#162937;
  --navy:#7FB0E8; --teal:#2AA7BE; --teal-2:#35BCD2; --mint:#2DD4BF;
  --amber:#E0A64A; --amber-bg:#241C0C;
  --good:#4ADEC0; --good-bg:#0B241F;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px -10px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- portal chrome ---------- */
.topbar{background:var(--surface); border-bottom:1px solid var(--line)}
.topbar-in{
  max-width:1240px; margin:0 auto; padding:12px 22px;
  display:flex; align-items:center; gap:18px;
}
.logo{height:56px; width:auto; display:block}
.tick{
  font-family:var(--mono); font-size:11px; letter-spacing:.02em;
  color:var(--muted); margin-left:12px; padding-left:28px;
  border-left:1px solid var(--line); white-space:nowrap;
}
.tick .sym{text-transform:uppercase; letter-spacing:.13em; color:var(--ink-2)}
.tick .bar{opacity:.35; padding:0 9px}
.topbar .who{margin-left:auto; display:flex; align-items:center; gap:11px}
.who .nm{font-size:13.5px; font-weight:500}
.who .av{
  width:31px; height:31px; border-radius:50%;
  background:linear-gradient(150deg,var(--teal),var(--navy));
  color:#fff; display:grid; place-items:center;
  font-size:11.5px; font-weight:600; letter-spacing:.03em;
}
.conf{
  background:var(--surface-2); border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px; letter-spacing:.015em;
  color:var(--muted);
}
.conf b{color:var(--ink-2); font-weight:500; letter-spacing:.08em; text-transform:uppercase}
.conf-in{max-width:1240px; margin:0 auto; padding:7px 22px}

.wrap{max-width:1240px; margin:0 auto; padding:30px 22px 64px}
.cols{display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:26px; align-items:start}
.stack{display:flex; flex-direction:column; gap:22px}
/* ---------- welcome ---------- */
.hello{display:flex; flex-direction:column; gap:7px; margin-bottom:4px}
.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--teal); font-weight:500;
}
.hello h1{font-family:var(--serif); font-size:31px; font-weight:500; letter-spacing:-.015em; line-height:1.15}
.hello p{color:var(--ink-2); font-size:14.5px; max-width:62ch}

/* ---------- progress rail ---------- */
.rail{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px 20px}
.rail-h{display:flex; align-items:baseline; gap:10px; margin-bottom:20px}
.rail-h h2{font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.rail-h .of{margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
.step{position:relative; padding-right:14px}
.step .bar{height:3px; border-radius:2px; background:var(--line); margin-bottom:13px; overflow:hidden}
.step .bar i{display:block; height:100%; width:0; background:var(--teal); border-radius:2px;
  transition:width .9s cubic-bezier(.4,0,.2,1)}
.step.done .bar i{width:100%}
.step.now .bar i{width:45%; background:linear-gradient(90deg,var(--teal),var(--mint))}
.step .k{
  display:flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:500; color:var(--muted); margin-bottom:3px;
}
.step.done .k, .step.now .k{color:var(--ink)}
.step .dot{
  width:15px; height:15px; border-radius:50%; flex:none;
  border:2px solid var(--line); background:var(--surface);
}
.step.done .dot{background:var(--teal); border-color:var(--teal); position:relative}
.step.done .dot::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:4px; height:7px; border:solid #fff; border-width:0 1.6px 1.6px 0;
  transform:rotate(43deg) translate(-1px,-1px);
}
.step.now .dot{border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,transparent)}
.step .when{font-family:var(--mono); font-size:11px; color:var(--muted); padding-left:22px}

/* ---------- cards ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.card-h{
  display:flex; align-items:center; gap:10px;
  padding:16px 22px; border-bottom:1px solid var(--line-soft);
}
.card-h h2{font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.card-h .aside{margin-left:auto; font-size:12px; color:var(--muted)}
.card-b{padding:20px 22px}

/* ---------- documents ---------- */
.docs{display:flex; flex-direction:column}
.doc{
  display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:15px 22px; border-bottom:1px solid var(--line-soft);
  text-decoration:none; color:inherit; transition:background .15s;
}
.doc:last-child{border-bottom:0}
.doc:hover{background:var(--surface-2)}
.doc:focus-visible{outline:2px solid var(--teal); outline-offset:-2px}
.doc .ico{
  width:38px; height:46px; border-radius:4px; border:1px solid var(--line);
  background:var(--surface-2); display:grid; place-items:center;
  font-family:var(--mono); font-size:8.5px; font-weight:600;
  letter-spacing:.06em; color:var(--teal); position:relative;
}
.doc .ico::before{
  content:""; position:absolute; top:0; right:0;
  border-width:0 9px 9px 0; border-style:solid;
  border-color:transparent var(--ground) transparent transparent;
}
.doc .t{font-size:15px; font-weight:500; margin-bottom:2px}
.doc .m{font-size:12.5px; color:var(--muted)}
.doc .m .sep{opacity:.45; padding:0 5px}
.doc .go{
  font-size:12.5px; color:var(--teal); font-weight:500; white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
/* ---------- right rail ---------- */
.next{
  background:linear-gradient(158deg,var(--navy),#0A2445);
  border-radius:var(--r-lg); padding:22px 22px 20px; color:#EAF3F8;
  box-shadow:var(--shadow-md);
}
:root[data-theme="dark"] .next, :root:not([data-theme="light"]) .next{color:#EAF3F8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .next{background:linear-gradient(158deg,#123253,#0A1F36)}}
.next .eyebrow{color:var(--mint)}
.next h3{font-family:var(--serif); font-size:20px; font-weight:500; margin:7px 0 8px; color:#fff}
.next p{font-size:13.5px; color:#B9D2E0; margin-bottom:16px}
.btn{
  display:block; width:100%; text-align:center; font:inherit; font-size:14px; font-weight:500;
  padding:12px 16px; border-radius:9px; border:0; cursor:pointer; text-decoration:none;
  background:var(--mint); color:#04222B; transition:transform .12s, filter .15s;
}
.btn:hover{filter:brightness(1.06)} .btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid #fff; outline-offset:2px}
.btn.sec{background:transparent; color:#CFE6EF; border:1px solid #2C5578; margin-top:9px}

.rep{display:flex; gap:13px; align-items:center; padding:18px 20px}
.rep .av{
  width:44px; height:44px; border-radius:50%; flex:none;
  background:linear-gradient(150deg,var(--teal),var(--navy)); color:#fff;
  display:grid; place-items:center; font-size:14px; font-weight:600;
}
.rep .nm{font-size:14.5px; font-weight:500}
.rep .ro{font-size:12.5px; color:var(--muted)}
.rep .lk{font-size:12.5px; color:var(--teal); text-decoration:none; margin-top:3px; display:inline-block}

/* ---------- messages ---------- */
.thread{display:flex; flex-direction:column; gap:12px; padding:18px 20px; max-height:270px; overflow-y:auto}
.msg{max-width:88%; font-size:13.5px; line-height:1.5; padding:10px 13px; border-radius:12px}
.msg .mt{display:block; font-size:10.5px; margin-top:5px; opacity:.7; font-family:var(--mono)}
.msg.them{background:var(--surface-2); border:1px solid var(--line); border-bottom-left-radius:3px; align-self:flex-start}
.msg.you{background:var(--teal); color:#fff; border-bottom-right-radius:3px; align-self:flex-end}
.composer{border-top:1px solid var(--line-soft); padding:13px 20px; display:flex; gap:9px}
.composer input{
  flex:1; font:inherit; font-size:13.5px; padding:9px 12px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
.composer input:focus{outline:2px solid var(--teal); outline-offset:-1px; border-color:var(--teal)}
.composer button{
  font:inherit; font-size:13px; font-weight:500; padding:9px 15px; border-radius:9px;
  border:0; background:var(--teal); color:#fff; cursor:pointer;
}
/* ---------- signing screen ---------- */
.sign-wrap{max-width:940px; margin:0 auto; padding:30px 22px 120px}
.sign-lead{margin-bottom:22px}
.sign-lead h1{font-family:var(--serif); font-size:29px; font-weight:500; letter-spacing:-.015em; margin-bottom:7px}
.sign-lead p{color:var(--ink-2); font-size:14.5px; max-width:64ch}
.agree{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.agree-h{padding:14px 22px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:10px}
.agree-h h2{font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.agree-h .prog{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted)}
.agree-b{max-height:290px; overflow-y:auto; padding:20px 26px; font-size:13.5px; line-height:1.62; color:var(--ink-2)}
.agree-b h3{font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal); margin:18px 0 6px}
.agree-b h3:first-child{margin-top:0}
.agree-b p{margin-bottom:11px}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0 0}
.fields label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:500; color:var(--ink-2)}
.fields .full{grid-column:1/-1}
.fields input{
  font:inherit; font-size:14.5px; padding:11px 13px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
.fields input:focus{outline:2px solid var(--teal); outline-offset:-1px; border-color:var(--teal)}
.padwrap{margin-top:20px}
.padlab{display:flex; align-items:baseline; gap:10px; margin-bottom:7px}
.padlab .t{font-size:12.5px; font-weight:500; color:var(--ink-2)}
.padlab .clear{margin-left:auto; font:inherit; font-size:12px; color:var(--teal);
  background:none; border:0; cursor:pointer; text-decoration:underline}
.pad{
  position:relative; background:var(--surface); border:1.5px dashed var(--line);
  border-radius:var(--r-lg); height:170px; touch-action:none; overflow:hidden;
}
.pad.inked{border-style:solid; border-color:var(--mint)}
.pad canvas{display:block; width:100%; height:100%; cursor:crosshair}
.pad .hint{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  color:var(--muted); font-size:14px;
}
.pad.inked .hint{display:none}
.pad .base{position:absolute; left:26px; right:26px; bottom:44px; border-bottom:1px solid var(--line); pointer-events:none}
.pad .x{position:absolute; left:26px; bottom:47px; color:var(--muted); font-size:15px; pointer-events:none}
.consent{display:flex; gap:11px; align-items:flex-start; margin-top:20px; font-size:13px;
  color:var(--ink-2); line-height:1.5}
.consent input{width:17px; height:17px; margin-top:2px; flex:none; accent-color:var(--teal)}
.signbar{
  position:sticky; bottom:0; margin-top:26px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 20px;
  display:flex; align-items:center; gap:16px; box-shadow:var(--shadow-md);
}
.signbar .st{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px}
.signbar .st .d{width:8px; height:8px; border-radius:50%; background:var(--line)}
.signbar.ready .st .d{background:var(--good)}
.signbar.ready .st{color:var(--good)}
.signbar .btn{width:auto; margin-left:auto; padding:12px 26px; background:var(--teal); color:#fff}
.signbar .btn[disabled]{opacity:.42; cursor:not-allowed}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .cols{grid-template-columns:1fr}
}
@media (max-width:880px){
  .tick{display:none}
}
@media (max-width:620px){
  body{font-size:14.5px}
  .wrap{padding:22px 16px 52px}
  .topbar-in,.conf-in{padding-left:16px; padding-right:16px}
  .hello h1{font-size:25px}
  .steps{grid-template-columns:1fr; gap:15px}
  .step{padding-right:0}
  .step .bar{margin-bottom:9px}
    .fields{grid-template-columns:1fr}
  .doc{grid-template-columns:34px minmax(0,1fr); row-gap:8px}
  .doc .go{grid-column:2; justify-content:flex-start}
  .sign-wrap{padding:22px 16px 90px}
  .signbar{flex-wrap:wrap} .signbar .btn{width:100%; margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}
.hidden{display:none !important}

/* A request already made: a standing acknowledgement, not a vanishing notice. */
.asked{background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  border-radius:9px; padding:11px 14px; margin-bottom:9px}
.asked b{display:block; font-size:13.5px; color:#fff; margin-bottom:3px}
.asked b::before{content:"¹3"; margin-right:7px; color:var(--mint); font-weight:700}
.asked span{display:block; font-size:12.5px; color:#B9D2E0; line-height:1.5}