/* The investor portal, on the same design system as the operations console.
 *
 * It matters more here than there, and for one reason: a member of staff meets both surfaces and
 * can tell that one of them is the older one, whereas an investor with millions committed sees
 * these pages and nothing else. Until now the portal had had only Inter removed from it. It still
 * carried three colour values the design document records as failing AA as text, the .grad
 * text-clip utility, the #pgv chart gradient, eight `transition` shorthands that animate every
 * property including box-shadow, and no prefers-reduced-motion block at all.
 *
 * The tokens below are docs/DESIGN_SYSTEM.md's :root, verbatim where it applies. The two the
 * console does not have are kept and explained. --grad is deliberately absent: it was applied to a
 * button, a 3px navigation marker, a 36px avatar disc, a 6px progress bar and a chat bubble, and
 * the document permits a gradient only on a box whose smaller dimension is one pixel.
 */
:root{
  /* surfaces */
  --bg:#080b10; --bg2:#0c1219; --panel:#101825; --panel2:#141d2b;
  --ink:#eef4fb; --dim:#9aabbf; --faint:#7c8fa6;
  --line:#1c2836; --line2:#25344a; --hover:rgba(255,255,255,.022);
  /* The border of a control whose border is the only thing identifying it. --line2 is 1.41:1
     against --panel, which is right for a containing panel edge and fails WCAG 1.4.11's 3:1 for a
     user-interface component. An empty input on a dark ground has nothing else to identify it;
     a button or a chip has a label and a fill, so those keep --line2. See the note in
     public/admin/styles.css and the colour section of docs/DESIGN_SYSTEM.md. */
  --line-ctl:#5a6d87;

  /* accents — one meaning each. --faint, --blue and --violet were #63788e, #3f7fe0 and #7a5cff,
     which measure 3.71, 4.29 and 3.87 against the darkest ground they sit on and fail AA as text.
     The hues are unchanged; the console was corrected months ago and the portal was not. */
  --aqua:#38d6c8;    /* LP side, capital in play */
  --blue:#5590e8;    /* interactive, informational, focus */
  --violet:#8f79ff;  /* GP / sponsor side */
  --green:#35c98a;   /* settled */
  --amber:#e6b23a;   /* waiting on a person, or below the evidentiary standard */
  --red:#ff7a7a;     /* a fault, and destructive controls */
  --red-ink:#ff9a9a; /* fault text on a dark ground */

  /* The panel colour at zero alpha. Not a new colour — the same one, needed as an explicit
     transparent stop because a gradient to `transparent` fades through black in some engines
     rather than through the panel. It carries the scroll cue on an overflowing card. */
  --panel-0:rgba(16,24,37,0);

  /* faces — never Inter */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* type: size / line-height, then weight and tracking */
  --t-display:600 26px/1.15 var(--font);   --tr-display:-.026em;
  --t-heading:600 19px/1.25 var(--font);   --tr-heading:-.022em;
  --t-subhead:600 15px/1.35 var(--font);   --tr-subhead:-.012em;
  --t-figure:600 15px/1.2 var(--font);     --tr-figure:-.010em;
  --t-body:400 13.5px/1.55 var(--font);    --tr-body:0;
  --t-note:400 12.5px/1.5 var(--font);     --tr-note:0;
  --t-index:500 11px/1.5 var(--mono);      --tr-index:.04em;
  --t-mono:500 10.5px/1 var(--mono);       --tr-mono:.04em;
  --t-eyebrow:500 10.5px/1 var(--mono);    --tr-eyebrow:.15em;

  /* spacing: 4px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px;
  --gutter:24px;

  /* radius */
  --r-card:12px; --r-control:8px; --r-mark:4px;

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-flat:cubic-bezier(.2,0,.2,1);
  --d1:120ms; --d2:180ms; --d3:260ms; --d4:500ms;

  /* the sidebar's width, which is layout rather than a system token */
  --sb:264px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* font-feature-settings as well as font-variant-numeric, and for a reason that bites: every --t-*
   token is a `font` shorthand, and the shorthand resets font-variant to its initial value. Any rule
   taking a type token would silently drop tabular figures, and the one place that shows is a column
   of money — which on this surface is the investor's own. */
body{margin:0;background:var(--bg);color:var(--ink);
  font:var(--t-body);letter-spacing:var(--tr-body);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;font-weight:600;line-height:1.15}
.wmk{color:var(--aqua)}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.hidden{display:none!important}
::selection{background:rgba(85,144,232,.35)}
/* ---------- LOGIN ----------
 *
 * The brand panel carried three gradients: a 160° wash across the whole column, a 520px blue
 * radial glow bleeding off the top, and a 420px violet disc off the bottom corner. Nobody can say
 * what any of them means, which is the anti-filler test in EDITORIAL_RULES §8, and the two radials
 * were at .28 and .18 alpha against a rule that caps a surface wash at .03. They are gone. What is
 * left is the logo, the sentence, and the three things the portal actually does — set in type, on
 * the panel colour, which is the house standard for this business.
 */
#login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
@media(max-width:880px){#login{grid-template-columns:1fr}#login .brandside{display:none}}
#login .brandside{position:relative;overflow:hidden;background:var(--bg2);
  border-right:1px solid var(--line);
  padding:var(--s8);display:flex;flex-direction:column;justify-content:space-between}
#login .bwrap{position:relative;z-index:2}
#login .logo{display:flex;align-items:center;gap:var(--s3);font:var(--t-heading);
  letter-spacing:var(--tr-heading)}
#login .logo img{width:30px;height:30px}
/* The one Display on this screen. It was clamp(30px,3.4vw,44px), which at a desk was two and a
   half times the largest type anywhere else in the product. */
#login .hl{font:var(--t-display);letter-spacing:var(--tr-display);
  margin:var(--s6) 0 var(--s4);max-width:20ch}
#login .sub{color:var(--dim);max-width:52ch;font:var(--t-body)}
#login .feats{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--s3)}
#login .feat{display:flex;gap:var(--s3);align-items:flex-start;color:var(--dim);font:var(--t-body)}
#login .feat svg{width:20px;height:20px;flex:none;margin-top:1px}
/* currentColor, not url(#pg). A three-stop gradient laid across a 1.7px icon stroke is a gradient
   on a hairline that says nothing, and it made these three marks the only coloured thing on the
   screen for no reason a reader could name. */
#login .feat svg *{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
#login .formside{display:flex;align-items:center;justify-content:center;padding:var(--s7)}
#login .form{width:100%;max-width:390px}
#login .form h2{font:var(--t-display);letter-spacing:var(--tr-display);margin-bottom:var(--s2)}
#login .form .lead{color:var(--dim);margin-bottom:var(--s6);font:var(--t-body)}
.field{margin-bottom:var(--s4)}
.field label{display:block;font:var(--t-note);color:var(--faint);margin-bottom:var(--s2)}
/* Only the properties that actually change. The shorthand here was `transition:.2s var(--ease)`,
   which is transition:all — it put border-color, box-shadow, background and every future property
   on the compositor's critical path. */
.field input{width:100%;background:var(--panel);border:1px solid var(--line-ctl);
  border-radius:var(--r-control);padding:var(--s3) var(--s4);color:var(--ink);font:var(--t-body);
  transition:border-color var(--d1) var(--ease-flat)}
.field input:focus{outline:2px solid var(--blue);outline-offset:-2px;border-color:var(--blue)}
.field .rowlab{display:flex;justify-content:space-between;align-items:center}
.field .rowlab a{font:var(--t-note);color:var(--aqua)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:var(--s3) var(--s5);border-radius:var(--r-control);font:var(--t-body);font-weight:600;
  transition:transform var(--d1) var(--ease),border-color var(--d1) var(--ease-flat),
             color var(--d1) var(--ease-flat);width:100%}
/* Flat aqua. The gradient went, and so did the hover box-shadow: a shadow cannot be animated on
   the compositor, and it was in the transition list of a control an investor presses to sign in. */
.btn.p{background:var(--aqua);color:#06101a}
.btn.p:hover{transform:translateY(-1px)}
.btn.g{background:var(--panel);border:1px solid var(--line2);color:var(--ink);margin-top:var(--s3)}
.btn.g:hover{border-color:var(--aqua)}
#login .err{color:var(--red-ink);font:var(--t-note);margin:-6px 0 var(--s3);min-height:16px}
#login .demo{margin-top:var(--s5);padding:var(--s3) var(--s4);border:1px dashed var(--line2);
  border-radius:var(--r-control);color:var(--dim);font:var(--t-note);background:rgba(56,214,200,.04)}
#login .demo b{color:var(--aqua)}
#login .legal{margin-top:var(--s6);font:var(--t-note);color:var(--faint)}
/* ---------- APP SHELL ---------- */
#app{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
.side{background:var(--bg2);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:var(--s5) var(--s4)}
.side .brand{display:flex;align-items:center;gap:var(--s3);font:var(--t-heading);
  letter-spacing:var(--tr-heading);padding:var(--s2) var(--s2) var(--s5)}
.side .brand img{width:26px;height:26px}
/* Twelve navigation items above the investor's name and the Sign out control comes to a shade
   more than a 1366x768 laptop has to give, and with nothing set to scroll the footer was cut off
   with no way to reach it — the investor could not sign out. The list is the part that gives:
   min-height:0 lets this flex child shrink below its content, so the footer stays pinned to the
   bottom and the navigation scrolls behind it instead. */
.side nav{display:flex;flex-direction:column;gap:3px;flex:1;min-height:0;overflow-y:auto}
.side .foot{flex:none}
.side .navi{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);text-align:left;
  border-radius:var(--r-control);color:var(--dim);font:var(--t-body);cursor:pointer;position:relative;
  transition:background-color var(--d1) var(--ease-flat),color var(--d1) var(--ease-flat)}
.side .navi svg{width:19px;height:19px;flex:none}
.side .navi svg *{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.side .navi:hover{background:var(--panel);color:var(--ink)}
.side .navi.on{background:var(--panel);color:var(--ink)}
/* A 3px marker in flat aqua. It was --grad, and three colour stops across three pixels is a
   gradient nobody can read as one — the console made the same correction to its own .navi.on. */
.side .navi.on:before{content:"";position:absolute;left:-16px;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:var(--aqua)}
.side .navi .kb{margin-left:auto;font:var(--t-mono);letter-spacing:var(--tr-mono);color:var(--faint);
  border:1px solid var(--line2);border-radius:var(--r-mark);padding:2px var(--s1)}
.side .foot{border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s2)}
.side .who{display:flex;align-items:center;gap:var(--s3);padding:var(--s2)}
/* A disc, so 50% is right; the fill is flat aqua rather than a three-stop gradient. It is the
   investor's own initials and it means one thing: whose account this is. */
.side .who .av{width:36px;height:36px;border-radius:50%;background:var(--aqua);color:#06101a;
  font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.side .who .nm{font:var(--t-body);font-weight:600;line-height:1.2}
.side .who .em{font:var(--t-note);color:var(--faint)}
.side .logout{display:flex;align-items:center;gap:var(--s2);padding:var(--s3);
  border-radius:var(--r-control);color:var(--dim);font:var(--t-body);margin-top:var(--s2);
  cursor:pointer;transition:background-color var(--d1) var(--ease-flat),color var(--d1) var(--ease-flat)}
.side .logout:hover{background:var(--panel);color:var(--red-ink)}
.side .logout svg{width:17px;height:17px}.side .logout svg *{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:820px){#app{grid-template-columns:1fr}.side{position:fixed;z-index:80;width:var(--sb);transform:translateX(-100%);transition:transform var(--d3) var(--ease)}.side.open{transform:none}.mobtop{display:flex!important}
  /* The 520px floor that used to sit here is gone. It forced every table to be wider than the
     screen and then relied on the card scrolling to hide the fact, which is how the distributions
     Amount column ended up permanently off-stage. Tables now size to their contents; `main table`
     at line 220 states the same thing for anything inside the app shell. */
  .wrap{padding:var(--s5)}.card{overflow-x:auto}.grid2,.holds{grid-template-columns:1fr}}
/* The blur is static and never animated; only opacity is in the transition list. */
#sideBackdrop{position:fixed;inset:0;background:rgba(4,7,11,.62);z-index:75;opacity:0;
  pointer-events:none;transition:opacity var(--d3) var(--ease-flat);backdrop-filter:blur(2px)}
#sideBackdrop.on{opacity:1;pointer-events:auto}
/* main */
main{min-width:0}
.topbar{display:flex;align-items:center;gap:var(--s4);padding:var(--s5) var(--gutter);
  border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(8,11,16,.86);
  backdrop-filter:blur(16px);z-index:40}
.mobtop{display:none;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line2);border-radius:var(--r-control)}
.topbar .pg{font:var(--t-heading);letter-spacing:var(--tr-heading)}
.topbar .pg small{display:block;font:var(--t-note);color:var(--faint);margin-top:1px}
.human-help{font:var(--t-note);color:var(--faint);line-height:1.35}.human-help a,.human-banner a{color:var(--aqua);text-decoration:underline;text-underline-offset:2px}.top-help{margin-left:var(--s4)}
.topbar .sp{margin-left:auto}
.topbar .ic{width:40px;height:40px;border:1px solid var(--line2);border-radius:var(--r-control);
  display:flex;align-items:center;justify-content:center;color:var(--dim);position:relative;
  transition:color var(--d1) var(--ease-flat),border-color var(--d1) var(--ease-flat)}
.topbar .ic:hover{color:var(--ink);border-color:var(--line2)}
.topbar .ic svg{width:19px;height:19px}.topbar .ic svg *{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* The one mark on this bar that carries information: there is something unread. */
.topbar .ic .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 2px var(--bg)}
.wrap{padding:var(--gutter) var(--gutter) var(--s8);max-width:1240px}
/* view transitions */
.view{display:none;animation:fade var(--d4) var(--ease) backwards}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* banners
 *
 * The ground was an aqua-to-violet gradient across a 40px-tall box, and in this system aqua means
 * the limited-partner side and violet means the sponsor — so the banner was quietly asserting a
 * relationship between the two on notices about statements and structure. Flat panel colour, and
 * the border is what separates it from the page.
 */
.banner{display:flex;gap:var(--s3);align-items:flex-start;background:var(--panel2);
  border:1px solid var(--line2);border-radius:var(--r-card);
  padding:var(--s4) var(--s5);margin-bottom:var(--s6)}
.banner .bi{width:40px;height:40px;border-radius:var(--r-control);background:rgba(56,214,200,.12);
  color:var(--aqua);display:flex;align-items:center;justify-content:center;flex:none}
.banner .bi svg{width:20px;height:20px}
.banner .bi svg *{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.banner .bt{font:var(--t-body);color:var(--dim)}.banner .bt b{color:var(--ink)}
.banner .bx{margin-left:auto;color:var(--faint);cursor:pointer;font-size:18px;padding:var(--s1)}
/* the readout
 *
 * This replaces .stats / .stat, which was the console's .kpi under another name: three or four
 * bordered rectangles carrying one number each, at the top of the screen, above the content. The
 * border separated nothing — the label sat directly above its own figure in every one of them —
 * and at 390 each became a full-width block, so the investor scrolled past four boxes before
 * reaching a fact. Typography carries the hierarchy.
 *
 * The class names, the markup and the step-downs are the console's exactly. Two readouts with two
 * sets of class names would be the same defect as two money formatters; a member of staff who
 * signs in as an investor should be looking at the same object.
 */
.readout{margin-bottom:var(--s6)}
.readout:last-child{margin-bottom:0}
.roFigs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);padding-bottom:var(--s5);
  border-bottom:1px solid var(--line)}
/* One lead figure takes the width; two and three share the same three tracks, so a figure sits in
   the same place whichever view the investor is on. */
.roFigs.n1{grid-template-columns:1fr}
.roFigs.n3{grid-template-columns:repeat(3,1fr)}
.roL{font:var(--t-eyebrow);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--faint)}
.roV{font:var(--t-display);letter-spacing:var(--tr-display);font-feature-settings:"tnum";
  margin-top:var(--s2);white-space:nowrap}
.roS{font:var(--t-note);color:var(--dim);margin-top:var(--s1)}
.roList{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s6)}
.roRow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:var(--s2) 0;border-bottom:1px solid var(--line);min-width:0}
.roK{font:var(--t-note);color:var(--dim);min-width:0;flex:1 1 auto}
.roNum{display:flex;align-items:baseline;gap:var(--s2);white-space:nowrap}
.roN{font:var(--t-figure);letter-spacing:var(--tr-figure);font-feature-settings:"tnum"}
.roQ{font:var(--t-mono);letter-spacing:var(--tr-mono);color:var(--faint)}
@media(max-width:900px){
  .roFigs{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5)}
  .roFigs>*:nth-child(3){grid-column:1/-1}
}
@media(max-width:640px){
  .roFigs{grid-template-columns:1fr;gap:var(--s4);padding-bottom:var(--s4)}
  .roFigs>*:nth-child(3){grid-column:auto}
  .roFigs>*+*{border-top:1px solid var(--line);padding-top:var(--s4)}
  .roList{grid-template-columns:1fr}
  /* The key takes the line and the figure sits under it — one column is not enough for a phrase
     and a figure side by side. row-gap:0 because the row's `gap` is a flex gap and applies between
     wrapped lines too, which pushed the figure twelve pixels clear of its own label and left the
     pair reading as two entries rather than one. */
  .roRow{flex-wrap:wrap;row-gap:0}
  .roK{flex:1 1 100%}
  .roNum{margin-left:auto}
}
/* generic card */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s5) var(--gutter)}
.card + .card{margin-top:var(--s5)}
.card .ch{display:flex;align-items:center;margin-bottom:var(--s4)}
.card .ch h3{font:var(--t-subhead);letter-spacing:var(--tr-subhead)}
.card .ch .act{margin-left:auto;font:var(--t-body);color:var(--aqua);cursor:pointer}
.grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--s4);align-items:start}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}
/* tables */
table{width:100%;border-collapse:collapse}
th{text-align:left;font:var(--t-index);letter-spacing:var(--tr-index);text-transform:uppercase;
  color:var(--faint);padding:0 var(--s3) var(--s2);border-bottom:1px solid var(--line)}
th.r,td.r{text-align:right}
td{padding:var(--s3);border-bottom:1px solid var(--line);font:var(--t-body);vertical-align:middle}
tr:last-child td{border-bottom:0}
/* Only background-color, and only on a row-sized surface, which is what the system permits. */
tbody tr{transition:background-color var(--d1) var(--ease-flat)}
tbody tr:hover{background:var(--hover)}
/* A pill is a short label reporting a state. The 20px capsule was the last piece of consumer
   styling in the product; the console dropped it to --r-mark and this is the same mark. */
.pill{display:inline-flex;align-items:center;gap:var(--s1);font:var(--t-mono);
  letter-spacing:var(--tr-mono);padding:var(--s1) 7px;border-radius:var(--r-mark);white-space:nowrap}
.pill.ok{background:rgba(53,201,138,.13);color:var(--green)}
.pill.pend{background:rgba(230,178,58,.13);color:var(--amber)}
.pill.info{background:rgba(85,144,232,.14);color:var(--blue)}
.pdot{width:6px;height:6px;border-radius:50%;background:currentColor}
.propc{display:flex;align-items:center;gap:var(--s3)}
.propc img{width:46px;height:34px;border-radius:var(--r-mark);object-fit:cover;flex:none;border:1px solid var(--line)}
.propc .nm{font:var(--t-body);font-weight:600}
.propc .u{font:var(--t-note);color:var(--faint)}
.muted{color:var(--faint)}
/* holdings big cards */
.holds{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:900px){.holds{grid-template-columns:1fr}}
.hold{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.hold .top{height:132px;position:relative}
.hold .top img{width:100%;height:100%;object-fit:cover}
/* The one gradient in the portal that survives, and it is not decoration: it is what makes white
   caption type legible over an arbitrary photograph, whose brightness we do not control. The
   design document's one-pixel rule was written from a console that has no photographs in it; the
   exception is recorded there now rather than being taken quietly here. */
.hold .top .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,16,.92),rgba(6,10,16,.15) 60%,transparent)}
.hold .top .cap{position:absolute;left:0;bottom:0;padding:var(--s3) var(--s4)}
.hold .top .u{font:var(--t-eyebrow);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--aqua)}
.hold .top .nm{font:var(--t-heading);letter-spacing:var(--tr-heading)}
.hold .body{padding:var(--s4)}
.hold .kv{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.hold .kv .k{font:var(--t-note);color:var(--faint)}
.hold .kv .v{font:var(--t-figure);letter-spacing:var(--tr-figure);font-feature-settings:"tnum";margin-top:2px}
/* A share bar: one segment against a stated whole, and the scale line beneath it names both ends.
   The fill was --grad on a 6px bar, which implied a second variable that is not there, and a 4px
   radius on it was a rounded end-cap under the six-pixel floor. */
.hold .bar{height:6px;background:var(--line2);margin-top:var(--s4);overflow:hidden}
.hold .bar i{display:block;height:100%;background:var(--aqua)}
.hold .barl{display:flex;justify-content:space-between;font:var(--t-mono);
  letter-spacing:var(--tr-mono);color:var(--faint);margin-top:var(--s2)}
/* chart */
.chart{width:100%;height:190px}
/* Flat --blue. The fill was url(#pgv), a blue-to-violet gradient down every bar: a bar is one
   variable and the gradient implied a second one that does not exist. --violet keeps its meaning
   on the roll-up series, which genuinely is the sponsor side. */
.chart .bar{fill:var(--blue);transition:opacity var(--d2) var(--ease-flat)}
.chart .bar:hover{opacity:.82}
.chart .bar.roc{fill:var(--violet)}
.chart .axl{fill:var(--faint);font-size:10.5px}
.chart .gl{stroke:var(--line);stroke-width:1}
.clegend{display:flex;gap:var(--s4);justify-content:flex-end;margin-top:var(--s2);
  font:var(--t-mono);letter-spacing:var(--tr-mono);color:var(--faint)}
.clegend span{display:flex;align-items:center;gap:var(--s2)}
.clegend i{width:10px;height:10px;border-radius:var(--r-mark);display:inline-block}
/* doc rows */
.doc{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border:1px solid var(--line);
  border-radius:var(--r-control);margin-bottom:var(--s2);
  transition:border-color var(--d1) var(--ease-flat),background-color var(--d1) var(--ease-flat)}
.doc:hover{border-color:var(--line2);background:var(--hover)}
.doc .fi{width:40px;height:40px;border-radius:var(--r-control);background:var(--bg2);display:flex;
  align-items:center;justify-content:center;flex:none;font:var(--t-mono);
  letter-spacing:var(--tr-mono);color:var(--aqua)}
.doc .nm{font:var(--t-body);font-weight:600}
.doc .mt{font:var(--t-note);color:var(--faint)}
.doc .dl{margin-left:auto;color:var(--dim);border:1px solid var(--line2);
  border-radius:var(--r-control);padding:var(--s2) var(--s3);font:var(--t-body);display:flex;
  gap:var(--s2);align-items:center;
  transition:color var(--d1) var(--ease-flat),border-color var(--d1) var(--ease-flat)}
.doc .dl:hover{color:var(--ink);border-color:var(--aqua)}
.doc .dl svg{width:15px;height:15px}.doc .dl svg *{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* profile */
.prow{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;
  border-bottom:1px solid var(--line);font:var(--t-body)}
.prow:last-child{border-bottom:0}
.prow .k{color:var(--faint);font:var(--t-note)}
.prow .v{font-weight:500}
/* notifications */
#notif{position:absolute;top:70px;right:var(--gutter);width:340px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:var(--r-card);box-shadow:0 24px 60px rgba(0,0,0,.5);
  z-index:50;overflow:hidden}
#notif .nh{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);
  font:var(--t-subhead);letter-spacing:var(--tr-subhead);display:flex}
#notif .nh .clr{margin-left:auto;font:var(--t-note);color:var(--aqua);cursor:pointer}
#notif .ni{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);display:flex;gap:var(--s3)}
#notif .ni:last-child{border-bottom:0}
#notif .ni .nd{width:8px;height:8px;border-radius:50%;background:var(--aqua);margin-top:6px;flex:none}
#notif .ni.read .nd{background:var(--line2)}
#notif .ni .nt{font:var(--t-body)}
/* The body of a notification, under its title. Dimmer than the title and not a colour of its own. */
#notif .ni .nt.dim{color:var(--dim)}
.ni .ntime{font:var(--t-note);color:var(--faint);margin-top:3px}
/* debug */
#dbg{position:fixed;right:0;bottom:0;width:380px;max-width:92vw;height:300px;background:#05080c;
  border:1px solid var(--line2);border-radius:var(--r-card) 0 0 0;z-index:200;display:none;
  flex-direction:column;font:var(--t-index);letter-spacing:0}
#dbg.on{display:flex}
#dbg .dh{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);color:var(--dim)}
#dbg .dh b{color:var(--aqua)}#dbg .dh .r{margin-left:auto;display:flex;gap:var(--s2)}
#dbg .dh button{color:var(--faint);font:var(--t-mono);letter-spacing:var(--tr-mono)}
#dbg .dh button:hover{color:var(--ink)}
#dbg .dl{flex:1;overflow:auto;padding:var(--s2) var(--s3)}
#dbg .le{padding:2px 0;border-bottom:1px solid rgba(255,255,255,.03);white-space:pre-wrap;word-break:break-word}
#dbg .le .tg{color:var(--aqua)}.le.ui .tg{color:var(--blue)}.le.nav .tg{color:var(--violet)}.le.sys .tg{color:var(--amber)}
/* The shadow is static and never animated, and it floats over content that has to stay readable —
   the one place in this product where a shadow earns its keep. Only transform and opacity are in
   the transition list; the shorthand it replaces put every property there, including the shadow. */
.toast{position:fixed;bottom:var(--gutter);left:50%;transform:translate3d(-50%,20px,0);
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-control);
  padding:var(--s3) var(--s5);font:var(--t-body);z-index:150;opacity:0;
  transition:opacity var(--d3) var(--ease-flat),transform var(--d3) var(--ease);
  display:flex;gap:var(--s2);align-items:center;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translate3d(-50%,0,0)}
.toast svg{width:18px;height:18px}.toast svg *{stroke:var(--green);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
kbd{font:var(--t-index);letter-spacing:var(--tr-index);background:var(--panel);
  border:1px solid var(--line2);border-radius:var(--r-mark);padding:1px var(--s1)}
/* responsive overrides — kept at end so they win by source order */
@media(max-width:820px){
  main .wrap{padding:var(--s4);overflow-x:clip}
  .grid2,.holds{grid-template-columns:1fr}
  .card{overflow-x:auto}
  .topbar{padding:var(--s3) var(--s4)}
}

/* ----------------------------------------------------------------------------
   Handset corrections. Everything below is additive and gated behind a
   max-width query, so the desktop layout is untouched. Each rule exists
   because something was measurably broken on a phone, not because it could
   look different.
   ---------------------------------------------------------------------------- */

@media(max-width:820px){
  /* Tables sized to their contents rather than to a fixed floor.
     A blanket min-width of 480px pushed the last column of every table off
     the right of a 390px screen: on Distributions that meant the investor
     saw twenty-six rows of dates and payment types with the Amount column
     entirely out of view, and nothing on screen to say it was there. Sized
     to content, the three-column tables now fit outright and only the wider
     ones scroll, by the small amount they genuinely need. */
  main table{min-width:0}
  th,td{padding-left:10px;padding-right:10px}
  /* Currency, percentages and dates must never break across lines — a figure
     split over two rows reads as two figures. Letting them stay whole is also
     what makes the content-sized columns above come out at a sensible width. */
  main th.r,main td.r,main td.mono{white-space:nowrap}
  /* When a table does still exceed the card, the first column stays put so a
     scrolled row keeps the property name that identifies it. */
  main td:first-child,main th:first-child{position:sticky;left:0;background:var(--panel);z-index:1}

  /* Tell the investor the card scrolls. The right-hand shadow is painted at
     the box (scroll) and immediately covered by a panel-coloured layer painted
     with the content (local), so it shows only while there is more to the
     right and disappears at the end of the scroll — and never appears at all
     on the cards that do not overflow. */
  main .card{
    background-image:
      linear-gradient(to left,var(--panel),var(--panel-0)),
      radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.45),rgba(0,0,0,0));
    background-position:right center,right center;
    background-size:36px 100%,14px 100%;
    background-repeat:no-repeat;
    background-attachment:local,scroll;
    overscroll-behavior-x:contain;
  }

  /* Touch targets. 40px and 38px boxes are comfortably missable with a thumb;
     44px is the figure both platform guidelines settle on. */
  /* flex:none matters as much as the size here: both sit in the topbar's flex
     row and were being shrunk to 43px by a long page title. */
  .mobtop{width:44px;height:44px;flex:none}
  .topbar .ic{width:44px;height:44px;flex:none}
  .doc .dl{min-height:44px}
  .chip{min-height:44px}
  /* Negative margin so the extra hit area does not shift the link, which is
     optically aligned with the field label opposite it. */
  .field .rowlab a{min-height:44px;display:inline-flex;align-items:center;
    padding:0 6px;margin:0 -6px}
  #login .brandside .logo{display:inline-flex;min-height:44px}
  /* The accreditation declaration is a regulatory attestation; a 16px box is
     not a fair target for it. The surrounding label is already the hit area,
     so this is about the control being visible as well as hittable. */
  .ck input{width:22px;height:22px;min-width:22px;margin-top:1px}

  /* iOS Safari zooms the page whenever a focused control renders below 16px,
     which shunts the layout sideways mid-typing. Sizing the controls at 16px
     is the only reliable way to stop it without disabling pinch-zoom.
     The !important is unwelcome but unavoidable: several of these controls
     carry an inline font:inherit that a stylesheet cannot otherwise beat, and
     adding to the inline surface is exactly what we are not permitted to do. */
  input,textarea,select,.field input,.askrow input{font-size:16px}
  main textarea,main select,main input{font-size:16px!important}

  /* The drawer was a trap: once open, the hamburger sat underneath it and
     tapping the page did nothing, so on a handset — which has no Escape key —
     there was no way back. The scrim gives it one. Scrolling the drawer keeps
     Sign out reachable on a short screen, and under the demonstration bar.

     visibility:hidden is doing load-bearing work here, not decoration. Making the closed drawer a
     scrollable container puts it in the tab order — Chromium gives keyboard focus to any scroller
     whose content overflows — so the first Tab on a phone landed on a 264px panel parked entirely
     off the left edge. Parking something off-screen with transform alone does not remove it from
     the tab order; taking it out of the visibility tree does. The transition is listed so the
     drawer still animates out rather than vanishing mid-slide. */
  .side{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    visibility:hidden;transition:transform var(--d3) var(--ease),visibility var(--d3) var(--ease)}
  .side.open{visibility:visible}
  body.hasDemoBar .side{padding-bottom:76px}
  /* Sign out came out at 42px — the one destructive action in the drawer and
     the one worth being deliberate about hitting. */
  .side .logout{min-height:44px}

  /* Anchored 34px from the right and 340px wide, the notification panel hung
     14px off the left edge of a 360px screen and clipped its own heading. It
     was also positioned against the document, so after any scroll it opened
     off-screen above the fold. Pinned to the viewport and inset from both
     edges it stays whole and stays where the bell is. */
  #notif{position:fixed;top:84px;left:12px;right:12px;width:auto;
    max-height:calc(100dvh - 104px);overflow-y:auto;overscroll-behavior:contain}

  /* Labels that name a figure are content, not furniture, and were sitting at
     10.5–11.5px. Table headings stay at 11.5px by exception: they are set in
     tracked small caps, they repeat down the page, and enlarging them widens
     every column and puts the tables back into horizontal scroll. */
  .chart .axl{font-size:12px}
  .clegend{font-size:12px}
  .doc .fi{font-size:12px}
  .propc .u{font-size:12px}
  .hold .top .u{font-size:12px}
  .hold .kv .k,.hold .barl{font-size:12px}
  .side .who .em{font-size:12px}
  #notif .ni .ntime{font-size:12px}
  .pill{font-size:12px}
  /* The readout's caveat line is a Mono-role mark reporting a fact, so it takes the same step. */
  .roQ{font-size:12px}
}

@media(max-width:560px){
  /* The readout already gives every lead figure the full width below 640, which is what stopped a
     seven-figure capital balance being silently clipped by the wrap's overflow-x:clip back when
     these were two columns of boxes. Nothing further is needed here.
     The property thumbnail is decoration; the name and university beside it
     are the data. Dropping it returns roughly 58px to the positions table,
     which is most of the difference between fitting and scrolling. */
  .propc img{display:none}
  /* Reclaimed for the tables, which are the tightest thing on these views. */
  main .wrap{padding:14px}
  .card{padding:var(--s5) var(--s4)}
  /* On the positions table the headings, not the figures, were setting the
     column widths: "CONTRIBUTED" in tracked small caps is half again as wide
     as "$250,000". Tightening the tracking and dropping half a point off the
     heading returns that width to the first column, which is what buys the
     property name below a single line. Same exception as the 11.5px headings
     above: this is repeated furniture, not the figures being read. */
  th{font-size:11px;letter-spacing:.02em}
  /* The name identifies the row. Broken over two lines beside a column of
     currency it stops scanning as a table. The university beneath it may
     wrap — that is context rather than the identifier. */
  .propc .nm{white-space:nowrap}
  /* Document rows squeezed the title into about 135px between the badge and
     the action, wrapping "Capital Statement — Q2 2026" over three lines. The
     action drops to its own full-width row: the title gets its space back and
     the primary action becomes a comfortable, one-handed target. */
  .doc{flex-wrap:wrap}
  .doc>div:not(.fi){flex:1 1 auto;min-width:0}
  .doc .dl{flex:1 0 100%;margin-left:0;justify-content:center}
  .doc .pill{margin-left:auto}
}

@media(max-width:880px){
  /* The intent one line up in this file was to hide the brand panel below
     880px, but the rule that follows it re-declares display:flex at equal
     specificity and wins on source order, so the panel has been showing all
     along — a phone user scrolls a full screen of marketing before reaching
     the sign-in form. Rather than hide the panel outright and leave a bare,
     unbranded credential form, it collapses to the logo lockup alone: the
     form comes up immediately and the investor can still see whose portal
     they are handing a password to. */
  /* Two equal grid rows gave the collapsed brand band half the screen, most of
     it empty. Sized to its contents, the form starts immediately below it. */
  #login{grid-template-rows:auto 1fr}
  #login .brandside{padding:var(--s5) var(--s4);min-height:0;display:block;
    border-right:0;border-bottom:1px solid var(--line)}
  #login .hl,#login .sub,#login .feats{display:none}
  #login .formside{padding:var(--s6) var(--s4) var(--s7)}
}

/* A phone held sideways.
   
   The block above is gated on max-width:820px, which is the right threshold for the sidebar
   becoming a drawer but the wrong one for everything else: an iPhone in landscape is 844px wide,
   so it fell through and lost every touch-target and type fix along with it. Height is what
   actually distinguishes the case. A tablet in landscape is 768px tall; a phone is under 430.
   
   The notification panel was the functional break rather than a matter of comfort. Outside the
   820px block it reverted to position:absolute with no height cap, so a list of twenty rendered
   2379px tall inside a 390px viewport with no way to scroll it — seventeen of them unreachable. */
@media(max-height:500px) and (orientation:landscape){
  #notif{position:fixed;top:72px;left:12px;right:12px;width:auto;
    max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain}
  /* Same 16px floor as portrait: iOS zooms the page on focus below it either way round. */
  input,textarea,select,.field input,.askrow input{font-size:16px}
  main textarea,main select,main input{font-size:16px!important}
  /* And the same thumb-sized targets. */
  .mobtop,.topbar .ic{width:44px;height:44px;flex:none}
  .doc .dl,.chip,.side .logout{min-height:44px}
  .ck input{width:22px;height:22px;min-width:22px;margin-top:1px}
  .field .rowlab a{min-height:44px;display:inline-flex;align-items:center;padding:0 6px;margin:0 -6px}
  /* The sidebar is full height here and there is very little of it; let it scroll rather than
     stranding Sign out below the fold. */
  .side{overflow-y:auto}
}

/* ============================================================ the reduced-motion contract
 *
 * The portal had no prefers-reduced-motion block at all — not a weak one, none — while running an
 * entry animation on every view change, a 264px sliding drawer, a fading scrim, a rising toast and
 * an infinite spinner. The operations console has carried this contract since the system was
 * written; this is the same block, and it is one block rather than two so there is one place to
 * check.
 *
 * Every animation resolves to none, every transition to 0.01ms rather than 0 — a real duration, so
 * transitionend still fires and nothing that waits on it stalls — and hover transforms resolve to
 * none. Nothing in this product exists only as an animation: if an element's meaning depended on
 * having been seen to move, it would be wrong for everyone and not only for the people who asked
 * the movement to stop.
 *
 * scroll-behavior is included because html{scroll-behavior:smooth} at the top of this file is
 * motion too, and it is the one an investor meets on every anchor jump.
 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  /* The spinner is the exception the blanket cannot cover: reduced to 0.01ms it becomes a single
     instantaneous rotation and the investor is left looking at a static arc that means nothing.
     It stops turning and says what it is instead. */
  .spinner{animation:none;border-top-color:var(--line2)}
  /* A hover that lifts is a transform, and a transform is motion. */
  .btn.p:hover,.btn.g:hover{transform:none}
  /* The view fade sets opacity:0 in its first keyframe. With animation effectively removed the
     element must be at its resting state, not held at the start of one. */
  .view{animation:none}
}

/* ============================================================ what used to be style= attributes
 *
 * Forty-three of them across app.js. Every one beat every media query in this file, so the handset
 * corrections above could not reach the controls they were written for — which is why two of them
 * had to carry !important to force the 16px iOS floor onto a textarea whose padding and font were
 * set inline. Removing the inline surface removes the need for the weight, and it is the reason
 * the CSP still has to allow style-src 'unsafe-inline': Firefox implements neither
 * style-src-elem nor style-src-attr, so every inline style entrenches the one gap the hardening
 * work could not close. The two that remain are genuinely data — a bar's width and a chart's
 * height, both computed per render.
 */

/* The one line under a page title that says what the page is for. It sits tight to the title
   above it, which is why the negative top margin. */
.intro{margin:-6px 0 var(--s5);color:var(--faint);font:var(--t-body)}
/* Pushes whatever follows to the right of a flex row: a state pill, a total, a period. */
.sp{margin-left:auto}
/* The 4px grid, for the eleven hand-written margin-tops. 6 and 10 rounded to 8 and 12; 14 to 16. */
.mt2{margin-top:var(--s2)}
.mt3{margin-top:var(--s3)}
.mt4{margin-top:var(--s4)}
.mb4{margin-bottom:var(--s4)}
/* A qualifying line under a block: provenance, a caveat, an as-of date. */
.note{font:var(--t-note);color:var(--faint)}
/* An empty state inside a panel that has a frame of its own already. */
.centre{text-align:center;padding:var(--s5) 0}
.pad5{padding:var(--s5) 0}

/* Controls that were styled inline, which is why they could not be reached by the iOS 16px rule.
   Same material as .field input, which they should always have shared. */
.inp,.ta{width:100%;background:var(--panel2);border:1px solid var(--line-ctl);
  border-radius:var(--r-control);padding:var(--s3);color:var(--ink);font:var(--t-body);
  transition:border-color var(--d1) var(--ease-flat)}
.inp:focus,.ta:focus{outline:2px solid var(--blue);outline-offset:-2px;border-color:var(--blue)}
.ta{min-height:90px;resize:vertical}
.ta.short{min-height:80px}

/* The reply row inside a support thread. */
.replyrow{display:flex;gap:var(--s2);margin-top:var(--s3)}
.replyrow .inp{flex:1}
.replyrow .btn{width:auto;flex:0 0 auto;padding:var(--s2) var(--s4)}
.threadhead{display:flex;align-items:center;margin-bottom:var(--s3)}
.threadhead b{font:var(--t-subhead);letter-spacing:var(--tr-subhead)}

/* Recent activity. The dot is not decoration: it is the one mark saying this is a discrete event
   in a list of them, and it was filled with the three-stop --grad. */
.actLine{display:flex;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line);
  align-items:center}
.actLine:last-child{border-bottom:0}
.actDot{width:8px;height:8px;border-radius:50%;background:var(--aqua);flex:none}
.actWhat{flex:1;font:var(--t-body)}
.actWhen{font:var(--t-note);color:var(--faint);white-space:nowrap}

/* The chart legend's two swatches. Two series on a shared scale, and the colours are the system's:
   --blue is the operating series, --violet is return of capital, which is the sponsor-side event.
   The first was a blue-to-violet gradient, which made the swatch look like a third series. */
.clegend i.op{background:var(--blue)}
.clegend i.roc{background:var(--violet)}

/* A figure the portal does not have. Same job as the console's .nodata: never a zero, never a bare
   dash among figures, and it says in words that the value is not known. */
.nofig{font:var(--t-note);font-style:italic;color:var(--faint)}

/* ---------- guided investor onboarding ---------- */
.human-banner{background:rgba(56,214,200,.08);border:1px solid rgba(56,214,200,.32);border-radius:var(--r-card);padding:var(--s3) var(--s4);margin-bottom:var(--s5);color:var(--dim)}
.human-banner strong{color:var(--ink)}
.on-layout{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,680px);gap:var(--s5);align-items:start}
.on-progress{position:sticky;top:92px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s5)}
.on-progress-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3)}.on-progress-head h2{font:var(--t-heading);margin-top:var(--s2)}.on-progress-head>strong{font:var(--t-figure);color:var(--aqua)}
.eyebrow{display:block;font:var(--t-eyebrow);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--aqua)}
.on-progress-bar{height:8px;border-radius:var(--r-mark);background:var(--line);margin:var(--s4) 0;overflow:hidden}.on-progress-bar i{display:block;height:100%;background:var(--aqua)}
.on-steps{display:flex;flex-direction:column;gap:var(--s1)}.on-step{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;padding:var(--s3);border-radius:var(--r-control);color:var(--dim)}.on-step:hover,.on-step:focus-visible{background:var(--panel2);color:var(--ink)}.on-step.current{background:rgba(85,144,232,.12);color:var(--ink)}.on-step.done{color:var(--green);cursor:pointer}.on-step-mark{display:grid;place-items:center;width:24px;height:24px;border:1px solid currentColor;border-radius:50%;font-weight:700;flex:none}.on-step b,.on-step small{display:block}.on-step b{font:var(--t-body);font-weight:600}.on-step small{font:var(--t-note);color:var(--faint);margin-top:2px}.on-progress>.note{display:block;margin-top:var(--s4)}
.on-card{padding:var(--s6)}.on-card h1{font:var(--t-display);margin-top:var(--s2)}.on-reason{color:var(--dim);font-size:16px;line-height:1.5;max-width:58ch;margin:var(--s3) 0 var(--s6)}.on-form{max-width:600px}.on-readout{display:grid;gap:var(--s3);background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-control);padding:var(--s4);margin-bottom:var(--s4)}.on-readout span{display:block;color:var(--faint);font:var(--t-note);margin-bottom:var(--s1)}.on-readout strong{display:block;color:var(--ink);font-size:16px;overflow-wrap:anywhere}.on-next{color:var(--dim);font:var(--t-note);margin:var(--s4) 0}.on-choice{display:grid;gap:var(--s3);margin:var(--s4) 0}.on-choice label{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3);border:1px solid var(--line2);border-radius:var(--r-control);color:var(--dim);cursor:pointer}.on-choice input{width:20px;height:20px;flex:none;accent-color:var(--blue);margin:0}.safety-box{border-left:4px solid var(--amber);background:rgba(230,178,58,.09);padding:var(--s4);color:var(--dim);margin-bottom:var(--s4)}.safety-box strong{display:block;color:var(--ink);font-size:16px}.safety-box p{margin:var(--s2) 0}.safety-box a{color:var(--aqua);text-decoration:underline}.empty-adviser{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-control);padding:var(--s4);color:var(--dim)}.empty-adviser strong{color:var(--ink)}.on-after{border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s6)}.on-complete{text-align:center;max-width:520px;margin:var(--s7) auto}.on-check{display:grid;place-items:center;width:56px;height:56px;margin:0 auto var(--s4);border-radius:50%;background:rgba(53,201,138,.15);border:1px solid rgba(53,201,138,.45);color:var(--green);font-size:28px}.on-complete h2{font:var(--t-display);margin-top:var(--s2)}.on-complete p{color:var(--dim);font-size:16px;line-height:1.55;margin:var(--s4) auto var(--s6)}.on-home-card{display:flex;align-items:center;gap:var(--s5);justify-content:space-between;background:var(--panel2);border:1px solid rgba(85,144,232,.5);border-radius:var(--r-card);padding:var(--s5);margin:var(--s5) 0}.on-home-card h2{font:var(--t-heading);margin-top:var(--s2)}.on-home-card p{color:var(--dim);margin:var(--s2) 0 0;max-width:64ch}.on-home-card .btn{width:auto;min-width:150px;flex:none}
@media(max-width:820px){.top-help{font-size:11px;max-width:175px;margin-left:auto}.topbar .sp{display:none}.on-layout{grid-template-columns:1fr}.on-progress{position:static}.on-card{padding:var(--s5)}.on-home-card{align-items:flex-start;flex-direction:column}.on-home-card .btn{width:100%}}
@media(max-width:560px){#login .human-help{font-size:12px}.on-card{padding:var(--s4)}.on-reason,.on-complete p{font-size:15px}.on-progress{padding:var(--s4)}.human-banner{font-size:13px}}