/* DHF Capital monetisation portal.

   Two themes off one token set. Light is the default and is what an investor
   sees unless they choose otherwise.

   The light theme is warm stone, not white. Its ground is #F6F3EE, the same
   paper colour dhf-capital.com uses, with the site's dusty blue #768F9E for
   muted text and its grey #51585A for body copy. Gold #B1842D and deep blue
   #2E3555 come from the logo.

   Nothing outside :root and [data-theme] declares a colour literal, so the
   whole thing switches cleanly. */

:root{
  /* Brand. The four colours dhf-capital.com actually uses. */
  --gold:#B1842D; --gold-deep:#8E691F;
  --navy:#2E3555; --navy-deep:#1F2440;
  --stone:#F6F3EE;   /* warm paper grey */
  --dusty:#768F9E;   /* dusty blue */
  --slate:#51585A;   /* grey */

  /* Light theme, the default. Warm stone rather than white: the ground is
     #F6F3EE, cards sit a shade above it, recessed areas a shade below. */
  --bg:#F6F3EE;
  --surface:#EFEBE3;
  --panel:#FCFAF6;
  --raise:#FFFDFA;
  --line:#DCD6CB;
  --line-soft:#E7E2D8;
  --text:#51585A;
  --heading:#2E3555;
  --dim:#6B7377;
  --off:#768F9E;
  --accent:#B1842D;
  --accent-text:#8E691F;
  --on-accent:#FFFFFF;
  --ok:#2A6B4E; --ok-bg:#E5EEE7; --ok-line:#B7CFC0;
  --warn:#8C5F14; --warn-bg:#F5EBD8; --warn-line:#DFC99C;
  --stop:#9C3730; --stop-bg:#F3E4E0; --stop-line:#DFBBB4;
  --gold-bg:#F2EADA; --on-gold-bg:#7A5A16; --gold-line:#DECBA4;
  --shadow:0 1px 2px rgba(81,88,90,.06), 0 6px 18px rgba(81,88,90,.08);
  --shadow-lg:0 20px 50px rgba(46,53,85,.20);
  --measure:66ch;
  color-scheme:light;

  --btn-fill:#8E691F; --btn-fill-hover:#71531A;}

:root[data-theme="dark"]{
  --bg:#171B2C;
  --surface:#1E2337;
  --panel:#232941;
  --raise:#2A3049;
  --line:#39415F;
  --line-soft:#2E3550;
  --text:#E7E9F2;
  --heading:#F3F4F9;
  --dim:#A3ADBC;
  --off:#768F9E;
  --accent:#D2A24A;
  --accent-text:#D2A24A;
  --on-accent:#171B2C;
  --ok:#5FBF93; --ok-bg:#14301F; --ok-line:#2C5C43;
  --warn:#DFB055; --warn-bg:#2E2410; --warn-line:#5D4A1E;
  --stop:#E08880; --stop-bg:#331715; --stop-line:#65342F;
  --gold-bg:#2A2211; --on-gold-bg:#D2A24A; --gold-line:#5C4A22;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 26px rgba(0,0,0,.3);
  --shadow-lg:0 22px 55px rgba(0,0,0,.5);
  color-scheme:dark;

  --btn-fill:#D2A24A; --btn-fill-hover:#E0B25C;}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Newsreader,Georgia,"Times New Roman",serif;font-weight:500;color:var(--heading);
  text-wrap:balance;margin:0;line-height:1.18;letter-spacing:-.01em}
a{color:var(--accent-text);text-decoration:none}
a:hover{color:var(--gold);text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.mono,.num{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.dim{color:var(--dim)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
.lb{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--off);display:block}

/* --- chrome --- */
.topbar{border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:30}
.topbar-in{max-width:1120px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.2em;font-weight:600;color:var(--heading)}
.logo:hover{text-decoration:none;color:var(--heading)}
.logo i{width:10px;height:10px;background:var(--gold);transform:rotate(45deg);display:block}
.topnav{display:flex;gap:18px;font-size:13px;align-items:center;height:100%}
.topnav a{color:var(--dim)}
.topnav a:hover{text-decoration:none;color:var(--heading)}
.topnav a.on{color:var(--heading);box-shadow:inset 0 -2px 0 var(--gold);display:flex;align-items:center;height:100%}
.topright{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--dim)}
.avatar{width:30px;height:30px;background:var(--gold-bg);border:1px solid var(--gold-line);
  display:grid;place-items:center;font-size:11px;color:var(--accent-text);letter-spacing:.04em;font-weight:600}

/* user menu */
.usermenu{position:relative}
.usertrigger{display:flex;align-items:center;gap:9px;background:none;border:1px solid transparent;
  font-family:inherit;font-size:12.5px;color:var(--dim);cursor:pointer;padding:4px 6px}
.usertrigger:hover{border-color:var(--line);color:var(--heading)}
.usertrigger .chev{font-size:9px;color:var(--off)}
.usermenu .sheet{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--panel);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:6px;z-index:40}
.usermenu .sheet .who{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.usermenu .sheet .who b{display:block;font-size:13.5px;color:var(--heading)}
.usermenu .sheet .who span{font-size:11.5px;color:var(--off)}
.usermenu .sheet a,.usermenu .sheet button{display:block;width:100%;text-align:left;padding:9px 12px;
  font-size:13px;color:var(--text);background:none;border:0;font-family:inherit;cursor:pointer}
.usermenu .sheet a:hover,.usermenu .sheet button:hover{background:var(--surface);text-decoration:none;color:var(--heading)}
.themebtn{background:none;border:1px solid var(--line);color:var(--dim);font-family:inherit;font-size:14px;
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;padding:0}
.themebtn:hover{border-color:var(--accent);color:var(--accent-text)}

/* --- previewing an investor's view --- */
.previewbar{background:var(--stop-bg);border-bottom:1px solid var(--stop-line);padding:10px 0;
  position:sticky;top:60px;z-index:25}
.previewbar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.previewbar .txt{flex:1;min-width:240px;font-size:12.5px;color:var(--stop)}
.previewbar .txt b{color:var(--heading)}

/* --- buttons --- */
.btn{display:inline-block;font-family:inherit;font-size:13px;padding:10px 18px;
  border:1px solid var(--btn-fill);background:var(--btn-fill);color:var(--on-accent);
  font-weight:600;letter-spacing:.02em;cursor:pointer;text-align:center}
.btn:hover{background:var(--btn-fill-hover);border-color:var(--btn-fill-hover);
  color:var(--on-accent);text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent-text)}
.btn.ghost:hover{background:var(--gold-bg);color:var(--on-gold-bg)}
.btn.plain{background:var(--surface);border-color:var(--line);color:var(--text);font-weight:500}
.btn.plain:hover{background:var(--line-soft);color:var(--heading)}
.btn.mute,.btn:disabled{background:var(--surface);border-color:var(--line);color:var(--off);
  font-weight:500;cursor:not-allowed}
.btn.mute:hover{background:var(--surface);color:var(--off)}
.btn.wide{display:block;width:100%}
.btn.sm{font-size:12px;padding:7px 12px}
.btn.danger{background:transparent;border-color:var(--stop-line);color:var(--stop)}
.btn.danger:hover{background:var(--stop-bg);color:var(--stop)}

/* --- pills --- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 9px;border:1px solid;white-space:nowrap;font-weight:600}
.pill.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.pill.wait{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.pill.off{color:var(--off);border-color:var(--line);background:var(--surface)}
.pill.gold{color:var(--on-gold-bg);border-color:var(--gold-line);background:var(--gold-bg)}
.pill.stop{color:var(--stop);border-color:var(--stop-line);background:var(--stop-bg)}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor;display:block}

/* --- surfaces --- */
.card{border:1px solid var(--line);background:var(--panel);padding:20px;box-shadow:var(--shadow)}
.card h3{font-size:18px;margin-bottom:6px}
.card + .card{margin-top:16px}
.banner{display:flex;align-items:center;gap:14px;border:1px solid var(--warn-line);
  background:var(--warn-bg);padding:14px 18px;margin-bottom:22px;flex-wrap:wrap}
.banner.quiet{border-color:var(--line);background:var(--surface)}
.banner .txt{flex:1;min-width:220px}
.banner .txt b{display:block;font-size:13.5px;color:var(--heading)}
.banner .txt span{font-size:12.5px;color:var(--dim)}
.notice{border-left:3px solid var(--accent);background:var(--surface);padding:12px 16px;font-size:13px;margin-bottom:16px}
.notice.bad{border-left-color:var(--stop);background:var(--stop-bg)}
.notice.good{border-left-color:var(--ok);background:var(--ok-bg)}

/* --- forms --- */
label{display:block}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],
input[type=date],input[type=file],select,textarea{
  width:100%;font-family:inherit;font-size:14px;color:var(--text);background:var(--raise);
  border:1px solid var(--line);padding:10px 12px;margin-top:5px;border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
input[type=file]{padding:8px 10px;font-size:12.5px;color:var(--dim)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.formgrid{grid-template-columns:1fr}}
.field-error{color:var(--stop);font-size:12px;margin-top:5px}
.checks{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.check{display:flex;gap:11px;font-size:13.5px;line-height:1.45;align-items:flex-start;cursor:pointer}
.check input{width:16px;height:16px;flex:none;margin:3px 0 0;accent-color:var(--gold)}
.check .help{display:block;font-size:11.5px;color:var(--dim);margin-top:3px}
.helptext{font-size:12px;color:var(--dim);margin-top:5px}

.stepper{display:flex;gap:14px;align-items:center;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--off);margin-bottom:18px;flex-wrap:wrap}
.stepper b{color:var(--accent-text);font-weight:600}
.stepper i{width:18px;height:1px;background:var(--line);display:block}

.choice{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
@media(max-width:720px){.choice{grid-template-columns:1fr}}
.opt{border:1px solid var(--line);background:var(--panel);padding:18px;display:flex;gap:13px;
  align-items:flex-start;cursor:pointer}
.opt:has(input:checked){border-color:var(--gold);background:var(--gold-bg)}
.opt input{width:16px;height:16px;flex:none;margin:3px 0 0;accent-color:var(--gold)}
.opt h4{font-size:15px}
.opt p{margin:6px 0 0;font-size:12.5px;color:var(--dim);line-height:1.5}

/* --- asset cards --- */
.assets{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:860px){.assets{grid-template-columns:1fr}}
.asset{border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;box-shadow:var(--shadow)}
.asset .head{display:flex;gap:14px;padding:16px 18px 13px}
.thumb{width:56px;height:56px;flex:none;border:1px solid var(--line);display:grid;place-items:center;
  font-size:22px;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.gem{background:linear-gradient(140deg,#D6E5E0,#7FA79B)}
.thumb.au{background:linear-gradient(140deg,#EFE1C2,#C39F52)}
.thumb.ag{background:linear-gradient(140deg,#E6E6E4,#A9B2B5)}
.thumb.re{background:linear-gradient(140deg,#DEE6EA,#768F9E)}
.thumb.rub{background:linear-gradient(140deg,#F0D2D0,#A8322F)}
.thumb.trm{background:linear-gradient(140deg,#D2EDEA,#2F9D96)}
.thumb.alx{background:linear-gradient(140deg,#CFE3D8,#6B5C9A)}
:root[data-theme="dark"] .thumb.gem{background:linear-gradient(140deg,#1c5c50,#07231f)}
:root[data-theme="dark"] .thumb.au{background:linear-gradient(140deg,#8a6b25,#2a1f08)}
:root[data-theme="dark"] .thumb.ag{background:linear-gradient(140deg,#7e8e9a,#1b2830)}
:root[data-theme="dark"] .thumb.re{background:linear-gradient(140deg,#2b4a68,#0b1a27)}
:root[data-theme="dark"] .thumb.rub{background:linear-gradient(140deg,#7d2320,#2a0c0b)}
:root[data-theme="dark"] .thumb.trm{background:linear-gradient(140deg,#1d6e68,#07231f)}
:root[data-theme="dark"] .thumb.alx{background:linear-gradient(140deg,#4a3f73,#161327)}
.asset h4{font-size:15px}
.asset h4 a{color:var(--heading)}
.asset h4 a:hover{color:var(--accent-text)}
.asset .spec{font-size:12px;color:var(--dim);margin-top:4px;line-height:1.5}
.asset .code{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--off);margin-top:6px}
.rows{border-top:1px solid var(--line);padding:13px 18px;display:grid;grid-template-columns:1fr 1fr;gap:11px 14px}
.kv{display:flex;flex-direction:column;gap:2px}
.kv span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--off)}
.kv b{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--heading)}
.bar{grid-column:1/-1}
.bar .track{height:6px;background:var(--surface);border:1px solid var(--line);display:flex}
.bar .fill{height:100%;background:var(--gold);display:block}
.bar .held{height:100%;background:repeating-linear-gradient(45deg,var(--gold-line),var(--gold-line) 3px,var(--gold-bg) 3px,var(--gold-bg) 6px);display:block}
.bar .lbl{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim);margin-top:6px;gap:10px}
.asset .act{padding:14px 18px;border-top:1px solid var(--line);background:var(--surface);margin-top:auto}
.asset .act .hint{font-size:11.5px;color:var(--off);line-height:1.45;margin-top:8px}
.inline-form{display:flex;gap:8px;align-items:stretch}
.inline-form input{margin-top:0;flex:1}

/* --- NAV --- */
.navstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin:0 0 14px}
.navstrip>div{background:var(--panel);padding:12px 14px}
.navstrip .lb{margin-bottom:4px}
.navstrip b{font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--heading);display:block}
.navstrip small{font-size:11px;color:var(--off);display:block;margin-top:2px}
.up{color:var(--ok)}
.down{color:var(--stop)}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .base{stroke:var(--off);stroke-width:1;stroke-dasharray:3 3}
.chart .area{fill:var(--gold);opacity:.12}
.chart .line{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .end{fill:var(--gold);stroke:var(--panel);stroke-width:2.5}
.chart text{fill:var(--off);font-family:"IBM Plex Mono",monospace;font-size:10px}
.chart .axis{fill:var(--dim)}

/* --- gallery --- */
.gallery{position:relative;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.gallery .frames{display:flex;transition:transform .35s ease}
.gallery figure{margin:0;min-width:100%;position:relative}
.gallery img{width:100%;height:380px;object-fit:cover;display:block}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font-size:12.5px;
  color:#fff;background:linear-gradient(transparent,rgba(31,36,64,.85))}
.gallery .nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;
  background:var(--panel);border:1px solid var(--line);color:var(--heading);font-size:15px;
  display:grid;place-items:center;cursor:pointer;padding:0;opacity:.94}
.gallery .nav.prev{left:12px}
.gallery .nav.next{right:12px}
.gallery .dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.gallery .dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(246,243,238,.6)}
.gallery .dots button.on{background:var(--gold)}
.gallery .empty{height:220px;display:grid;place-items:center;color:var(--off);font-size:13px}
@media(max-width:700px){.gallery img{height:240px}}

/* --- tables --- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--off);
  font-weight:600;padding:0 12px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .nm{font-weight:600;font-size:13.5px;color:var(--heading)}
.tbl .sm{font-size:11.5px;color:var(--off)}
.scrollx{overflow-x:auto}

/* --- timeline --- */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:110px 14px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.tl li:last-child{border-bottom:0}
.tl .when{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--off);padding-top:3px}
.tl .mk{display:flex;justify-content:center;padding-top:7px}
.tl .mk i{width:7px;height:7px;background:var(--off);display:block;transform:rotate(45deg)}
.tl li.mail .mk i{background:var(--gold)}
.tl li.now .mk i{background:var(--warn)}
.tl b{font-size:13px;font-weight:500;display:block;color:var(--heading)}
.tl p{margin:3px 0 0;font-size:12px;color:var(--dim);line-height:1.5}

/* --- ladder --- */
.step{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .ix{width:23px;height:23px;flex:none;border:1px solid var(--line);display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--off)}
.step.done .ix{border-color:var(--ok-line);color:var(--ok);background:var(--ok-bg)}
.step.now .ix{border-color:var(--gold);color:var(--on-gold-bg);background:var(--gold-bg)}
.step b{font-size:13.5px;font-weight:600;display:block;color:var(--heading)}
.step p{margin:3px 0 0;font-size:12px;color:var(--dim);line-height:1.5}
.docs{list-style:none;margin:12px 0 0;padding:0;font-size:13px}
.docs li{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);color:var(--dim)}
.docs li:last-child{border-bottom:0}
.docs li i{color:var(--accent-text);font-style:normal}

/* --- layout helpers --- */
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:start}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.page-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.page-head h1{font-size:28px}
.page-head h2{font-size:22px}
main{padding:32px 0 80px}
.messages{list-style:none;margin:0 0 20px;padding:0}
.crumb{font-size:12px;color:var(--off)}
.crumb a{color:var(--dim)}

/* --- footer --- */
footer{border-top:1px solid var(--line);background:var(--surface);padding:30px 0;margin-top:60px}
.foot{display:flex;gap:30px;justify-content:space-between;flex-wrap:wrap;font-size:12px;color:var(--off)}
.foot p{margin:0 0 8px;max-width:62ch;line-height:1.6}
.foot a{color:var(--dim)}
.footlinks{display:flex;gap:16px;margin-bottom:10px}

/* --- disclaimer --- */
.disclaimer{border:1px solid var(--stop-line);background:var(--stop-bg);padding:16px 18px;font-size:12.5px;
  color:var(--dim);line-height:1.6;margin-top:24px}
.disclaimer b{color:var(--stop);display:block;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:6px}

/* --- reservation --- */
.hold{border:1px solid var(--warn-line);background:var(--warn-bg);padding:12px 14px;margin-bottom:12px}
.hold .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.hold .amt{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;color:var(--warn)}
.countdown{font-family:"IBM Plex Mono",monospace;font-size:19px;color:var(--warn);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;display:block;margin-top:6px;font-weight:500}
.countdown.urgent{color:var(--stop)}
.countdown-note{font-size:11.5px;color:var(--dim);margin-top:4px;line-height:1.5}
.hold.spent{border-color:var(--line);background:var(--surface)}
.hold.spent .amt{color:var(--off);text-decoration:line-through}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.actions .btn{flex:1;min-width:150px}

/* --- dialog --- */
dialog.confirm{border:1px solid var(--gold);background:var(--panel);color:var(--text);
  padding:0;max-width:520px;width:calc(100% - 32px);box-shadow:var(--shadow-lg)}
dialog.confirm::backdrop{background:rgba(31,36,64,.55)}
dialog.confirm .ch{padding:18px 22px;border-bottom:1px solid var(--line)}
dialog.confirm .ch h3{font-size:20px;margin-top:5px}
dialog.confirm .cb{padding:20px 22px}
dialog.confirm .cb .lead{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--text)}
dialog.confirm .cf{padding:16px 22px;border-top:1px solid var(--line);background:var(--surface);
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
dialog.confirm .terms{list-style:none;margin:18px 0 0;padding:0;font-size:12.5px;color:var(--dim)}
dialog.confirm .terms li{padding:8px 0 8px 18px;border-bottom:1px dashed var(--line);position:relative;line-height:1.5}
dialog.confirm .terms li:last-child{border-bottom:0}
dialog.confirm .terms li::before{content:"◆";position:absolute;left:0;color:var(--accent-text);font-size:9px;top:11px}
dialog.confirm .terms b{color:var(--heading)}
dialog.confirm .check{font-size:12.5px;border:1px solid var(--gold-line);background:var(--gold-bg);padding:12px 14px}

/* --- team --- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
@media(max-width:820px){.team{grid-template-columns:1fr}}
.member{border:1px solid var(--line);background:var(--panel);padding:22px;text-align:center;box-shadow:var(--shadow)}
.member .face{width:104px;height:104px;margin:0 auto 14px;border:1px solid var(--line);overflow:hidden;
  background:var(--gold-bg);display:grid;place-items:center;border-radius:50%}
.member .face img{width:100%;height:100%;object-fit:cover;display:block}
.member .face span{font-family:Newsreader,Georgia,serif;font-size:30px;color:var(--accent-text)}
.member h3{font-size:18px}
.member .role{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);
  font-weight:600;margin-top:5px}
.member p{font-size:13px;color:var(--dim);line-height:1.6;margin:12px 0 0}
.member .links{margin-top:12px;font-size:12px;display:flex;gap:12px;justify-content:center}

/* --- faq --- */
.faq-section{margin-top:34px}
.faq-section h2{font-size:20px;padding-bottom:10px;border-bottom:1px solid var(--line)}
details.qa{border-bottom:1px solid var(--line-soft);padding:2px 0}
details.qa summary{cursor:pointer;padding:14px 30px 14px 0;font-size:14.5px;font-weight:600;
  color:var(--heading);position:relative;list-style:none}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:17px;
  color:var(--accent-text);font-weight:400}
details.qa[open] summary::after{content:"\2212"}
details.qa summary:hover{color:var(--accent-text)}
details.qa .answer{padding:0 30px 18px 0;font-size:13.5px;color:var(--dim);line-height:1.7;max-width:var(--measure)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- chart series ---------------------------------------------------------
   Six categorical slots, assigned to a compartment and never cycled. Both sets
   were checked with the dataviz validator against this theme's panel colour:
   lightness band, chroma floor, CVD separation, normal-vision floor, contrast.
   Adjacent separation sits in the 6-8 band, which is legal only alongside
   secondary encoding, so every use carries direct labels, 2px gaps and a
   legend, and the holdings table repeats the same numbers as text. */
:root{
  --series-1:#B1842D; --series-2:#2A78D6; --series-3:#E34948;
  --series-4:#1BAF7A; --series-5:#4A3AA7; --series-6:#008300;
}
:root[data-theme="dark"]{
  --series-1:#B5882F; --series-2:#3987E5; --series-3:#E66767;
  --series-4:#199E70; --series-5:#9085E9; --series-6:#4E9A3F;
}
.series-1{background:var(--series-1)} .series-2{background:var(--series-2)}
.series-3{background:var(--series-3)} .series-4{background:var(--series-4)}
.series-5{background:var(--series-5)} .series-6{background:var(--series-6)}

/* --- holdings overview --- */
.overview{display:grid;grid-template-columns:1.1fr 1.4fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:18px}
@media(max-width:760px){.overview{grid-template-columns:1fr}}
.overview > div{background:var(--panel);padding:20px 22px}
.overview .headline b{font-family:"IBM Plex Mono",monospace;font-size:30px;font-weight:500;
  color:var(--heading);display:block;margin-top:6px;font-variant-numeric:tabular-nums;line-height:1.1}
.overview .sub{font-size:11.5px;color:var(--dim);display:block;margin-top:5px}
.overview .headline b{font-size:38px}
.overview .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;background:var(--panel)}
@media(max-width:620px){.overview .tiles{grid-template-columns:1fr 1fr}}
.overview .tiles b{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:500;
  color:var(--heading);display:block;margin-top:6px;font-variant-numeric:tabular-nums}

/* allocation */
.allocation{border:1px solid var(--line);background:var(--panel);padding:20px 22px 8px;margin-bottom:18px}
.alloc-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.alloc-head h2{font-size:18px}
.alloc-head .dim{font-size:12.5px}
/* The proportion strip. No text inside a segment: white on the lighter series
   colours lands around 3:1, under the threshold for body text, and the legend
   directly beneath already carries the name, the amount and the percentage. */
.alloc-bar{display:flex;gap:2px;height:38px;overflow:hidden}
.alloc-bar .seg{min-width:3px;border-radius:2px}
.alloc-legend{list-style:none;margin:16px 0 0;padding:0}
.alloc-legend li{display:flex;align-items:baseline;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line-soft)}
.alloc-legend li:last-child{border-bottom:0}
.alloc-legend .swatch{width:11px;height:11px;border-radius:2px;flex:none;display:block;
  position:relative;top:1px}
.alloc-legend .who{flex:1;min-width:0}
.alloc-legend .who a{font-weight:600;color:var(--heading)}
.alloc-legend .who a:hover{color:var(--accent-text)}
.alloc-legend .who small{display:block;font-size:11px;color:var(--off);margin-top:2px}
.alloc-legend .amt{font-size:13.5px;color:var(--heading);text-align:right}
.alloc-legend .wt{font-size:13.5px;color:var(--dim);width:56px;text-align:right}
.overview-table{background:var(--panel);border:1px solid var(--line)}
.overview-table th{padding:14px 14px 10px}
.overview-table td{padding:13px 14px}

/* ---------------------------------------------------------------- messages
   A thread between an investor and the back office. Ours and theirs are told
   apart by side, border weight and a label, never by colour alone. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.tabrow{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.tab{display:inline-block;padding:7px 14px;border-radius:999px;font-size:12.5px;
  font-weight:600;letter-spacing:.01em;text-decoration:none;color:var(--text);
  border:1px solid var(--line);background:var(--surface)}
.tab:hover{color:var(--heading);border-color:var(--gold-line)}
.tab.on{background:var(--gold-bg);border-color:var(--gold);color:var(--heading)}

.threadlist{list-style:none;margin:0;padding:0}
.threadlist li+li{border-top:1px solid var(--line)}
.threadlist a{display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:16px 20px;text-decoration:none;color:inherit}
.threadlist a:hover{background:var(--panel)}
.tl-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.tl-main b{font-size:14px;color:var(--heading)}
.tl-prev{font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:52ch}
.tl-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}

.thread{display:flex;flex-direction:column;gap:12px;margin:0 0 22px}
.msg{border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  background:var(--surface);max-width:82%}
.msg.them{align-self:flex-start;border-left:3px solid var(--gold-line)}
.msg.mine{align-self:flex-end;border-left:3px solid var(--gold);background:var(--panel)}
.msg-head{display:flex;gap:10px;align-items:baseline;justify-content:space-between;
  margin:0 0 6px}
.msg-head b{font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--text)}
.msg-body{font-size:13.5px;line-height:1.6;color:var(--heading)}

.canned{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

@media (max-width:640px){
  .msg{max-width:100%}
  .threadlist a{flex-direction:column;align-items:flex-start;gap:8px}
  .tl-meta{flex-direction:row;align-items:center}
  .tl-prev{max-width:100%;white-space:normal}
}

/* The email catalogue shows plain text messages, so they wrap like plain text
   rather than scrolling sideways. */
.emailbody{white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,
  SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.65;
  color:var(--text);background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:16px 18px;margin:0}

/* ---- sales agents ------------------------------------------------------ */
/* A link that is meant to be copied, not read. The field is wide and the
   button sits against it so the two read as one control. */
.copyrow{display:flex;gap:8px;align-items:stretch}
.copyrow input{flex:1;min-width:0;font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:12.5px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--raise);color:var(--text)}
.copyrow .btn{white-space:nowrap}

.payform{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.payform input[type="date"],.payform input[type="text"]{padding:6px 8px;font-size:12px;
  border:1px solid var(--line);border-radius:6px;background:var(--raise);color:var(--text)}
.payform input[type="text"]{width:130px}

/* ------------------------------------------------------------ stat tiles
   The summary figures above the commission and agent tables. Only the .bad
   modifier was ever written, so on five pages the label and the number ran
   together as two unstyled words. Built on the same grid and the same tabular
   numerals as the holdings overview, so a figure means the same thing
   wherever it appears. */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 18px}
.statrow .stat{background:var(--panel);padding:18px 20px}
.statrow .stat .k{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
.statrow .stat b{display:block;margin-top:7px;
  font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:500;
  color:var(--heading);font-variant-numeric:tabular-nums;line-height:1.15}
.statrow .stat.bad b{color:var(--stop)}

/* Choosing which mailbox a programmed email leaves from. */
.senderpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface)}
.senderpick label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dim);margin:0}
.senderpick select{min-width:260px}
.senderpick .dim{font-size:12px}

/* ---- message threads --------------------------------------------------- */
.threadlist{list-style:none;margin:0;padding:0}
.threadlist li{border-bottom:1px solid var(--line)}
.threadlist li:last-child{border-bottom:0}
.threadlist a{display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:14px 18px;text-decoration:none;color:inherit}
.threadlist a:hover{background:var(--surface)}
.tl-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.tl-main b{font-size:13.5px}
.tl-prev{font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-meta{display:flex;align-items:center;gap:10px;white-space:nowrap}
.tl-meta .sm{color:var(--dim)}

.thread{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.msg{border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:var(--surface)}
.msg.them{background:var(--surface)}
.msg-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px}
.msg-head b{font-size:12.5px}
.msg-head .sm{font-size:11.5px;color:var(--dim)}
.msg-body{font-size:13.5px;line-height:1.55}

.cannedrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.cannedrow .btn{font-size:11.5px}

/* ------------------------------------------------------------ filter tabs
   A row of filters that reads as buttons rather than as links, used on the
   message queue and the commission pages. The selected one is marked by fill,
   border and weight together, never by colour alone, and each may carry a
   count so the button says what is behind it. */
.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);
  font-size:13px;font-weight:600;line-height:1;letter-spacing:.005em;
  color:var(--text);text-decoration:none;
  transition:border-color .12s ease,background .12s ease,color .12s ease}
.tabs a:hover{background:var(--surface);border-color:var(--gold-line);color:var(--heading)}
.tabs a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.tabs a.on{background:var(--gold-bg);border-color:var(--gold);color:var(--heading);
  box-shadow:inset 0 0 0 1px var(--gold)}
.tabs a.on:hover{background:var(--gold-bg)}

/* The count. Kept off a gold fill on purpose: white on this gold does not
   clear 4.5:1, and these are 11px numerals. */
.tabs .n{display:inline-block;min-width:21px;padding:3px 6px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:600;color:var(--dim);text-align:center}
.tabs a.on .n{background:var(--panel);border-color:var(--gold-line);color:var(--heading)}
.tabs .n.alert{color:var(--accent-text);border-color:var(--gold-line)}

@media (max-width:560px){
  .tabs{gap:6px}
  .tabs a{flex:1 1 auto;justify-content:space-between;padding:9px 12px}
}