/* ==========================================================================
   1. Global styles
   ==========================================================================

   - Fonts and images has to be uploaded to Sanity Studio first
   */

:root {
  --font-family: 'Lato', Arial, sans-serif;
}

/* ==========================================================================
   2. Element styles
   ========================================================================== */

/* --- Button element --- */

button,
input[type='submit'],
a.button {
  color: #fff;
  background: #1c2b3e;
  border: 1px solid #cfe0e8;
  transition: background 0.2s ease;
}

button.primary,
input[type='submit'].primary,
a.button.primary {
  background: #1c2b3e;
  color: #fff;
  border-color: #cfe0e8;
}

button.primary:hover,
input[type='submit'].primary:hover,
a.button.primary:hover {
  background: #14202f;
  color: #fff;
}

button.secondary,
input[type='submit'].secondary,
a.button.secondary {
  background: #1c2b3e;
  color: #fff;
  border-color: #cfe0e8;
}

button.secondary:hover,
input[type='submit'].secondary:hover,
a.button.secondary:hover {
  background: #14202f;
  color: #fff;
}

/* --- Layout element --- */

.layout > .footer {
  background: #1c2b3e;
}

/* ==========================================================================
   3. Component styles
   ========================================================================== */

/* --- Ingress component --- */

.ingress-nav a {
  color: #1c2b3e;
}

.ingress-nav a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.ingress-mobile-nav a {
  color: #1c2b3e;
}

.ingress-mobile-nav a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

@media (max-width: 1140px) {
  .ingress-desktop {
    display: none;
  }

  .ingress-mobile {
    display: block;
  }
}

/* --- Credits component --- */

.credits {
  background: #101b29;
  color: #fff;
}

/* --- Pillars component --- */

.pillars {
  padding-top: 48px;
  color: #fff;
}

.pillars a {
  color: #fff;
}

.pillars-heading {
  font-size: 1.25rem;
}

/* --- Socialmedia component --- */

.socialmedia-icon {
  filter: brightness(0) invert(1);
}

.socialmedia a > span {
  color: #fff;
}

/* --- Newsletter component --- */

.newsletter {
  background: #cfe0e8;
  padding-bottom: 48px;
}

.newsletter-inner {
  max-width: 800px;
  margin-inline: auto;
  background: #f8fbff;
  padding: 48px;
}

/* --- Cards component --- */

.cards {
  justify-content: flex-start;
  text-align: left;
}

.cards-item {
  color: #1c2b3e;
  background: #d4eaff;
  border: 1px solid #cfe0e8;
  box-shadow: none;
  transition: background-color 0.2s, border-color 0.2s;
}

.cards-item:hover,
.card:focus-within {
  background: #c2ddf5;
  border-color: #94b9dc;
  box-shadow: none;
}

/* --- FAQ component --- */

.faq-question {
  background: #f8fbff;
  border-bottom: 1px solid #94b9dc;
}

.faq-question:hover,
.faq-item.open .faq-question {
  background: #d4eaff;
}
/* --- Comparison component --- */

.comparison-table th,
.comparison-table td {
  color: #4c6278;
  border-bottom: 1px solid #cedeea;
  padding: 24px 28px;
  vertical-align: middle;
  font-size: 0.95rem;
  line-height: 1.55;
}

.comparison-table th:first-child {
  width: 24%;
}

.comparison-table tbody th {
  color: #1c2b3e;
}

.comparison-table tr > :last-child {
  color: #1c2b3e;
  background: #fff;
}

.comparison-table tbody tr:last-child > * {
  border-bottom: 0;
}

/* --- Pricing component --- */

.pricing {
  gap: 18px;
  padding: 0;
}

.pricing-plan {
  flex-basis: 280px;
  color: #1c2b3e;
  background: #fff;
  border-color: #d2e0ed;
  padding: 30px;
}

.pricing-plan:nth-child(2) {
  background: linear-gradient(#eaf4ff 0, #f7fbff 45%, #fff 100%);
  border-color: #94b9dc;
}

.pricing-name {
  color: #1c2b3e;
  font-size: 1.15rem;
  font-weight: 700;
}

.pricing-badge {
  color: #28649b;
  background: #e2effd;
  border: 1px solid #b8d2ec;
  text-transform: none;
  font-weight: 600;
}

.pricing-price {
  color: #1c2b3e;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.15;
}

.pricing-info {
  color: #4c6278;
  font-weight: 400;
}

.pricing-features li {
  color: #1c2b3e;
  border: 0;
}

.pricing-plan:nth-child(2) .pricing-button a.button {
  background: #28649b;
  border-color: #28649b;
}

.pricing-plan:nth-child(2) .pricing-button a.button:hover {
  background: #1e4e7b;
}

/* --- Steps component --- */

.steps-item-marker {
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: #28649b;
  text-align: center;
  line-height: 44px;
  font-size: 1.5rem;
  font-weight: 700;
}

/* --- Stats component --- */

.stats dl {
  color: #1c2b3e;
  background: #cfe0e8;
}

.stats dt {
  margin-bottom: 24px;
  line-height: 1;
}

/* --- Contact component --- */

.contact {
  margin: 0 auto 0 0;
  text-align: left;
  background: #f3f8fd;
  border: 1px solid #cedeea;
}

/* --- Pagelist component --- */

.pagelist {
  justify-content: flex-start;
  text-align: left;
}

.pagelist-item {
  box-shadow: none;
  border: 1px solid #cfe0e8;
}

.pagelist-item:hover {
  box-shadow: none;
  background-color: #f3f8fd;
}

/* ==========================================================================
   4. Section styles
   ========================================================================== */

/* --- Homepage hero section --- */

.home-hero .hero {
  background: radial-gradient(
    ellipse at center,
    #fff 35%,
    #f4faff 65%,
    #dceefa 100%
  );
}

.home-hero .hero-overlay {
  width: 62%;
  margin: 0 auto;
}

.home-hero .hero-headline h1 {
  max-width: 12ch;
  margin-inline: auto;
}

.home-hero .hero-subheadline {
  max-width: 52ch;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .home-hero .hero-overlay {
    width: 100%;
  }
}

/* --- Homepage features section --- */

.home-features .page-section {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Homepage how it works section --- */

.home-how-it-works {
  background: #edf5fc;
}

.home-how-it-works .page-section {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Homepage components section --- */

.home-components .page-section {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Homepage pricing section --- */

.home-pricing {
  background: radial-gradient(at 0 45%, #d4eaff 0, transparent 50%),
    radial-gradient(at 100% 75%, #e4eafa 0, transparent 45%), #f6faff;
  padding: 72px 16px;
}

.home-pricing .page-section {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Homepage delivery section --- */

.home-delivery {
  padding-bottom: 72px;
}

.home-delivery .page-section {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Homepage comparison section --- */

.home-comparison {
  background: #edf5fc;
  padding: 72px 24px;
}

.home-comparison .page-section {
  max-width: 1200px;
  margin: 0 auto;
}