/* myco trial: the page's own part. The trial's serif (inside its shadow root it uses this face)
   and the quiet placeholder its box shows until the trial wakes. */
@font-face {
  font-family: "New Spirit Condensed";
  src: url("fonts/new-spirit-condensed.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
.myco-trial {
  display: block; position: relative; margin: 0 auto;
  /* as tall as the trial will be, so the page never jumps when it wakes: the phone scaled to the
     window (772 px, less room for the shop's header and Add to cart bar, never below 510) and its
     24 px above and below (trial.css, TrialRoot.jsx fitOf); beside a small phone, the doors (540) */
  --myco-phone: max(510px, min(772px, 100vh - 160px));
  min-height: calc(max(var(--myco-phone), 540px) + 48px);
}
/* the box the plugin put on a product page by itself, until the loader has found its place */
.myco-trial[hidden] { display: none !important; }
.myco-trial-hold { display: grid; place-items: center; min-height: inherit; }
.myco-trial-hold span { display: block; width: calc(var(--myco-phone) * 0.4819); height: var(--myco-phone); border-radius: 56px; background: linear-gradient(160deg, rgba(10, 61, 39, 0.06), rgba(10, 61, 39, 0.02)); box-shadow: inset 0 0 0 1px rgba(10, 61, 39, 0.08); }
/* a phone or a tablet: the card, with the top of the app's phone in it (trial.css .trial-peek) */
@media (max-width: 899px) {
  .myco-trial { min-height: 632px; }
  .myco-trial-hold span { width: min(420px, 100%); height: 616px; border-radius: 28px; }
}
@media (max-width: 340px) {
  .myco-trial { min-height: 628px; }
  .myco-trial-hold span { height: 612px; }
}