/* ClearEdge's own additions to the Webflow styles, on every page. */

/* Instrument Serif arrives from Google Fonts after the page has been drawn. Until then the
   headings use Times, narrowed to Instrument Serif's width, so they wrap the same way and the
   page doesn't jump when the font comes in (it was most of the home page's layout shift). */
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times");
  size-adjust: 81.3%;
  ascent-override: 121.8%;
  descent-override: 38.1%;
  line-gap-override: 0%;
}
h1, .h1, .h2, .h3, .h4, .step-number-text, .h1-2, .h2-2, .h2-3, .h2-4 {
  font-family: "Instrument Serif", "Instrument Serif Fallback", serif;
}

/* Nav: "Lock In $99 for Life" beside Account Login (desktop) and Sign Up (mobile menu). */
.nav-actions {
  gap: .75em;
  align-items: center;
}
@media screen and (min-width: 992px) {
  .hide-mobile.nav-actions { display: flex; }
}
@media screen and (max-width: 991px) {
  .show-mobile.nav-actions { display: flex; flex-wrap: wrap; }
}
/* index.js turns a menu button white on hover with an inline style; the gold one stays gold. */
.btn.is-nav.is-gold {
  background-color: #e6d39a !important;
  color: #040205;
}
.btn.is-nav.is-gold:hover {
  background-color: #f0e2b6 !important;
}

/* Home hero */
/* "Four tools. One login." is a heading of its own (h2), in the paragraph's size, on the line above it. */
.hero-lead {
  margin: 0 0 .25em;
  color: var(--_color---white--100);
  font-weight: 600;
}
.hero-copy p { margin: 0; }
.hero-note {
  margin-top: -.75em;
  color: var(--_color---white--60);
}
/* The copy is longer than Webflow's was: let the hero grow on short screens instead of cutting it off. */
.hero-wrapper.is-home {
  height: auto;
  min-height: min(100vh, 50em);
  padding-bottom: 4em;
}
/* The app on a laptop, turned a little towards the text, with the phone standing beside it.
   The lid swings up from closed as the page opens and the screen lights up; then the numbers
   move (.hero-live, a script at the end of index.html). The laptop is drawn in 3D: the lid
   (screen and back), and the base it opens from (keyboard deck, front and side edges). */
.hero-devices {
  z-index: 2;
  position: absolute;
  top: 14em;
  right: 2%;
  width: 57%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  perspective: 200em;
  perspective-origin: 50% 40%;
}
.hero-device {
  display: block;
  width: 100%;
  height: auto;
}
/* .hero-laptop holds the laptop's place in the layout (as tall as the lid); .laptop-3d is the
   laptop itself, seen from a little above (rotateX) and turned to face left (rotateY). It is
   drawn at twice the size and scaled back down (scale3d, font-size), because the browser draws
   a 3D-turned element at its own size before turning it: at twice the size the screen stays
   sharp. The lid and the base are the same size, as on a real laptop: the lid closes onto it. */
.hero-laptop {
  position: relative;
  flex: none;
  width: 76%;
  aspect-ratio: 1.995;
  transform-style: preserve-3d;
}
.laptop-3d {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  font-size: 200%;
  transform: scale3d(.5, .5, .5) rotateX(-14deg) rotateY(-16deg);
  transform-style: preserve-3d;
}
.laptop-lid {
  position: relative;
  transform: rotateX(8deg);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  animation: laptop-open 2.4s cubic-bezier(.5, 0, .2, 1) .3s both;
}
.laptop-face {
  position: relative;
  padding: 2.2% 2.2% 3%;
  border-radius: 1em 1em .35em .35em;
  background: #0b0b0d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 4em rgba(204, 184, 129, .12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.laptop-face::before {
  content: "";
  position: absolute;
  top: .45%;
  left: 50%;
  width: .3em;
  height: .3em;
  margin-left: -.15em;
  border-radius: 50%;
  background: #1f1f24;
}
.laptop-screen {
  position: relative;
  overflow: hidden;
  border-radius: .2em;
  background: #000;
}
.laptop-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  animation: laptop-wake 1s ease 1.7s both;
}
.laptop-back {
  position: absolute;
  inset: 0;
  border-radius: 1em 1em .35em .35em;
  background: linear-gradient(#2e2e33, #18181b);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* The base: the keyboard deck lies flat from the hinge towards the viewer, as deep as the lid
   is tall, with the keys and the trackpad on it; its front and right edges hang below it. */
.laptop-base {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateX(90deg);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  border-radius: .3em .3em 1.1em 1.1em;
  background: linear-gradient(#2f2f34, #26262a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 3em 1em rgba(0, 0, 0, .6);
}
/* Black keys, 15 across and 6 rows deep, in the back half of the deck; the trackpad in front. */
.laptop-base::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 7%;
  width: 86%;
  height: 44%;
  border-radius: .2em;
  background:
    linear-gradient(90deg, transparent 84%, #2c2c31 84%) 0 0 / 6.666% 100%,
    linear-gradient(0deg, transparent 78%, #2c2c31 78%) 0 0 / 100% 16.666%,
    #0f0f11;
}
.laptop-base::after {
  content: "";
  position: absolute;
  top: 56%;
  left: 30%;
  width: 40%;
  height: 37%;
  border-radius: .35em;
  background: #2b2b30;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.laptop-edge {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 2.4%;
  transform: rotateX(-90deg);
  transform-origin: 50% 0;
  border-radius: 0 0 .9em .9em / 0 0 .5em .5em;
  background: linear-gradient(#45454b, #26262a 45%, #111113);
}
.laptop-edge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 43%;
  width: 14%;
  height: 40%;
  border-radius: 0 0 .5em .5em;
  background: rgba(0, 0, 0, .45);
}
.laptop-side {
  position: absolute;
  top: 0;
  left: 100%;
  width: 2.4%;
  height: 100%;
  transform: rotateY(90deg);
  transform-origin: 0 50%;
  border-radius: 0 0 .5em 0;
  background: linear-gradient(90deg, #36363b, #161618);
}
.hero-phone {
  position: relative;
  flex: none;
  width: 15%;
  margin: 0 0 -6% 3%;
  overflow: hidden;
  border: .22em solid #1d1d20;
  border-radius: 1.1em;
  background: #0c0b0e;
  box-shadow: 0 2em 5em rgba(0, 0, 0, .7), 0 0 4em rgba(204, 184, 129, .12);
}
/* The numbers that move, drawn over the pictures' own in the app's font (IBM Plex Mono). */
.hero-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-live text { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; }
.hero-live .is-up { fill: #3ecf8e; }
.hero-live .is-down { fill: #f4706f; }
.hero-live .hl-gain, .hero-live .hl-loss {
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform .45s ease;
}
.hero-live .hl-loss { transform-origin: right center; }
@keyframes laptop-open {
  from { transform: rotateX(-87deg); }
  to { transform: rotateX(8deg); }
}
@keyframes laptop-wake {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .laptop-lid, .laptop-screen::after { animation: none; }
  .laptop-screen::after { opacity: 0; }
}
@media screen and (max-width: 991px) {
  .hero-wrapper.is-home { height: auto; max-height: none; min-height: 0; padding-bottom: 0; }
  .hero-devices {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin: 3em 0 4em;
  }
}
@media screen and (max-width: 479px) {
  .laptop-face, .laptop-back { border-radius: .6em .6em .25em .25em; }
  .hero-phone { border-width: .15em; border-radius: .7em; }
}

/* Home "Success Stories" shows the Trustpilot carousel that used to be under "Why Us?" */
.about-wrapper .why-content { margin-top: -1em; }

/* Home "How It Works": two pictures of the Journal after step 5, before the button. The dots
   switch between them (a script at the end of index.html); both fit the same frame. */
.journal-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25em;
  width: 100%;
  max-width: 62em;
}
.steps-journal {
  position: relative;
  width: 100%;
  aspect-ratio: 1376 / 814;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .75em;
  background: #141416;
  box-shadow: 0 2em 5em rgba(0, 0, 0, .6), 0 0 4em rgba(204, 184, 129, .1);
}
.journal-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  opacity: 0;
  transition: opacity .6s ease;
}
.journal-slide.is-active { opacity: 1; }
.journal-dots { display: flex; gap: .75em; }
.journal-dot {
  width: .625em;
  height: .625em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: background-color .3s, transform .3s;
}
.journal-dot.is-active { background: #e6d39a; transform: scale(1.25); }

/* Home "How It Works": screenshots of the app in the step cards, where the Rive animations were. */
.step-shot {
  z-index: 1;
  position: absolute;
  top: 2.5em;
  left: 2.5em;
  right: 2.5em;
  bottom: 42%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .75em;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}
.step-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.step-shot.is-phone {
  left: 50%;
  right: auto;
  width: 42%;
  transform: translateX(-50%);
  border-radius: 1.25em;
}
.step-shot.is-phone img { object-position: top center; }
/* A wide screenshot shown whole, as tall as it is */
.step-shot.is-wide { bottom: auto; }
.step-shot.is-wide img { height: auto; }
.step-item-content.is-text-only { aspect-ratio: auto; }
@media screen and (max-width: 991px) {
  .step-shot { top: 1.5em; left: 1.5em; right: 1.5em; bottom: 45%; }
  .step-shot.is-phone { left: 50%; right: auto; width: 60%; }
}

/* A link inside an FAQ answer */
.faq-item-text a {
  color: var(--_color---white--100);
  text-decoration: underline;
}

/* Blog lists (scripts/blog-index.mjs): the title links to the post as well as "Read more". */
.blog-title-link { color: inherit; text-decoration: none; }
.blog-title-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.category-intro {
  max-width: 44em;
  margin: -1em 0 0;
  color: var(--_color---white--60);
}
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em;
  margin-top: 3em;
}
.blog-page-link {
  min-width: 2.5em;
  padding: .5em .875em;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6.25em;
  color: var(--_color---white--80);
  text-align: center;
  text-decoration: none;
  transition: all .3s;
}
.blog-page-link:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.blog-page-link.is-current { color: #040205; background-color: #e6d39a; border-color: #e6d39a; }

/* "How It Works" in the menu goes to the steps on the home page (/#how-it-works), below the fixed menu. */
#how-it-works { scroll-margin-top: 4em; }

/* Pricing (/plans): one plan, what it replaces, and the pricing questions (CEA-807). */
.pricing-page {
  --pp-gold: #c8a861;
  --pp-gold-light: #e6d39a;
  --pp-line: rgba(255, 255, 255, .08);
  padding-bottom: 4em;
}
.pp-container { width: 100%; max-width: 72em; margin: 0 auto; padding: 0 2em; box-sizing: border-box; }
.pp-hero {
  padding: 9.5em 0 4em;
  text-align: center;
  background: radial-gradient(ellipse 50% 70% at 50% 0%, rgba(204, 184, 129, .14), transparent 70%);
}
.pp-eyebrow, .pp-label, .pp-table-head {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75em;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.pp-eyebrow { color: var(--pp-gold); margin-bottom: 1.25em; }
.h1.pp-title { text-align: center; }
.pp-title em, .pp-h2 em { color: var(--pp-gold-light); font-style: italic; }
.pp-lead { max-width: 32em; margin: 1.25em auto 0; color: var(--_color---white--80); }
.pp-section { padding: 2.5em 0; }

.pp-card {
  display: grid;
  grid-template-columns: 2fr 3.5fr;
  overflow: hidden;
  border: 1px solid rgba(200, 168, 97, .45);
  border-radius: 1.25em;
  box-shadow: 0 2em 6em rgba(0, 0, 0, .55);
}
.pp-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.5em 2.25em;
  background: linear-gradient(180deg, #2a261d, #151412);
  border-right: 1px solid rgba(200, 168, 97, .25);
}
.pp-badge {
  padding: .4em .9em;
  border-radius: 2em;
  background: var(--pp-gold);
  color: #1a1408;
  font-size: .75em;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pp-plan { margin: 1.1em 0 0; color: #fff; font-size: 1.375em; font-weight: 600; line-height: 1.2; }
.pp-price { display: flex; align-items: flex-end; gap: .4em; margin-top: .5em; color: #fff; }
.pp-amount { font-family: "Instrument Serif", "Instrument Serif Fallback", serif; font-size: 8em; line-height: .9; }
.pp-per { padding-bottom: .9em; font-size: 1.125em; color: var(--_color---white--80); }
.pp-locked { margin-top: 1.1em; color: var(--pp-gold-light); font-size: 1.25em; font-weight: 600; }
.pp-regular { margin-top: .35em; color: var(--_color---white--60); }
.pp-deadline {
  display: flex;
  gap: .75em;
  margin-top: 1.5em;
  padding: 1em 1.1em;
  border: 1px solid var(--pp-line);
  border-radius: .75em;
  background: #14130f;
}
.pp-deadline p { margin: 0; color: var(--_color---white--80); line-height: 1.45; }
.pp-deadline strong { color: #fff; }
.pp-clock { flex: none; width: 1.25em; height: 1.25em; margin-top: .1em; color: var(--pp-gold-light); }
.pp-cta {
  align-self: stretch;
  margin-top: 1.75em;
  padding: 1.1em 1.5em;
  border-radius: 3em;
  background: var(--pp-gold);
  color: #1a1408;
  font-size: 1.0625em;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color .3s;
}
.pp-cta:hover { background: var(--pp-gold-light); }
.pp-terms { align-self: center; margin: 1.1em 0 0; color: var(--_color---white--60); font-size: .875em; }

.pp-included { padding: 2.5em 2.5em 2.75em; background: #0e0e0f; }
.pp-label { color: var(--_color---white--60); }
.pp-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4em 2em;
  margin: 1.75em 0 0;
  padding: 0;
  list-style: none;
}
.pp-feature { display: flex; gap: .75em; }
.pp-check { flex: none; width: 1em; height: 1em; margin-top: .2em; color: var(--pp-gold); }
.pp-feature-title { color: #fff; font-weight: 600; line-height: 1.3; }
.pp-feature p { margin: .25em 0 0; color: var(--_color---white--60); font-size: .875em; line-height: 1.45; }

.pp-split { display: grid; grid-template-columns: 2fr 3fr; gap: 3em; align-items: start; padding-top: 3em; }
.h2.pp-h2 { padding-right: 0; font-size: 3.5em; line-height: 1.05; }
.pp-split-head p { margin: 1.25em 0 0; color: var(--_color---white--80); line-height: 1.5; }

.pp-table { overflow: hidden; border: 1px solid var(--pp-line); border-radius: 1em; background: #0e0e0f; }
.pp-table-head, .pp-row { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 1.35em 1.75em; }
.pp-table-head { color: var(--_color---white--60); }
.pp-row { border-top: 1px solid var(--pp-line); }
.pp-row p { margin: .3em 0 0; color: var(--_color---white--60); font-size: .875em; }
.pp-row s { text-decoration-color: #e0626a; text-decoration-thickness: 2px; }
.pp-row-title { color: var(--_color---white--80); font-size: 1.0625em; font-weight: 600; }
.pp-row-cost { color: var(--_color---white--60); font-weight: 600; white-space: nowrap; }
.pp-total { color: #fff; font-size: 1.125em; font-weight: 600; }
.pp-ours {
  background: linear-gradient(90deg, #2a261d, #151412);
  color: var(--pp-gold-light);
  font-size: 1.125em;
  font-weight: 600;
}
.pp-ours > div:last-child { color: #fff; white-space: nowrap; }
.pp-ours-price { font-family: "Instrument Serif", "Instrument Serif Fallback", serif; font-size: 2em; font-weight: 400; }

.pp-question { padding: 1.5em 0; border-top: 1px solid var(--pp-line); }
.pp-question h3 { margin: 0; color: #fff; font-size: 1.25em; font-weight: 600; line-height: 1.3; }
.pp-question p { margin: .5em 0 0; color: var(--_color---white--60); line-height: 1.5; }

@media screen and (max-width: 991px) {
  .pp-hero { padding-top: 7em; }
  .pp-card, .pp-split { grid-template-columns: 1fr; }
  .pp-offer { border-right: 0; border-bottom: 1px solid rgba(200, 168, 97, .25); }
}
@media screen and (max-width: 479px) {
  .pp-container { padding: 0 1em; }
  .pp-offer, .pp-included { padding: 1.75em 1.25em; }
  .pp-features { grid-template-columns: 1fr; }
  .pp-table-head, .pp-row { padding: 1em; }
  .h2.pp-h2 { font-size: 2.25em; }
}

/* Trustpilot reviews on the home page: initials instead of a photo */
.testi-initials { display: flex; align-items: center; justify-content: center; background: #E8BB58; color: #0b0b0b; font-weight: 600; line-height: 1; }