/* FRESHMADE CLIENT PORTAL
   Upload to /media/website_designs/2/portal.css
   Bump the ?v= number in the design every time this is replaced.

   Ported from freshmade-portal.html. The access-code styles are kept
   and repointed at the Oncord login form, since the form is now
   <forms:form contactmode="login"> rather than a code box.

   Oncord ships its own form CSS, a grey panel and a two column
   label/field table. The reset at the bottom collapses that into
   the portal's own field treatment. */

:root{
  --paper:#FFF; --bone:#F2EFE7; --stone:#E4E0D6; --ink:#111; --soft:#4A463F;
  --ground:#C9C1B4; --side:#F2EFE7; --line:rgba(17,17,17,.12);
  --black:#0A0A0A; --butter:#F7F9B1; --up:#1F6F43; --down:#A32B1C;
  --voice:"Fraunces",Georgia,serif;
  --mark:"BBH Hegarty","Fraunces",Georgia,serif;
  --data:"Roboto Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(20px,4vw,60px);
  --rail:300px; --r:26px; --rc:18px;
  --ease:cubic-bezier(.2,.8,.25,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--ground);color:var(--ink);font-family:var(--voice);
  padding:clamp(0px,1.1vw,16px);-webkit-font-smoothing:antialiased}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  height:calc(100svh - clamp(0px,2.2vw,32px));background:var(--side);
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 26px 60px rgba(36,26,14,.20),0 2px 6px rgba(36,26,14,.10)}
.app.solo{grid-template-columns:minmax(0,1fr)}

/* ---------------- rail ---------------- */
.rail{background:var(--side);display:flex;flex-direction:column;gap:20px;
  padding:26px 20px 20px;overflow:hidden;border-right:1px solid var(--line)}
.who{display:flex;align-items:center;gap:13px}
.avatar{width:48px;height:48px;border-radius:15px;background:var(--ink);color:var(--butter);
  font-family:var(--mark);font-size:24px;line-height:1;display:grid;place-items:center;flex:none}
.who .client{font-family:var(--voice);font-size:26px;letter-spacing:-.035em;line-height:1}
.who .sub{font-family:var(--data);font-size:16px;line-height:1.35;color:var(--soft);margin-top:5px}
.navlabel{font-family:var(--data);font-size:16px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--soft);padding:0 4px}
nav{display:flex;flex-direction:column;gap:3px;flex:1;min-height:0;overflow:auto}
.nv{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;
  padding:12px 14px;border-radius:14px;color:var(--soft);
  font-family:var(--voice);font-size:19px;letter-spacing:-.015em;
  transition:background .16s var(--ease),color .16s var(--ease)}
.nv svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.nv>span:first-of-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv .tail{margin-left:auto;font-family:var(--data);font-size:16px;color:var(--soft);
  white-space:nowrap;flex:none;display:flex;align-items:center}
.nv:hover{background:rgba(255,255,255,.62);color:var(--ink)}
.nv.on{background:var(--paper);color:var(--ink);
  box-shadow:0 1px 2px rgba(17,17,17,.07),0 8px 18px rgba(17,17,17,.06)}
.nv.off{opacity:.45;cursor:not-allowed}
.nv.off:hover{background:none;color:var(--soft)}
.rail-foot{display:flex;flex-direction:column;gap:10px}
.sitelink{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--paper);border-radius:var(--rc);padding:15px 17px;
  font-family:var(--data);font-size:16px;color:var(--soft)}
.sitelink b{font-family:var(--mark);font-size:19px;font-weight:400;color:var(--ink);letter-spacing:.01em}
.sitelink:hover{background:var(--butter)}
.switch{font-family:var(--data);font-size:16px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:0;color:var(--soft);padding:6px 4px;text-align:left}
.switch:hover{color:var(--ink)}
.cr{font-family:var(--data);font-size:16px;color:var(--soft);padding:0 4px;line-height:1.5}

/* ---------------- pane ---------------- */
.pane{background:var(--paper);overflow:auto;
  padding:0 clamp(22px,2.8vw,48px) clamp(40px,6vh,80px)}
.head{position:sticky;top:0;z-index:20;background:var(--paper);
  padding:clamp(22px,3.4vh,34px) 0 14px;border-bottom:1px solid var(--line);
  margin-bottom:clamp(22px,3.2vh,34px)}
.head-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.crumb{font-family:var(--data);font-size:16px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft)}
.desk{font-family:var(--data);font-size:16px;color:var(--soft);background:var(--side);
  border-radius:999px;padding:9px 16px}
.desk b{font-family:var(--mark);font-weight:400;font-size:18px;color:var(--ink)}
h1{font-family:var(--voice);font-weight:400;font-size:clamp(32px,3.8vw,56px);
  letter-spacing:-.042em;line-height:1;margin-top:16px}
h1 em{font-style:italic;font-weight:300}
h2{font-family:var(--voice);font-weight:400;font-size:clamp(24px,2.4vw,34px);
  letter-spacing:-.035em;line-height:1.05}
h3{font-family:var(--voice);font-weight:400;font-size:26px;letter-spacing:-.03em;line-height:1.05}
.lead{font-family:var(--voice);font-weight:300;font-size:clamp(18px,1.5vw,23px);
  line-height:1.5;letter-spacing:-.015em;max-width:58ch;color:var(--soft)}
.eyebrow{font-family:var(--data);font-size:16px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--soft)}
.body{font-family:var(--data);font-size:16px;line-height:1.6;color:var(--soft)}
.g-s{margin-top:14px} .g-m{margin-top:clamp(22px,3vh,34px)} .g-l{margin-top:clamp(34px,5vh,60px)}

/* module cards */
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:20px}
.mod{background:var(--side);border-radius:var(--rc);padding:24px;display:flex;flex-direction:column;
  gap:12px;min-height:224px;transition:transform .18s var(--ease),background .18s var(--ease)}
.mod .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mod .ic{width:44px;height:44px;border-radius:13px;background:var(--paper);display:grid;place-items:center}
.mod .ic svg{width:21px;height:21px;fill:none;stroke:var(--ink);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tag{font-family:var(--data);font-size:16px;line-height:1;padding:8px 13px;border-radius:999px;
  background:var(--butter);color:var(--ink);white-space:nowrap}
.tag.wait{background:rgba(17,17,17,.07);color:var(--soft)}
.tag.shut{background:rgba(17,17,17,.07);color:var(--soft)}
.mod p{font-family:var(--data);font-size:16px;line-height:1.55;color:var(--soft)}
.mod .go{margin-top:auto;font-family:var(--data);font-size:16px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.mod.open:hover{background:var(--butter);transform:translateY(-2px)}
.mod.locked{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--soft)}
.mod.locked h3,.mod.locked .ic svg{color:var(--soft);stroke:var(--soft);opacity:.85}
.mod.locked .ic{background:var(--side)}
.mod.locked .go{color:var(--soft)}

/* latest strip */
.latest{background:var(--ink);color:#fff;border-radius:var(--rc);padding:clamp(22px,2.6vw,30px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:end;margin-top:20px}
.latest .eyebrow{color:rgba(255,255,255,.66)}
.latest h2{color:#fff;margin-top:12px}
.latest p{font-family:var(--data);font-size:16px;line-height:1.55;color:rgba(255,255,255,.82);
  margin-top:10px;max-width:52ch}
.latest a{font-family:var(--data);font-size:16px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--butter);color:var(--ink);border-radius:999px;padding:15px 22px;white-space:nowrap}
.latest a:hover{background:#fff}

/* onboarding steps */
.steps{margin-top:22px;border-top:1px solid var(--ink)}
.step{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:16px;align-items:start;
  padding:20px 0;border-bottom:1px solid rgba(17,17,17,.1)}
.mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--data);font-size:16px;background:var(--side);color:var(--soft)}
.step.done .mark{background:var(--ink);color:var(--butter)}
.step.now .mark{background:var(--butter);color:var(--ink);box-shadow:0 0 0 4px rgba(247,249,177,.55)}
.step h3{font-size:23px}
.step p{font-family:var(--data);font-size:16px;line-height:1.55;color:var(--soft);margin-top:7px}
.step .when{font-family:var(--data);font-size:16px;color:var(--soft);white-space:nowrap}
.step.next h3{color:var(--soft)}
.prog{display:flex;align-items:center;gap:14px;margin-top:20px}
.prog .bar{flex:1;height:12px;border-radius:999px;background:rgba(17,17,17,.09);overflow:hidden}
.prog .bar i{display:block;height:100%;background:var(--ink);border-radius:999px}
.prog .n{font-family:var(--data);font-size:16px;color:var(--soft);white-space:nowrap}

/* resources */
.chips{display:flex;gap:8px;margin-top:18px;overflow-x:auto;padding-bottom:3px}
.chip{font-family:var(--data);font-size:16px;background:var(--side);border:0;border-radius:999px;
  padding:11px 18px;min-height:44px;color:var(--soft);white-space:nowrap}
.chip:hover{color:var(--ink)}
.chip.on{background:var(--ink);color:#fff}
.res{margin-top:22px;border-top:1px solid var(--ink)}
.rz{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 120px auto;gap:18px;
  align-items:baseline;padding:19px 0;border-bottom:1px solid rgba(17,17,17,.1);
  transition:background .14s linear,padding .14s linear}
.rz:hover{background:var(--butter);padding-left:14px;padding-right:14px}
.rz.static{align-items:center}
.rz.static:hover{background:none;padding-left:0;padding-right:0}
.rz.static .tag{justify-self:end}
.rz .t{font-family:var(--voice);font-size:23px;letter-spacing:-.028em}
.rz .d{font-family:var(--data);font-size:16px;line-height:1.5;color:var(--soft)}
.rz .k{font-family:var(--data);font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.rz .go{font-family:var(--data);font-size:16px;letter-spacing:.12em;text-transform:uppercase}
.empty{background:var(--side);border-radius:var(--rc);padding:30px;margin-top:22px}
.empty p{font-family:var(--data);font-size:16px;line-height:1.6;color:var(--soft);margin-top:10px;max-width:52ch}

/* insights */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:20px}
.stat{background:var(--side);border-radius:var(--rc);padding:22px}
.stat .k{font-family:var(--data);font-size:16px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft)}
.stat .v{font-family:var(--voice);font-weight:300;font-size:clamp(30px,3.2vw,44px);
  line-height:1;letter-spacing:-.04em;margin-top:14px}
.stat .n{font-family:var(--data);font-size:16px;line-height:1.5;color:var(--soft);margin-top:10px}
.stat .v.none{font-size:26px;color:var(--soft);opacity:.7}

.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:14px}
.panel{background:var(--side);border-radius:var(--rc);padding:24px}
.panel h3{font-size:23px}
.panel .src{font-family:var(--data);font-size:16px;color:var(--soft);margin-top:8px}
.dbar{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) 62px;gap:14px;
  align-items:center;padding:13px 0;border-bottom:1px solid rgba(17,17,17,.1)}
.dbar:last-child{border-bottom:0}
.dbar .l{font-family:var(--data);font-size:16px;color:var(--soft)}
.dbar .b{height:14px;border-radius:999px;background:rgba(17,17,17,.09);overflow:hidden}
.dbar .b i{display:block;height:100%;background:var(--ink);border-radius:999px}
.dbar .b i.alt{background:rgba(17,17,17,.42)}
.dbar .p{font-family:var(--data);font-size:16px;text-align:right;white-space:nowrap}
.dbar.top .l,.dbar.top .p{color:var(--ink);font-weight:500}
.nodata{font-family:var(--data);font-size:16px;line-height:1.6;color:var(--soft);margin-top:14px}

.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:20px}
.tier{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--rc);padding:22px}
.tier.hero{background:var(--butter);box-shadow:none}
.tier .nm{font-family:var(--voice);font-size:26px;letter-spacing:-.03em}
.tier .ct{font-family:var(--data);font-size:16px;color:var(--soft);margin-top:10px}
.tier .row2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;
  font-family:var(--data);font-size:16px;line-height:1.45;padding:11px 0;
  border-top:1px solid rgba(17,17,17,.12);margin-top:14px}
.tier .row2 span:last-child{color:var(--soft);text-align:right;overflow-wrap:anywhere}

.reads{margin-top:20px;border-top:1px solid var(--ink)}
.reads li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:18px 0;
  border-bottom:1px solid rgba(17,17,17,.1)}
.reads li b{font-family:var(--data);font-size:16px;font-weight:500;color:var(--soft)}
.reads li p{font-family:var(--data);font-size:16px;line-height:1.6;color:var(--soft)}
.reads li p em{font-style:normal;color:var(--ink)}
.stamp{font-family:var(--data);font-size:16px;color:var(--soft);background:var(--side);
  border-radius:999px;padding:9px 16px;display:inline-block;margin-top:18px}

/* locked page */
.gatepanel{background:var(--side);border-radius:var(--rc);padding:clamp(26px,3vw,40px);margin-top:22px;
  max-width:640px}
.gatepanel .lock{width:52px;height:52px;border-radius:16px;background:var(--paper);display:grid;place-items:center}
.gatepanel .lock svg{width:23px;height:23px;fill:none;stroke:var(--ink);stroke-width:1.6}
.gatepanel p{font-family:var(--data);font-size:16px;line-height:1.6;color:var(--soft);margin-top:12px}

/* sign in */
.fmp-signin{background:var(--black);color:#fff;min-height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(34px,7vh,80px) clamp(26px,5vw,70px)}
.fmp-signin .mk{font-family:var(--mark);font-size:26px;letter-spacing:.01em}
.fmp-signin h1{max-width:15ch;margin-top:clamp(22px,4vh,44px)}
.fmp-signin .lead{color:rgba(255,255,255,.78);max-width:46ch}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(22px,4vh,40px)}
.row input{font-family:var(--data);font-size:18px;letter-spacing:.08em;background:none;border:0;
  border-bottom:1px solid rgba(255,255,255,.5);color:#fff;padding:14px 2px;
  min-width:min(100%,320px);outline:none}
.row input::placeholder{color:rgba(255,255,255,.42)}
.row button{font-family:var(--data);font-size:16px;letter-spacing:.14em;text-transform:uppercase;
  background:#fff;color:var(--ink);border:0;border-radius:999px;padding:15px 26px;min-height:50px}
.row button:hover{background:var(--butter)}
.err{font-family:var(--data);font-size:16px;color:var(--butter);margin-top:18px;min-height:24px}
.fmp-signin .foot{font-family:var(--data);font-size:16px;color:rgba(255,255,255,.55);margin-top:clamp(26px,5vh,60px)}
.fmp-signin .foot a{text-decoration:underline;text-underline-offset:4px;color:rgba(255,255,255,.8)}

@media (max-width:900px){
  html,body{overflow:auto}
  body{padding:0}
  .app{grid-template-columns:minmax(0,1fr);height:auto;border-radius:0;box-shadow:none}
  .rail,.pane{min-width:0;max-width:100%}
  .rail{border-right:0;border-bottom:1px solid var(--line);padding:18px var(--gut);gap:14px}
  nav{flex-direction:row;overflow-x:auto;gap:6px}
  .nv{width:auto;white-space:nowrap;font-size:18px;padding:11px 15px}
  .nv .tail{display:none}
  .navlabel{display:none}
  .rail-foot{flex-direction:row;align-items:center;gap:12px}
  .sitelink{padding:12px 16px}
  .cr{display:none}
  .pane{overflow:visible;padding:0 var(--gut) 60px}
  .head{position:static}
  .latest{grid-template-columns:1fr}
  .rz{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .rz .d{grid-column:1 / -1}
}

/* ==========================================================
   ONCORD LOGIN FORM
   Collapses Oncord's default form chrome into the portal's
   own input treatment.
   ========================================================== */
.fmp-signin form,
.fmp-signin form div,
.fmp-signin form table,
.fmp-signin form tbody,
.fmp-signin form tr,
.fmp-signin form td,
.fmp-signin form th{background:transparent !important;box-shadow:none !important}

.fmp-signin form table,
.fmp-signin form tbody,
.fmp-signin form tr,
.fmp-signin form td,
.fmp-signin form th{display:block;width:100%;border:0;margin:0;padding:0;text-align:left}
.fmp-signin form tr{margin-bottom:14px}

.fmp-signin form th,
.fmp-signin form label{
  display:block;
  font-family:var(--data);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 6px;
}

.fmp-signin form input[type="text"],
.fmp-signin form input[type="email"],
.fmp-signin form input[type="password"],
.fmp-signin form input:not([type="submit"]):not([type="button"]){
  width:100% !important;
  box-sizing:border-box;
  font-family:var(--voice) !important;
  font-size:16px !important;
  color:var(--ink) !important;
  background:var(--paper) !important;
  border:1px solid var(--rule) !important;
  border-radius:4px !important;
  padding:13px 14px !important;
  box-shadow:none !important;
}
.fmp-signin form input:focus{outline:none;border-color:var(--ink) !important}

.fmp-signin form button,
.fmp-signin form input[type="submit"]{
  width:100% !important;
  cursor:pointer;
  font-family:var(--data) !important;
  font-size:11px !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
  background:var(--ink) !important;
  color:var(--paper) !important;
  border:1px solid var(--ink) !important;
  border-radius:4px !important;
  padding:14px 20px !important;
  margin-top:4px;
  transition:background .25s ease,color .25s ease;
}
.fmp-signin form button:hover,
.fmp-signin form input[type="submit"]:hover{
  background:transparent !important;
  color:var(--ink) !important;
}

.fmp-signin .validation-message,
.fmp-signin .error{font-family:var(--data);font-size:11px;color:#B4462B;margin-top:8px}


/* ==========================================================
   REPORTING PAGE
   The dashboard brings its own layout, so the portal frame gets
   out of its way and only supplies the back link.
   ========================================================== */
.fmp-back{
  padding:14px clamp(16px,3vw,28px) 0;
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.fmp-back a{color:var(--soft);text-decoration:none}
.fmp-back a:hover{color:var(--ink)}


/* button used on the signed-in and signed-out states */
.fmp-cta{
  display:inline-block;
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  border-radius:4px;
  padding:14px 26px;
  text-decoration:none;
  transition:background .25s ease,color .25s ease;
}
.fmp-cta:hover{background:transparent;color:var(--ink)}

/* ==========================================================
   UNCLASSED MARKUP INSIDE THE PORTAL FRAME
   Any Oncord control that renders its own markup into one of
   your pages, such as the logout form or a profile form, arrives
   with none of the portal classes on it. These rules give plain
   headings, paragraphs and form controls the portal treatment so
   those pages look right without their content being edited.

   Note: the /community/ pages are Oncord system pages, not pages
   in your tree, so they cannot take a design and these rules do
   not reach them. That is why sign out lives at /clients/sign-out/
   instead.
   ========================================================== */
.fmp-frame > h1,
.fmp-frame > h2,
.fmp-frame > h3,
.fmp-frame > p,
.fmp-frame > form,
.fmp-frame > table,
.fmp-frame > div:not([class]),
.fmp-frame > ul{
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(20px,5vw,32px);
  padding-right:clamp(20px,5vw,32px);
}

.fmp-frame > h1:first-child,
.fmp-frame > h2:first-child{margin-top:clamp(60px,14vh,120px)}

.fmp-frame > h1,
.fmp-frame > h2{
  font-family:var(--voice);
  font-weight:300;
  font-size:clamp(28px,4vw,44px);
  line-height:1.06;
  letter-spacing:-.03em;
  color:var(--ink);
  margin-bottom:14px;
}
.fmp-frame > h3{
  font-family:var(--voice);
  font-weight:400;
  font-size:20px;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:24px 0 8px;
}
.fmp-frame > p,
.fmp-frame > ul{
  font-family:var(--voice);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  color:var(--soft);
  margin-bottom:14px;
}
.fmp-frame > ul{padding-left:calc(clamp(20px,5vw,32px) + 18px)}
.fmp-frame a{color:var(--ink)}

/* Oncord's own form chrome on these pages, collapsed to the
   portal's field treatment. Same reset as the sign-in form. */
.fmp-frame form,
.fmp-frame form div,
.fmp-frame form table,
.fmp-frame form tbody,
.fmp-frame form tr,
.fmp-frame form td,
.fmp-frame form th{background:transparent !important;box-shadow:none !important}

.fmp-frame form table,
.fmp-frame form tbody,
.fmp-frame form tr,
.fmp-frame form td,
.fmp-frame form th{display:block;width:100%;border:0;margin:0;padding:0;text-align:left}
.fmp-frame form tr{margin-bottom:14px}

.fmp-frame form th,
.fmp-frame form label{
  display:block;
  font-family:var(--data);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 6px;
}

.fmp-frame form input[type="text"],
.fmp-frame form input[type="email"],
.fmp-frame form input[type="password"],
.fmp-frame form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.fmp-frame form textarea,
.fmp-frame form select{
  width:100% !important;
  box-sizing:border-box;
  font-family:var(--voice) !important;
  font-size:16px !important;
  color:var(--ink) !important;
  background:var(--paper) !important;
  border:1px solid var(--rule) !important;
  border-radius:4px !important;
  padding:13px 14px !important;
  box-shadow:none !important;
}
.fmp-frame form input:focus,
.fmp-frame form textarea:focus{outline:none;border-color:var(--ink) !important}

.fmp-frame form button,
.fmp-frame form input[type="submit"]{
  cursor:pointer;
  font-family:var(--data) !important;
  font-size:11px !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
  background:var(--ink) !important;
  color:var(--paper) !important;
  border:1px solid var(--ink) !important;
  border-radius:4px !important;
  padding:14px 24px !important;
  margin-top:4px;
  transition:background .25s ease,color .25s ease;
}
.fmp-frame form button:hover,
.fmp-frame form input[type="submit"]:hover{
  background:transparent !important;
  color:var(--ink) !important;
}