:root {
  --cr-ink: #f6f8ff;
  --cr-muted: #aebbd0;
  --cr-line: rgba(255, 255, 255, .13);
  --cr-lime: #b7f44a;
  --cr-cyan: #76e7ff;
  --cr-violet: #8b7cff;
  --cr-glass: rgba(255, 255, 255, .065);
  --cr-radius: 26px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.crystal {
  margin: 0;
  min-height: 100vh;
  color: var(--cr-ink);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 13% 9%, rgba(74, 121, 255, .30), transparent 27rem),
    radial-gradient(circle at 88% 18%, rgba(73, 222, 255, .18), transparent 25rem),
    radial-gradient(circle at 68% 63%, rgba(133, 83, 255, .17), transparent 31rem),
    radial-gradient(circle at 26% 88%, rgba(183, 244, 74, .09), transparent 27rem),
    linear-gradient(145deg, #02050d, #071326 56%, #02040a);
  background-attachment: fixed;
}

body.crystal::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 92%);
}

.crystal a { text-decoration: none; color: inherit; }
.crystal button, .crystal select { font: inherit; }

.cr-wrap { max-width: 1200px; margin: auto; padding: 0 28px; }

.cr-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 12, 25, .42);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.cr-navin {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cr-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.5px;
  color: #fff;
}

.cr-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  background: linear-gradient(145deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .055));
  color: #dffcff;
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 35px rgba(37, 150, 255, .15);
}

.cr-navright { display: flex; align-items: center; gap: 10px; }
.cr-navlinks { display: flex; align-items: center; gap: 22px; font-size: 13px; font-weight: 600; color: #c5d0e0; }
.cr-navlinks a:hover { color: #fff; }

.cr-pillbox {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  padding: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
}

.cr-lang button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 7px 10px;
  cursor: pointer;
  color: #aab8cf;
  font-weight: 700;
  font-size: 12px;
}

.cr-lang button.active {
  background: linear-gradient(135deg, rgba(118, 231, 255, .25), rgba(139, 124, 255, .22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  color: #fff;
}

.cr-currency {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .075) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23eef7ff' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
  border-radius: 999px;
  padding: 9px 26px 9px 12px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.cr-currency option { color: #111; }

.cr-topcta,
.cr-btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .2);
  transition: .22s ease;
}

.cr-topcta {
  background: rgba(255, 255, 255, .09);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.cr-btn-main {
  color: #07101d;
  border-color: rgba(255, 255, 255, .42);
  background: linear-gradient(135deg, #e9ffff 0%, #8ceaff 34%, #a899ff 70%, #d6ff88 120%);
  box-shadow: 0 14px 45px rgba(90, 202, 255, .20), inset 0 1px 0 rgba(255, 255, 255, .85);
  padding: 15px 21px;
}

.cr-topcta:hover,
.cr-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(90, 202, 255, .32);
}

.cr-hero { position: relative; overflow: hidden; padding: 95px 0 96px; }
.cr-hero::before {
  content: "";
  position: absolute;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  right: -290px;
  top: -320px;
  background: radial-gradient(circle, rgba(118, 231, 255, .17), rgba(139, 124, 255, .08) 38%, transparent 70%);
  pointer-events: none;
}

.cr-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 62px;
}

.cr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #dbe6f7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 15px 50px rgba(0, 0, 0, .16);
  backdrop-filter: blur(22px);
}

.cr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #84c61a;
  box-shadow: 0 0 0 5px rgba(183, 244, 74, .18);
}

.cr-hero h1 {
  margin: 22px 0;
  font-family: Manrope, sans-serif;
  font-size: clamp(48px, 6vw, 77px);
  line-height: .98;
  letter-spacing: -4.2px;
  max-width: 710px;
}

.cr-hero h1 .line { display: block; color: #aab6cb; font-weight: 600; }
.cr-hero h1 .line-strong { display: block; color: #fff; font-weight: 800; }

.cr-hero-copy { font-size: 19px; line-height: 1.65; color: var(--cr-muted); max-width: 650px; }
.cr-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.cr-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 14px 7px; font-weight: 700; color: #aebbd0; }
.cr-mini-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; color: #aebbd0; }
.cr-mini-note svg { width: 17px; }

.cr-app-stage { position: relative; min-height: 520px; }
.cr-glow {
  position: absolute;
  inset: 60px -20px -10px 50px;
  background: linear-gradient(135deg, rgba(118, 231, 255, .35), rgba(139, 124, 255, .25), rgba(183, 244, 74, .16));
  filter: blur(65px);
  border-radius: 50%;
}

.cr-app {
  position: relative;
  border-radius: 32px;
  padding: 14px;
  transform: rotate(1.1deg);
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .035) 45%, rgba(255, 255, 255, .018));
  border: 1px solid rgba(255, 255, 255, .23);
  box-shadow: 0 55px 120px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .35);
  backdrop-filter: blur(35px) saturate(145%);
}

.cr-app-shell {
  overflow: hidden;
  border-radius: 23px;
  background: rgba(8, 18, 36, .70);
  border: 1px solid rgba(255, 255, 255, .08);
  display: grid;
  grid-template-columns: 72px 1fr;
  min-height: 455px;
}

.cr-sidebar {
  background: rgba(3, 9, 21, .56);
  border-right: 1px solid rgba(255, 255, 255, .08);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
}

.cr-side-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--cr-lime);
  color: #111;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.cr-ico { width: 35px; height: 35px; border-radius: 10px; display: grid; place-items: center; color: #a9b1c0; }
.cr-ico.active { background: rgba(255, 255, 255, .11); color: #fff; }
.cr-ico svg { width: 17px; height: 17px; }

.cr-screen { padding: 22px; }
.cr-screen-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.cr-screen-kicker { font-size: 9px; color: #7f93ae; }
.cr-screen-title { font-family: Manrope, sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -.6px; color: #fff; }
.cr-avatar { width: 33px; height: 33px; border-radius: 50%; background: linear-gradient(135deg, var(--cr-cyan), var(--cr-lime)); border: 3px solid rgba(255, 255, 255, .35); }

.cr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.cr-kpi,
.cr-fleet-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .045));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 13px;
  color: #f7fbff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(20px);
}

.cr-kpi small { display: block; color: #8292aa; font-size: 9px; margin-bottom: 6px; }
.cr-kpi b { font-family: Manrope, sans-serif; font-size: 18px; }
.cr-kpi em { font-style: normal; font-size: 9px; color: #54a00a; margin-left: 4px; }
.cr-fleet-card { border-radius: 18px; padding: 15px; }
.cr-fleet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cr-fleet-head b { font-size: 12px; }
.cr-fleet-head span { font-size: 9px; color: #8292aa; }

.cr-carrow {
  display: grid;
  grid-template-columns: 48px 1.35fr .9fr .75fr;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
  font-size: 9px;
}

.cr-carshape { width: 42px; height: 24px; border-radius: 9px 13px 7px 7px; background: #dfe5ec; position: relative; }
.cr-carshape::before { content: ""; position: absolute; left: 8px; top: -6px; width: 24px; height: 11px; border-radius: 12px 12px 2px 2px; background: #c7d0da; }
.cr-carshape.dark { background: #293445; }
.cr-carshape.dark::before { background: #435064; }
.cr-carshape.lime { background: #c9ee7f; }
.cr-carshape.lime::before { background: #a8da50; }
.cr-status { display: inline-flex; align-items: center; gap: 5px; }
.cr-status i { width: 6px; height: 6px; border-radius: 50%; background: #77c72d; }
.cr-status.rent i { background: #ffb347; }
.cr-plate { color: #8992a0; }

.cr-float-card {
  position: absolute;
  right: -28px;
  bottom: -22px;
  width: 190px;
  border-radius: 18px;
  padding: 16px 17px;
  transform: rotate(-2deg);
  color: #fff;
  background: linear-gradient(145deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .065));
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 30px 65px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
  backdrop-filter: blur(28px) saturate(150%);
}

.cr-float-card small { color: #b2c0d5; font-size: 10px; }
.cr-float-card b { display: block; font-family: Manrope, sans-serif; font-size: 24px; margin-top: 3px; }
.cr-progress { height: 7px; background: rgba(255, 255, 255, .12); border-radius: 20px; margin-top: 10px; overflow: hidden; }
.cr-progress i { display: block; width: 78%; height: 100%; background: linear-gradient(90deg, #75e7ff, #b7f44a); border-radius: 20px; }

.cr-trust { padding: 12px 0 82px; }
.cr-trustbar {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  flex-wrap: wrap;
  padding: 19px 24px;
  border-radius: 18px;
  font-size: 13px;
  color: #aebbd0;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(24px);
}

.cr-trustbar span { display: flex; align-items: center; gap: 8px; }
.cr-tick { color: #72b51c; font-weight: 900; }

.cr-section { padding: 105px 0; }
.cr-section-head { max-width: 720px; margin-bottom: 52px; }
.cr-section-head p { font-size: 17px; line-height: 1.65; color: #9faec3; }
.cr-section-head h2,
.cr-faq-title h2,
.cr-page-title {
  font-family: Manrope, sans-serif;
  font-size: clamp(38px, 5vw, 59px);
  line-height: 1.05;
  letter-spacing: -2.5px;
  margin: 18px 0 14px;
  color: #f8fbff;
}

.cr-feature-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.cr-glass {
  background: linear-gradient(145deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .035) 50%, rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .17);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
}

.cr-feature-main {
  min-height: 410px;
  border-radius: 30px;
  padding: 34px;
  position: relative;
  overflow: hidden;
}

.cr-feat-no { font-size: 12px; color: var(--cr-lime); font-weight: 700; }
.cr-feature-main h3 { font-family: Manrope, sans-serif; font-size: 31px; letter-spacing: -1.2px; margin: 70px 0 12px; max-width: 430px; }
.cr-feature-main p,
.cr-feat p { color: #aab7ca; line-height: 1.65; }
.cr-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.cr-chip { font-size: 11px; padding: 8px 11px; border-radius: 999px; background: rgba(255, 255, 255, .065); color: #d7dce5; border: 1px solid rgba(255, 255, 255, .1); }

.cr-feature-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cr-feat { border-radius: 25px; padding: 25px; min-height: 196px; }
.cr-feat-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(118, 231, 255, .09);
  color: #8deaff;
  border: 1px solid rgba(118, 231, 255, .13);
  display: grid;
  place-items: center;
  margin-bottom: 25px;
}

.cr-feat h3 { font-family: Manrope, sans-serif; font-size: 17px; margin: 0 0 8px; }
.cr-feat p { font-size: 13px; line-height: 1.5; margin: 0; }

.cr-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.cr-price {
  border-radius: 28px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  min-height: 500px;
  position: relative;
  color: #fff;
}

.cr-price.pro {
  transform: translateY(-12px) scale(1.025);
  background: linear-gradient(145deg, rgba(118, 231, 255, .15), rgba(139, 124, 255, .09) 46%, rgba(255, 255, 255, .035));
  border-color: rgba(142, 224, 255, .28);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .34), 0 0 70px rgba(87, 185, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.cr-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  background: linear-gradient(135deg, #9cf1ff, #c8ff78);
  color: #16200b;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 800;
}

.cr-plan { font-family: Manrope, sans-serif; font-size: 20px; font-weight: 800; }
.cr-amount { font-family: Manrope, sans-serif; font-size: 48px; font-weight: 800; letter-spacing: -2px; margin: 28px 0 4px; }
.cr-amount small { font-size: 14px; letter-spacing: 0; color: #9fa8b7; font-family: "DM Sans", sans-serif; font-weight: 500; }
.cr-price p { color: #aab7ca; font-size: 13px; line-height: 1.5; min-height: 40px; }
.cr-price ul { list-style: none; padding: 20px 0 0; margin: 20px 0; border-top: 1px solid rgba(255, 255, 255, .09); flex: 1; }
.cr-price li { font-size: 13px; margin: 13px 0; display: flex; gap: 8px; align-items: center; }
.cr-price li::before { content: "✓"; font-weight: 900; color: #71ae20; }
.cr-price .cta {
  display: block;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .17);
  padding: 13px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  color: #eef7ff;
  background: rgba(255, 255, 255, .055);
}

.cr-price.pro .cta {
  color: #07101d;
  background: linear-gradient(135deg, #dfffff, #8eeaff, #c8ff78);
  border-color: transparent;
}

.cr-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.cr-faq-title { position: sticky; top: 120px; }
.cr-faq-title h2 { font-size: 50px; }
.cr-faq-title p { color: #98a8bf; line-height: 1.65; }
.cr-qa { border-bottom: 1px solid rgba(255, 255, 255, .11); padding: 21px 0; }
.cr-q {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #eef5ff;
  cursor: pointer;
}
.cr-q span:last-child { font-size: 22px; color: #8b94a1; transition: .2s; }
.cr-a { max-height: 0; overflow: hidden; color: #98a8bf; line-height: 1.65; font-size: 14px; transition: max-height .28s ease, padding .28s ease; }
.cr-qa.open .cr-a { max-height: 220px; padding-top: 12px; }
.cr-qa.open .cr-q span:last-child { transform: rotate(45deg); }

.cr-finalcta { padding: 60px 0 90px; }
.cr-ctabox {
  border-radius: 32px;
  padding: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  position: relative;
  overflow: hidden;
}

.cr-ctabox h3 { font-family: Manrope, sans-serif; font-size: 36px; letter-spacing: -1.4px; margin: 0 0 9px; }
.cr-ctabox p { margin: 0; color: #aab3c1; }
.cr-ctabox .cr-btn-main { position: relative; z-index: 2; white-space: nowrap; }

.cr-foot {
  padding: 30px 0 46px;
  color: #8d9db4;
  font-size: 13px;
}

.cr-footin { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.cr-footlinks { display: flex; gap: 24px; }
.cr-foot .cr-brand { color: #fff; font-size: 16px; }
.cr-foot .cr-logo { width: 30px; height: 30px; border-radius: 9px; }

.cr-flash {
  max-width: 1200px;
  margin: 16px auto 0;
  padding: 0 28px;
}

.cr-flash p {
  margin: 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #d7fbe3;
}

.cr-page { padding: 48px 0 90px; }
.cr-page-lead { color: var(--cr-muted); margin: 0 0 28px; }
.cr-form-card { border-radius: 28px; padding: 36px 34px; }

.crystal label { color: #eef5ff; }
.crystal .text-apple-subtext { color: #aebbd0; }

.crystal .apple-input,
.crystal select.apple-input {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .875rem;
  color: #f6f8ff;
  outline: none;
}

.crystal .apple-input::placeholder { color: #8d9db4; }
.crystal .apple-input:focus {
  border-color: rgba(118, 231, 255, .45);
  box-shadow: 0 0 0 3px rgba(118, 231, 255, .12);
}

.crystal .apple-input.error { border-color: #fb7185; }
.crystal .subdomain-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
}

.crystal .subdomain-wrap:focus-within {
  border-color: rgba(118, 231, 255, .45);
  box-shadow: 0 0 0 3px rgba(118, 231, 255, .12);
}

.crystal .subdomain-wrap.error { border-color: #fb7185; }
.crystal .subdomain-wrap input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 16px;
  font-size: .875rem;
  color: #f6f8ff;
  background: transparent;
  min-width: 0;
}

.crystal .subdomain-suffix {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #8d9db4;
  background: rgba(255, 255, 255, .05);
  border-left: 1px solid rgba(255, 255, 255, .08);
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 980px) {
  .cr-hero h1 { letter-spacing: -3px; }
  .cr-hero-grid,
  .cr-feature-layout,
  .cr-faq-grid { grid-template-columns: 1fr; }
  .cr-app-stage { max-width: 620px; margin: auto; width: 100%; }
  .cr-pricing-grid { grid-template-columns: 1fr; max-width: 620px; margin: auto; }
  .cr-price.pro { transform: none; }
  .cr-faq-title { position: static; }
  .cr-navlinks { display: none; }
}

@media (max-width: 680px) {
  .cr-wrap { padding: 0 18px; }
  .cr-navin { height: 68px; }
  .cr-currency { display: none; }
  .cr-topcta { padding: 10px 13px; font-size: 12px; }
  .cr-hero { padding: 62px 0 72px; }
  .cr-hero h1 { font-size: 50px; letter-spacing: -2.8px; }
  .cr-hero-copy { font-size: 17px; }
  .cr-app-stage { min-height: auto; }
  .cr-app { transform: none; }
  .cr-app-shell { grid-template-columns: 54px 1fr; }
  .cr-sidebar { padding: 14px 8px; }
  .cr-screen { padding: 15px; }
  .cr-kpis { grid-template-columns: 1fr 1fr; }
  .cr-kpis .cr-kpi:last-child { display: none; }
  .cr-carrow { grid-template-columns: 42px 1fr .8fr; }
  .cr-carrow > div:last-child { display: none; }
  .cr-float-card { right: 5px; bottom: -34px; }
  .cr-section { padding: 78px 0; }
  .cr-feature-stack { grid-template-columns: 1fr; }
  .cr-feature-main { min-height: 350px; }
  .cr-feature-main h3 { margin-top: 55px; }
  .cr-ctabox { padding: 36px 27px; display: block; }
  .cr-ctabox .cr-btn-main { margin-top: 24px; }
  .cr-trustbar { justify-content: flex-start; }
}