/* THE BASE SIZE, STATED HERE AND NOWHERE ELSE.
   membermenu.css declared font-size:15px and line-height:1.5 on .pm, and only
   program pages load it — so on the themed site the panel inherited whatever
   body was set to instead. Every row with an explicit px size survived that;
   everything without one did not, and the panel read a different size depending
   on the page. It is declared here, where all three surfaces see it. */
.pm{position:relative;flex:0 0 auto;font-size:15px;line-height:1.5}
.pm-join{display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-size:14px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--n400);background:#fff;color:var(--text);cursor:pointer;white-space:nowrap;transition:background .14s,border-color .14s}
.pm-join:hover{background:var(--g100);border-color:var(--g300);color:var(--g800)}
/* ONE SET OF MEASUREMENTS, not one per surface. membermenu.css used to reset the
   avatar to 34px/13px and the panel to 358px/18px for the program pages, so the
   same menu was a different size depending which screen a member opened it on.
   Those overrides are gone and these values are the only ones.
   padding:0 + border-box matter: outside the themed site a <button> keeps the
   browser's own padding and content-box sizing, which pushed the initials off
   centre and swelled the circle. Declared here, the circle and its glyphs sit
   identically on every surface. */
.pm-avatar{width:34px;height:34px;padding:0;box-sizing:border-box;border-radius:50%;border:2px solid #fff;cursor:pointer;font-family:var(--fh);font-size:13px;letter-spacing:0;line-height:1;text-align:center;
  color:#fff;background:linear-gradient(135deg,hsl(var(--h) 42% 46%),hsl(var(--h) 46% 30%));box-shadow:0 0 0 1px var(--n300),var(--sm);
  display:grid;place-items:center;transition:box-shadow .14s}
.pm-avatar:hover{box-shadow:0 0 0 3px var(--g200),var(--md)}
.pm[data-open] .pm-avatar{box-shadow:0 0 0 3px var(--g300),var(--md)}
.pm-panel{position:absolute;right:0;top:calc(100% + 11px);width:304px;min-width:0;max-width:calc(100vw - 28px);z-index:200;
  background:#fff;border:1px solid var(--div);border-radius:18px;box-shadow:0 22px 60px rgba(14,33,42,.22);padding:18px;
  animation:pmIn .16s cubic-bezier(.2,.9,.3,1)}
@keyframes pmIn{from{opacity:0;transform:translateY(-7px) scale(.98)}to{opacity:1;transform:none}}
.pm-panel::before{content:"";position:absolute;top:-7px;right:22px;width:13px;height:13px;background:#fff;border-left:1px solid var(--div);border-top:1px solid var(--div);transform:rotate(45deg)}
.pm-form h4{font-family:var(--fh);font-weight:400;font-size:19px;margin:0 0 6px}
.pm-form p{font-size:13.5px;color:var(--n700);margin:0 0 14px;line-height:1.5}
.pm-form label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--n600);margin-bottom:5px}
.pm-form input{width:100%;font:inherit;font-size:15px;padding:11px 14px;border:1px solid var(--n400);border-radius:11px;background:#fff;margin-bottom:12px;min-width:0}
.pm-form input:focus-visible{outline:2px solid var(--g500);outline-offset:1px;border-color:var(--g500)}
#pmCode{letter-spacing:.42em;font-size:20px;text-align:center;font-family:var(--fh);padding:13px}
.pm-go{width:100%;font-family:var(--fh);font-size:15px;padding:12px;border:0;border-radius:999px;background:var(--g600);color:#fff;cursor:pointer}
.pm-go:hover{background:var(--g700)}
.pm-go[disabled]{opacity:.55;pointer-events:none}
.pm-back,.pm-resend{width:100%;margin-top:8px;background:none;border:0;font-size:13px;color:var(--n700);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pm-resend{margin-top:4px;color:var(--g700)}
.pm-resend[disabled]{opacity:.55;cursor:default;text-decoration:none}
.pm-note{display:block;margin-top:11px;font-size:12px;color:var(--n600);line-height:1.45}
.pm-err{margin-top:11px;background:#fdecea;border:1px solid #f2b8b1;color:#8c2b21;border-radius:10px;padding:9px 12px;font-size:13px}
.pm-who{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--div);margin-bottom:12px}
.pm-who > div{min-width:0}
/* The plan, under the email, where it belongs: it is part of who you are signed
   in as. Styled as a small button now, and it goes to /profile?t=billing — their
   own plan page — because the question a member has when they read their plan
   name is what it costs and when it ends. */
.pm-planline{display:inline-block;margin-top:6px;padding:4px 12px;border-radius:999px;border:1px solid var(--g400);
  background:var(--g100);font-size:12px;font-weight:700;color:var(--g800);text-decoration:none;line-height:1.35;
  transition:background .14s,border-color .14s}
.pm-planline.free{border-color:var(--n400);background:var(--n100);color:var(--n800)}
.pm-trial{font-weight:600;opacity:.88}
.pm-planwarn{display:block;margin-top:3px;font-size:12px;color:var(--a900);text-decoration:none}
/* THE HOVER IS SCOPED, and it has to be. membermenu.css — which only a program
   page loads — carries ".pm .pm-panel a, .pm .pm-panel a:hover{text-decoration:
   none}" to keep a program's own link styling out of the panel. At 0-3-0 that
   beats a bare .pm-planline:hover at 0-2-0, so the underline appeared in the site
   header and nowhere else: the very split this release exists to close. Matching
   the reset's specificity is what makes the two surfaces agree. */
.pm .pm-panel .pm-planline:hover{background:var(--g200);border-color:var(--g500);color:var(--g900);text-decoration:none}
.pm .pm-panel .pm-planwarn:hover{text-decoration:underline;text-underline-offset:3px}
/* Size and colour come from .mav and the inline size now. This only holds the
   things particular to sitting in the panel's header row: a thin ring at a
   little distance, so the mark reads as a badge rather than a bare circle. */
.pm-av{flex:0 0 auto}
.pm-who .mav{outline:1.5px solid var(--g300);outline-offset:3px;margin:5px 4px 5px 3px}
.pm-who strong{display:block;font-size:15px}
/* SCOPED TO THE TEXT BLOCK, and it has to be.
   Member::avatarHtml() renders the avatar as <span class="mav pm-av">, so a bare
   .pm-who span also matched the avatar itself — and at specificity 0-1-1 it
   outranks both .mav and .pm-av at 0-1-0, so its grey var(--n600) won. The
   initials in the panel came out grey while the header button, a <button> this
   selector never matches, stayed white. */
.pm-who > div > span{display:block;font-size:12.5px;color:var(--n600);word-break:break-all}
/* .pm-plan, the bordered panel that held the plan name, is gone with the markup
   that used it. The plan is a line under the email now — .pm-planline above. */
.pm-links{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.pm-links a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;font-size:14px;color:var(--text);text-decoration:none}
.pm-links a:hover{background:var(--g100);color:var(--g800)}
.pm-links svg{flex:0 0 auto;color:var(--n600)}
.pm-links a:hover svg{color:var(--g600)}
.pm-out{display:block;text-align:center;padding:10px;border-top:1px solid var(--div);margin-top:4px;font-size:13.5px;color:var(--n700);text-decoration:none;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;font:inherit;cursor:pointer}
.pm-out:hover{color:var(--text)}
@media (max-width:700px){
  .pm-panel{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;min-width:0;max-width:none;border-radius:18px}
  .pm-panel::before{display:none}
  .pm-join span{display:none}
  .pm-join{padding:9px 11px}
}

/* ---------- member avatar, photo or initials ---------- */
/* THE INITIALS WERE A DIFFERENT SIZE ON EVERY SCREEN, and off-centre with it.
 *
 * font-size was .42em — em resolves against the PARENT's font size, not the
 * avatar's, so the initials scaled with whatever text happened to surround them:
 * the site header, the profile page, DocketPDF's dark bar and DocketEvidence's
 * all inherit something different, and each drew a different size. Worse, .mav is
 * declared after .pm-av and at equal specificity, so it also overrode the panel
 * avatar's own 16px and shrank it to a few pixels.
 *
 * Member::avatarHtml() now writes the size in px inline, computed from the circle
 * it is drawing, so the ratio is fixed and nothing outside the element can change
 * it. line-height:1 with place-items:center is what puts it in the middle; the
 * font it is set in has tall caps and no descenders on initials, so anything
 * relying on the line box drifted downward.
 *
 * The background is the same gradient the header button uses, so the circle in
 * the panel and the circle in the bar are the same colour. */
.mav{display:inline-grid;place-items:center;border-radius:50%;overflow:hidden;flex:0 0 auto;box-sizing:border-box;padding:0;
  font-family:var(--fh);font-weight:400;line-height:1;color:#fff;letter-spacing:0;text-align:center;text-transform:uppercase;
  background:linear-gradient(135deg,hsl(var(--h,150) 42% 46%),hsl(var(--h,150) 46% 30%))}
.mav.has{background:var(--n200)}
.mav img{width:100%;height:100%;object-fit:cover;display:block}

.pm-avatar.has{background:var(--n200);overflow:hidden;padding:0}
.pm-avatar.has img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

/* ---------- the profile page ---------- */
.mprof{max-width:940px;margin:0 auto;padding:34px 22px 70px}
.mp-head h1{font-family:var(--fh);font-size:34px;margin:0 0 8px;font-weight:400}
.mp-head p{margin:0 0 26px;max-width:62ch;font-size:15px;line-height:1.6}
.mp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
.mp-card{background:#fff;border:1px solid var(--div);border-radius:18px;padding:26px 26px 28px}
.mp-card h2{font-family:var(--fh);font-size:19px;margin:0 0 4px;font-weight:400}
.mp-card .hint{display:block;font-size:12.5px;color:var(--n600);line-height:1.55}
.mp-avwrap{display:flex;gap:20px;align-items:center;margin:20px 0 18px;flex-wrap:wrap}
.mp-av .mav{box-shadow:0 0 0 1px var(--div),0 6px 18px -10px rgba(16,42,26,.35)}
.mp-avbtns{display:flex;flex-direction:column;gap:9px;align-items:flex-start;min-width:170px}
.mp-avbtns label{cursor:pointer;margin:0}
.btn.ghost{background:none;border:1px solid transparent;color:var(--n700)}
.btn.ghost:hover{border-color:var(--div);color:#8c2b21}
.mp-where{display:flex;gap:8px;align-items:flex-start;margin:0;padding-top:16px;border-top:1px dashed var(--div);
  font-size:12.5px;color:var(--n600);line-height:1.55}
.mp-where svg{flex:0 0 auto;margin-top:2px;color:var(--g600)}
.mp-form{display:flex;flex-direction:column;gap:5px;margin-top:16px}
.mp-form label{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--n700);margin-top:12px}
.mp-form label .opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--n500);margin-left:5px}
/* flex:0 0 auto matters: site.css gives every text field flex:1 1 240px for the
   newsletter row, and in this column form that basis becomes the field's HEIGHT —
   a 240px tall email box. */
.mp-form input{font-size:15px;padding:11px 13px;border:1px solid var(--n400);border-radius:10px;font-family:inherit;color:var(--text);flex:0 0 auto;width:100%;min-width:0;box-sizing:border-box}
.mp-form input[type=checkbox],.mp-form input[type=radio]{width:auto}
.mp-form input:focus{outline:none;border-color:var(--g600);box-shadow:0 0 0 3px var(--g100)}
.mp-form input:disabled{background:var(--n100);color:var(--n600)}
.mp-actions{margin-top:22px}
@media (max-width:760px){.mp-grid{grid-template-columns:1fr}.mprof{padding:24px 16px 56px}}

/* ---------- the cropper ---------- */
.crop{position:fixed;inset:0;z-index:500;background:rgba(16,32,22,.5);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .2s}
.crop.on{opacity:1}
.crop-box{width:100%;max-width:392px;background:#fff;border-radius:18px;padding:24px;
  box-shadow:0 30px 70px -20px rgba(10,30,18,.5);transform:translateY(-12px) scale(.97);
  transition:transform .26s cubic-bezier(.34,1.28,.64,1)}
.crop.on .crop-box{transform:none}
.crop-box h3{font-family:var(--fh);font-size:19px;margin:0 0 16px;font-weight:400;text-align:center}
.crop-stage{position:relative;width:320px;max-width:100%;aspect-ratio:1;margin:0 auto;border-radius:14px;
  overflow:hidden;background:var(--n200);cursor:grab;touch-action:none}
.crop-stage:active{cursor:grabbing}
.crop-stage canvas{display:block;width:100%;height:100%}
/* everything outside the circle is dimmed, so the crop is unambiguous */
.crop-ring{position:absolute;inset:0;pointer-events:none;
  box-shadow:0 0 0 999px rgba(255,255,255,.72) inset;
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 0 49.5%,#000 50%);
          mask:radial-gradient(circle at 50% 50%,transparent 0 49.5%,#000 50%)}
.crop-ring::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 2px var(--g600) inset}
.crop-zoom{display:flex;align-items:center;gap:12px;margin:18px 0 4px;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--n700)}
.crop-zoom input{flex:1;accent-color:var(--g600)}
.crop-btns{display:flex;gap:10px;margin-top:18px}
.crop-btns .btn{flex:1;justify-content:center;text-align:center}
.crop-err{margin-top:12px;padding:10px 12px;border-radius:9px;background:#fdecea;border:1px solid #f2b8b1;
  color:#8c2b21;font-size:13px}
@media (prefers-reduced-motion:reduce){.crop,.crop-box{transition:none;transform:none}}

/* ---------- delete files / delete account ---------- */
.mp-danger{grid-column:1/-1;border-color:#f2b8b1;
  background:linear-gradient(#fff 0%,#fdf6f4 100%)}
.mp-danger h2{color:#8c2b21}
.mp-danger-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn.mp-wipe-acct{background:#8c2b21;border:1px solid #8c2b21;color:#fff}
.btn.mp-wipe-acct:hover{background:#6e2119;border-color:#6e2119;color:#fff}
.wipe{position:fixed;inset:0;z-index:520;background:rgba(16,32,22,.5);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .2s}
.wipe.on{opacity:1}
.wipe-box{width:100%;max-width:440px;background:#fff;border-radius:18px;padding:26px 26px 24px;
  box-shadow:0 30px 70px -20px rgba(10,30,18,.5);transform:translateY(-12px) scale(.97);
  transition:transform .26s cubic-bezier(.34,1.28,.64,1)}
.wipe.on .wipe-box{transform:none}
.wipe-box h3{font-family:var(--fh);font-size:22px;margin:0 0 10px;font-weight:400}
.wipe-lead{margin:0 0 18px;font-size:14.5px;line-height:1.55;color:var(--n700)}
.wipe-code-lab{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--n700);margin:0 0 6px}
.wipe-code{width:100%;font:700 28px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.22em;text-align:center;
  padding:12px 10px;border:1px solid var(--n400);border-radius:12px;box-sizing:border-box;color:var(--text);
  flex:0 0 auto}
.wipe-code:focus{outline:none;border-color:var(--g600);box-shadow:0 0 0 3px var(--g100)}
.wipe.acct .wipe-code:focus{border-color:#8c2b21;box-shadow:0 0 0 3px rgba(140,43,33,.16)}
.wipe-sent{margin:8px 0 0;font-size:12.5px;color:var(--n600);line-height:1.45}
.wipe-err{margin:10px 0 0;padding:10px 12px;border-radius:9px;background:#fdecea;border:1px solid #f2b8b1;
  color:#8c2b21;font-size:13px}
.wipe-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;align-items:center}
.wipe-btns .btn{justify-content:center}
.wipe-btns #wipeGo{margin-left:auto}
.wipe.acct #wipeGo{background:#8c2b21;border-color:#8c2b21;color:#fff}
.wipe.acct #wipeGo:disabled{opacity:.45}
@media (prefers-reduced-motion:reduce){.wipe,.wipe-box{transition:none;transform:none}}

/* ---------- half-star picker ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.starpick{position:relative;display:flex;flex-direction:row-reverse;align-items:center;
  justify-content:flex-end;gap:0;margin:6px 0 2px;padding:4px 0}
.starpick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.starpick label{position:relative;display:block;cursor:pointer;margin:0;overflow:hidden;
  font-size:30px;line-height:1;color:var(--n300);transition:color .12s,transform .12s}
.starpick label.full{width:.62em}
.starpick label.half{width:.31em}
.starpick label.half span[aria-hidden]{position:absolute;left:0;top:0;width:.62em}
/* Reverse order means every star to the RIGHT of the hovered one is a sibling,
   so ~ fills from the chosen half leftwards. */
.starpick label:hover,.starpick label:hover ~ label,
.starpick input:checked ~ label{color:#e0a92b}
.starpick input:focus-visible ~ label{outline:2px solid var(--g600);outline-offset:2px}
.starpick:hover label{transform:none}
.starpick label:hover{transform:scale(1.08)}
.starout{order:-1;margin-left:14px;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--n700);white-space:nowrap}

/* ---------- testimonial form ---------- */
.mp-form textarea{font-size:15px;padding:12px 13px;border:1px solid var(--n400);border-radius:10px;
  font-family:inherit;color:var(--text);line-height:1.6;resize:vertical}
.mp-form textarea:focus{outline:none;border-color:var(--g600);box-shadow:0 0 0 3px var(--g100)}
.tconsent{margin-top:20px;padding:14px 16px;border:1px solid var(--div);border-radius:12px;background:var(--n100)}
.chk{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:13.5px;line-height:1.55;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--text);cursor:pointer}
.chk input{width:auto;margin-top:3px;flex:0 0 auto;accent-color:var(--g600)}
.tpreview{margin-top:24px;padding-top:20px;border-top:1px dashed var(--div)}
.tpreview .pr-card{max-width:none}


/* ---- the six-digit code box -------------------------------------------
   One square per digit, typed straight through. The squares are a face for a
   real input that keeps its name and value; see includes/otp.php. */
.otp{display:flex;gap:8px;justify-content:center;margin:2px 0 6px}
.otp-d{width:46px;height:56px;flex:0 0 auto;min-width:0;padding:0;text-align:center;
  font:600 22px/1 var(--fb);color:var(--text);background:#fff;
  border:1.5px solid var(--n400);border-radius:14px;-webkit-appearance:none;appearance:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease,transform .12s ease}
.otp-d:hover{border-color:var(--n500)}
.otp-d:focus{outline:none;border-color:var(--g600);box-shadow:0 0 0 3px rgba(46,158,79,.18)}
.otp.full .otp-d{border-color:var(--g600);background:var(--g100)}
.otp.going .otp-d{transform:translateY(-2px)}
.otp-d::-webkit-outer-spin-button,.otp-d::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media (max-width:420px){.otp{gap:6px}.otp-d{width:40px;height:50px;font-size:19px;border-radius:12px}}
/* In the header panel it sits on a tighter ground and lines up left. */
.pm-form .otp{justify-content:flex-start;gap:6px}
.pm-form .otp-d{width:38px;height:44px;font-size:18px;border-radius:11px}

/* ---------------------------------- the Programs group in the profile panel ---
 * One "Programs" row that opens a nested list, rather than every installed program
 * sitting loose in the account menu. Built on <details>, so it needs no JavaScript
 * and keeps working if profile.js is ever unavailable.
 */
.pm-group{border:0;margin:0;padding:0}
/* 14px and normal weight, which is what .pm-links a is. This was 13.5px at
   weight 500 — smaller and bolder than every row beneath it, in a list where it
   is one entry among the others. */
.pm-group>summary{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;
  font-size:14px;font-weight:400;color:var(--text);cursor:pointer;list-style:none}
.pm-group>summary::-webkit-details-marker{display:none}
.pm-group>summary:hover{background:var(--g100);color:var(--g800)}
.pm-group>summary .pm-caret{margin-left:auto;transition:transform .15s}
.pm-group[open]>summary{background:var(--g100);color:var(--g800)}
.pm-group[open]>summary .pm-caret{transform:rotate(90deg)}
.pm-kids{display:flex;flex-direction:column;gap:1px;margin:2px 0 4px 18px;padding-left:11px;
  border-left:2px solid var(--g300)}
.pm-kids a{font-size:13px;padding:8px 10px}

/* ------------------------------------------- the account page tab strip ---- */
.mp-tabs{display:flex;gap:2px;margin:0 0 24px;border-bottom:1px solid var(--div);flex-wrap:wrap}
.mp-tabs a{padding:10px 16px;font-size:14.5px;font-weight:500;color:var(--n600);text-decoration:none;
  border-bottom:2px solid transparent;border-radius:10px 10px 0 0}
.mp-tabs a:hover{color:var(--text);background:var(--g100)}
.mp-tabs a[aria-current]{color:var(--g800);border-bottom-color:var(--g600);font-weight:600}
.mp-bill{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.mp-meter{margin-bottom:14px}
.mp-meter .mm-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.mp-meter .mm-bar{height:8px;border-radius:999px;background:var(--n200);overflow:hidden}
.mp-meter .mm-bar i{display:block;height:100%;background:var(--g600);border-radius:999px}
.mp-meter .mm-bar.hot i{background:#d98324}
.mp-kv{width:100%;border-collapse:collapse;font-size:13.5px}
.mp-kv th{text-align:left;font-weight:500;color:var(--n600);padding:7px 12px 7px 0;white-space:nowrap;
  vertical-align:top;width:1%}
.mp-kv td{padding:7px 0;word-break:break-word}
.mp-kv tr+tr th,.mp-kv tr+tr td{border-top:1px solid var(--div)}
.mp-pay{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mp-receipt{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;
  text-decoration:none;background:var(--g100);color:var(--g800);border:1px solid var(--g300);white-space:nowrap}
.mp-receipt:hover{background:var(--g200);color:var(--g900)}

/* ------------------------------------------- the account home ---------------- */
.mp-home{display:grid;gap:18px}
.mp-hero-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.mp-hero-top h2{margin:0;font-family:var(--fh);font-size:26px;font-weight:400}
.mp-kicker{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n600)}
.mp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:18px}
.mp-stat{background:var(--n100,#f4f6f5);border-radius:14px;padding:14px 16px}
.mp-stat .k{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n600)}
.mp-stat .v{margin:0;font-size:18px;font-weight:600;line-height:1.25}
.mp-stat .s{margin:6px 0 0;font-size:13px;color:var(--n600);line-height:1.45}
.mp-docs{list-style:none;margin:12px 0 0;padding:0}
.mp-docs a{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text)}
.mp-docs a:hover{background:var(--g100)}
.mp-docs .when{font-size:12.5px;color:var(--n600);white-space:nowrap}
.mp-empty{margin:12px 0 0;font-size:14px;color:var(--n600)}
time.dp-local{font-variant-numeric:tabular-nums}

.mp-fav-list{list-style:none;margin:16px 0;padding:0;display:grid;gap:8px}
.mp-fav-list li{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--div);border-radius:10px;background:#fff}
.mp-fav-list label{display:flex;align-items:center;gap:10px;flex:1;margin:0;font-weight:600}
.mp-fav-list input[type=number]{width:64px}

/* ----------------------------------------------- the Rate programs page ---- */
.rt-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:20px}
.rt-card{border:1px solid var(--div);border-radius:14px;padding:18px;background:#fff;
  display:flex;flex-direction:column;gap:9px}
.rt-card h2{margin:0;font-size:17px}
.rt-card p{margin:0;font-size:13.5px;color:var(--n600);flex:1 1 auto}
.rt-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-weight:700;font-size:13px;color:#fff;background:var(--g600)}