/*
Theme Name: senvy
Theme URI: https://sendvy.com
Author: sendvy
Author URI: https://sendvy.com
Description: Static homepage with external links only
Version: 1.0
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --ink: #14202b;
  --muted: #65727e;
  --line: #e3eaf0;
  --soft: #f5f8fb;
  --blue: #1769e0;
  --blue2: #0d4fae;
  --green: #23a36d;
  --red: #ef5753;
  --purple: #7459d9;
  --orange: #ee8a35;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background: #fff;
}
a {
  text-decoration: none;
  color: inherit;
}
.container {
  width: min(1180px, calc(100% - 40px));
  margin: auto;
}
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.logo {
  font: 700 25px "Space Grotesk";
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
}
.logo b {
  width: 34px;
  height: 34px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.logo span {
  color: var(--blue);
}
nav {
  display: flex;
  gap: 27px;
}
nav a {
  font-size: 13px;
  font-weight: 700;
  color: #61707c;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 19px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
  transition: 0.2s;
}
.btn.primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 25px #1769e033;
}
.btn.primary:hover {
  background: var(--blue2);
  transform: translateY(-1px);
}
.btn.secondary {
  background: #fff;
  border: 1px solid #d7e0e7;
}
.btn.light {
  background: #fff;
  color: var(--ink);
}
.btn.outline {
  border: 1px solid #ffffff44;
  color: #fff;
}
.btn.small {
  padding: 9px 15px;
}
.btn.full {
  width: 100%;
}
.mobile {
  display: none;
}
.hero {
  padding: 90px 0 80px;
  background: linear-gradient(135deg, #f7fbff, #fff 58%, #f1f6ff);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 55px;
}
.hero-copy label,
.heading label,
.split-show > div > label,
.cta label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--blue);
}
h1,
h2 {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -2.5px;
  line-height: 1.02;
}
h1 {
  font-size: clamp(43px, 5.4vw, 68px);
  margin: 20px 0;
}
h1 em,
h2 em {
  font-style: normal;
  color: var(--blue);
}
.hero-copy > p {
  font-size: 17px;
  color: var(--muted);
  max-width: 570px;
  line-height: 1.8;
}
.actions {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.trust {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 23px;
  color: #65727e;
  font-size: 11px;
  font-weight: 800;
}
.dashboard-wrap {
  position: relative;
}
.dashboard {
  background: #fff;
  border: 1px solid #dbe5ed;
  border-radius: 19px;
  overflow: hidden;
  box-shadow: 0 30px 80px #16304a22;
}
.dash-top {
  height: 55px;
  padding: 0 17px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.dash-top i {
  font-style: normal;
  background: var(--blue);
  color: #fff;
  border-radius: 7px;
  padding: 5px 7px;
  margin-right: 6px;
}
.dash-body {
  display: grid;
  grid-template-columns: 125px 1fr;
  min-height: 390px;
}
.dash-body aside {
  background: #f8fafc;
  padding: 20px 10px;
  display: grid;
  align-content: start;
  gap: 6px;
  color: #71808b;
  font-size: 9px;
}
.dash-body aside span,
.dash-body aside b {
  padding: 10px 8px;
  border-radius: 7px;
}
.dash-body aside b {
  background: #eaf2ff;
  color: var(--blue);
}
.dash-main {
  padding: 21px;
}
.dash-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.dash-title small,
.metrics small,
.panel small,
.dash-title small {
  font-size: 8px;
  color: #8c98a2;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.dash-title h3 {
  font: 700 19px "Space Grotesk";
}
.dash-title button {
  background: var(--blue);
  color: #fff;
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 9px;
  font-weight: 800;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.metrics > div {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px;
}
.metrics b {
  display: block;
  font: 700 20px "Space Grotesk";
}
.metrics i {
  font-style: normal;
  font-size: 8px;
  color: var(--green);
  font-weight: 800;
}
.metrics .warn {
  color: var(--orange);
}
.dash-panels {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 8px;
  margin-top: 8px;
}
.panel {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 13px;
}
.panel h4 {
  font-size: 10px;
  margin-bottom: 8px;
}
.panel h4 a {
  float: right;
  color: var(--blue);
  font-size: 8px;
}
.panel h4 em {
  float: right;
  color: var(--green);
  font-style: normal;
  font-size: 8px;
}
.panel p {
  border-top: 1px solid #eef2f5;
  padding: 9px 0;
  font-size: 8px;
}
.panel p b {
  display: block;
}
.panel p span {
  color: #84909a;
}
.bars {
  height: 110px;
  display: flex;
  align-items: end;
  gap: 6px;
  margin-bottom: 5px;
}
.bars i {
  flex: 1;
  background: linear-gradient(#6ea6f4, #e3efff);
  border-radius: 3px 3px 0 0;
}
.dispatch {
  margin-top: 8px;
  background: #f4f8fc;
  border-radius: 8px;
  padding: 10px;
  font-size: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.dispatch:first-letter {
  color: var(--green);
}
.dispatch span {
  color: #7d8993;
}
.dispatch strong {
  margin-left: auto;
  color: var(--blue);
}
.proof {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.proof .container {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.proof b,
.proof span {
  font-size: 10px;
  letter-spacing: 0.11em;
}
.proof b {
  color: #8a969f;
}
.proof span {
  font-weight: 800;
  color: #697781;
}
.section {
  padding: 105px 0;
}
.split {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 80px;
  align-items: end;
}
.split h2 {
  font-size: 46px;
}
.split p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}
.heading {
  max-width: 720px;
  margin-bottom: 48px;
}
.heading.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.heading h2 {
  font-size: 48px;
  margin-top: 17px;
}
.heading p {
  color: var(--muted);
  margin-top: 17px;
}
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.features article {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 27px;
  min-height: 255px;
  transition: 0.2s;
}
.features article:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px #152c420d;
}
.features article > strong {
  position: absolute;
  right: 17px;
  top: 17px;
  color: #d8e2ea;
  font-size: 25px;
}
.features i {
  width: 42px;
  height: 42px;
  background: #eaf2ff;
  color: var(--blue);
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 900;
  margin-bottom: 27px;
}
.features i.teal {
  background: #e8f8f7;
  color: #159e98;
}
.features i.purple {
  background: #f0edff;
  color: var(--purple);
}
.features i.orange {
  background: #fff1e6;
  color: var(--orange);
}
.features i.red {
  background: #fff0ef;
  color: var(--red);
}
.features i.green {
  background: #eaf8f1;
  color: var(--green);
}
.features i.cyan {
  background: #e9f8fb;
  color: #1599ae;
}
.features i.dark {
  background: #eef1f3;
}
.features h3,
.roles h3 {
  font: 700 19px "Space Grotesk";
}
.features p,
.roles p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin: 8px 0;
}
.features a,
.roles a,
.link {
  font-size: 11px;
  font-weight: 900;
  color: var(--blue);
}
.workflow {
  background: var(--soft);
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.steps article {
  border-top: 2px solid #d8e2e9;
  padding: 25px 25px 0 0;
}
.steps article > b {
  width: 38px;
  height: 38px;
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  margin-bottom: 18px;
}
.steps small {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--blue);
  font-weight: 900;
}
.steps h3 {
  font: 700 18px "Space Grotesk";
  margin: 5px 0;
}
.steps p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}
.split-show {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 80px;
  align-items: center;
}
.split-show h2 {
  font-size: 48px;
  margin-top: 17px;
}
.split-show > div > p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
  margin: 19px 0;
}
.split-show ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 22px 0;
}
.split-show li {
  font-size: 12px;
  color: #56636e;
}
.board {
  background: #f8fafc;
  border: 1px solid #dfe7ed;
  border-radius: 17px;
  padding: 18px;
  box-shadow: 0 24px 65px #152c4214;
}
.board header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.board header small {
  display: block;
  font-size: 8px;
  color: #8b97a2;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.board header b {
  font: 700 18px "Space Grotesk";
}
.board header span {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 8px;
}
.columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.columns > div {
  background: #edf2f5;
  border-radius: 10px;
  padding: 9px;
}
.columns h4 {
  font-size: 8px;
  color: #75828d;
}
.columns h4 b {
  float: right;
  background: #fff;
  padding: 2px 5px;
  border-radius: 4px;
}
.columns h4 .danger {
  color: var(--red);
}
.columns article {
  background: #fff;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  padding: 10px;
  margin-top: 8px;
}
.columns article.active {
  border-color: #b9d6ff;
}
.columns article.alert {
  background: #fffafa;
  border-color: #ffd0cb;
}
.columns article strong,
.columns article small,
.columns article em {
  display: block;
}
.columns article strong {
  font-size: 12px;
}
.columns article small,
.columns article em {
  font-size: 12px;
  color: #7e8a94;
  font-style: normal;
}
.dark {
  background: #101923;
  color: #fff;
  overflow: hidden;
}
.dark .split-show > div > p {
  color: #aebbc6;
}
.dark .split-show > div > label {
  color: #a9ceff;
}
.docs {
  position: relative;
  height: 340px;
}
.doc {
  position: absolute;
  width: 78%;
  height: 215px;
  border-radius: 14px;
  padding: 20px;
  font-size: 9px;
  font-weight: 900;
}
.doc.back {
  right: 0;
  top: 0;
  background: #263442;
  color: #8593a0;
  transform: rotate(5deg);
}
.doc.mid {
  left: 4%;
  top: 42px;
  background: #dbe4ec;
  color: #61717f;
  transform: rotate(-4deg);
}
.doc.front {
  left: 12%;
  top: 78px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 55px #0004;
}
.doc.front > b {
  display: inline-grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  border-radius: 7px;
  width: 32px;
  height: 32px;
}
.doc.front div {
  display: inline-block;
  vertical-align: top;
  margin-left: 7px;
}
.doc.front small,
.doc.front strong {
  display: block;
}
.doc.front small {
  font-size: 7px;
  color: #8b97a2;
}
.doc.front strong {
  font-size: 12px;
}
.doc.front > span {
  float: right;
  color: var(--green);
}
.doc.front hr {
  border: 0;
  border-top: 1px solid #e7edf1;
  margin: 18px 0 13px;
}
.doc.front i {
  display: block;
  height: 6px;
  background: #edf1f4;
  border-radius: 4px;
  margin: 7px 0;
}
.doc.front p {
  border-top: 1px solid #edf1f4;
  margin-top: 17px;
  padding-top: 10px;
  font-size: 8px;
  color: #8b97a2;
}
.doc.front p strong {
  display: inline;
  color: var(--ink);
  font-size: 8px;
}
.roles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.roles article {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}
.roles article > b {
  font-size: 26px;
}
.roles article h3 {
  margin-top: 18px;
}
.roles .featured {
  background: #f4f8ff;
  border-color: #cfe1ff;
}
.analytics {
  background: #f6f9fb;
}
.analytics-card {
  background: #fff;
  border: 1px solid #dfe7ed;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 25px 70px #152c4210;
}
.analytics-card > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.analytics-card header small,
.a-metrics small,
.chart > b,
.analytics-card aside > small {
  font-size: 8px;
  color: #8a969f;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.analytics-card header h3 {
  font: 700 20px "Space Grotesk";
}
.analytics-card header button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  font-size: 8px;
}
.a-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin: 20px 0;
}
.a-metrics > div {
  border: 1px solid var(--line);
  padding: 14px;
  border-radius: 9px;
}
.a-metrics b {
  display: block;
  font: 700 23px "Space Grotesk";
}
.a-metrics i {
  font-size: 8px;
  color: var(--green);
  font-style: normal;
  font-weight: 900;
}
.chart-wrap {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 10px;
}
.chart,
.chart-wrap aside {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}
.line-chart {
  height: 180px;
  margin-top: 15px;
  background: repeating-linear-gradient(
    to bottom,
    #fff 0,
    #fff 44px,
    #eef2f5 45px
  );
  position: relative;
  overflow: hidden;
}
.line-chart:after {
  content: "";
  position: absolute;
  inset: 20px 0 0;
  background: linear-gradient(180deg, #1769e022, transparent);
  clip-path: polygon(
    0 70%,
    14% 54%,
    28% 63%,
    43% 29%,
    58% 41%,
    72% 10%,
    86% 20%,
    100% 3%,
    100% 100%,
    0 100%
  );
  border-bottom: 3px solid var(--blue);
}
.chart footer {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #8b97a2;
}
.ring {
  width: 130px;
  height: 130px;
  margin: 18px auto;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  font: 700 27px "Space Grotesk";
  background:
    radial-gradient(circle, #fff 58%, transparent 59%),
    conic-gradient(var(--blue) 0 94%, #e7edf2 94%);
}
.ring span {
  display: block;
  font: 400 8px "DM Sans";
  color: #7e8993;
}
.chart-wrap aside p {
  border-top: 1px solid var(--line);
  padding: 9px 0;
  font-size: 9px;
  display: flex;
  justify-content: space-between;
}
.chart-wrap aside p b {
  font-size: 10px;
}
.note {
  display: block;
  text-align: center;
  color: #9aa5ae;
  margin-top: 10px;
  font-size: 9px;
}
.portal-card {
  background: linear-gradient(145deg, #fff, #f5f9fc);
  border: 1px solid #dce5ec;
  border-radius: 18px;
  padding: 25px;
  box-shadow: 0 25px 70px #152c4214;
}
.portal-card header {
  display: flex;
  justify-content: space-between;
  color: #87939d;
  font-size: 9px;
  font-weight: 900;
}
.portal-card header b {
  color: var(--ink);
}
.route {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  align-items: center;
  gap: 15px;
  margin: 34px 0;
  font: 700 19px "Space Grotesk";
}
.route i {
  height: 2px;
  background: #bdc9d2;
}
.status {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #f4fbf7;
  border: 1px solid #d9ece3;
  border-radius: 10px;
  padding: 13px;
}
.status > div {
  flex: 1;
}
.status small,
.info small {
  display: block;
  font-size: 7px;
  color: #8b97a2;
  font-weight: 900;
}
.status b {
  font-size: 11px;
}
.status > strong {
  font: 700 20px "Space Grotesk";
  color: var(--green);
}
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 20px 0;
}
.timeline span,
.timeline b {
  font-size: 8px;
  padding-top: 8px;
  border-top: 2px solid #dfe6eb;
  color: #8c98a2;
}
.timeline b {
  color: var(--blue);
  border-color: var(--blue);
}
.info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.info div {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 11px;
}
.info b {
  font-size: 9px;
}
.pricing {
  background: #f6f9fb;
}
.prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.prices article {
  position: relative;
  background: #fff;
  border: 1px solid #dfe7ed;
  border-radius: 16px;
  padding: 29px;
}
.prices article.popular {
  border: 2px solid var(--blue);
  box-shadow: 0 20px 50px #1769e01c;
}
.prices mark {
  position: absolute;
  right: 18px;
  top: -12px;
  background: var(--blue);
  color: #fff;
  border-radius: 20px;
  padding: 5px 9px;
  font-size: 8px;
  font-weight: 900;
}
.prices small {
  font-size: 9px;
  color: var(--blue);
  font-weight: 900;
  letter-spacing: 0.15em;
}
.prices h3 {
  font: 700 24px "Space Grotesk";
  margin: 7px 0;
}
.prices p {
  font-size: 12px;
  color: var(--muted);
}
.prices article > strong {
  display: block;
  font: 700 39px "Space Grotesk";
  margin: 22px 0;
}
.prices article > strong i {
  font: 400 11px "DM Sans";
  color: #8b97a2;
}
.prices ul {
  list-style: none;
  display: grid;
  gap: 9px;
  margin-top: 22px;
  color: #64717c;
  font-size: 11px;
}
.prices li {
  padding-bottom: 9px;
  border-bottom: 1px solid #edf1f4;
}
.cta {
  background: #101923;
  color: #fff;
  text-align: center;
  padding: 110px 0;
  overflow: hidden;
}
.cta h2 {
  font-size: 55px;
  max-width: 850px;
  margin: 18px auto;
}
.cta p {
  max-width: 670px;
  margin: auto;
  color: #aebbc6;
  font-size: 15px;
}
.cta .actions {
  justify-content: center;
}
.cta label {
  color: #a9ceff;
}
footer {
  background: #0b131b;
  color: #fff;
  padding-top: 62px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 30px;
  padding-bottom: 50px;
}
.footer-grid > div:not(:first-child) {
  display: grid;
  align-content: start;
  gap: 9px;
}
.footer-grid h4 {
  font-size: 12px;
}
.footer-grid > div:not(:first-child) a,
.footer-grid p {
  font-size: 11px;
  color: #8795a1;
}
.footer-grid p {
  max-width: 250px;
  margin-top: 15px;
}
.footer-bottom {
  border-top: 1px solid #202b35;
  min-height: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #71808c;
  font-size: 10px;
}
.footer-bottom a {
  margin-left: 18px;
}
@media (max-width: 1050px) {
  .hero-grid,
  .split-show,
  .split {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    text-align: center;
  }
  .hero-copy label,
  .hero-copy .actions,
  .trust {
    justify-content: center;
  }
  .hero-copy > p {
    margin: auto;
  }
  .dashboard-wrap {
    max-width: 780px;
    width: 100%;
    margin: auto;
  }
  .features,
  .roles {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  .chart-wrap {
    grid-template-columns: 1fr;
  }
  .prices {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .container {
    width: min(100% - 28px, 1180px);
  }
  .header nav,
  .header > .container > .btn {
    display: none;
  }
  .mobile {
    display: block;
    position: relative;
    margin-left: auto;
  }
  .mobile summary {
    list-style: none;
    font-size: 23px;
    cursor: pointer;
  }
  .mobile summary::-webkit-details-marker {
    display: none;
  }
  .mobile > div {
    position: absolute;
    right: 0;
    top: 38px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px #14202a1a;
    border-radius: 12px;
    padding: 10px;
    width: 200px;
    display: grid;
  }
  .mobile > div a {
    padding: 9px;
    font-size: 13px;
  }
  .hero {
    padding: 65px 0;
  }
  .hero h1 {
    font-size: 43px;
  }
  .dash-body {
    grid-template-columns: 1fr;
  }
  .dash-body aside {
    display: none;
  }
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-panels {
    grid-template-columns: 1fr;
  }
  .proof .container {
    padding: 18px 0;
    justify-content: flex-start;
  }
  .section {
    padding: 75px 0;
  }
  .split h2,
  .heading h2,
  .split-show h2 {
    font-size: 38px;
  }
  .features,
  .roles,
  .prices {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .steps article {
    border-top: 0;
    border-left: 2px solid #d8e2e9;
    padding: 0 0 28px 20px;
  }
  .columns {
    grid-template-columns: 1fr;
  }
  .columns > div:not(:first-child) {
    display: none;
  }
  .docs {
    height: 300px;
  }
  .doc {
    width: 90%;
  }
  .doc.front {
    left: 3%;
  }
  .a-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .route {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .route i {
    width: 55px;
  }
  .info {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid > div:first-child {
    grid-column: 1/-1;
  }
  .footer-bottom {
    display: block;
    padding: 18px 0;
  }
  .footer-bottom span {
    display: block;
    margin-top: 7px;
  }
  .footer-bottom a {
    margin: 0 14px 0 0;
  }
  .cta h2 {
    font-size: 40px;
  }
  .actions .btn {
    flex: 1;
    min-width: 180px;
  }
}
@media (max-width: 450px) {
  .hero h1 {
    font-size: 38px;
  }
  .hero .actions .btn {
    width: 100%;
  }
  .dash-title button {
    display: none;
  }
  .metrics b {
    font-size: 18px;
  }
  .dashboard {
    border-radius: 13px;
  }
  .floating-card {
    display: none;
  }
  .prices article {
    padding: 24px;
  }
  .docs {
    height: 270px;
  }
  .doc {
    height: 185px;
  }
  .dark {
    padding: 75px 0;
  }
}