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

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

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

/*
  Text colors
  #161426  Main text, navigation and footer links
  #40132e  Muted text, comparison cells and newsletter pitch
  #efecf4  Primary button text and credits
  #fff     Default button text, partner plan text and step numbers
  #d9183b  Pricing badge text
  #f2c335  Bullets and secondary button hover text
  #8c1f47  Stats arrows

  Background colors
  #161426  Default buttons and primary/secondary button hover
  #8c1f47  Primary buttons, partner plan and hero bubble
  #40132e  Credits
  #efecf4  Footer, search/newsletter inputs, how it works and delivery
  #f2c335  Secondary buttons, newsletter inner and hero bubble
  #ffa644  Cards
  #f0474b  Navigation, hero, card hover/focus and delivery step markers
  #d9183b  Featured pricing button and default step markers
  #a12b13  Featured pricing button hover
  #fff0e5  Reel, contact and pagelist cards
  #ffeca2  Pricing and comparison sections
  #fff     Pricing/stats/delivery cards, pricing badge, contact inputs
           and highlighted comparison column
*/

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

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

button,
input[type='submit'],
a.button {
  color: #fff;
  background: #161426;
  border: 1px solid #ffd6a3;
  transition: background 0.2s ease;
  font-size: 20px;
}

button.primary,
input[type='submit'].primary,
a.button.primary {
  background: #8c1f47;
  color: #efecf4;
  border-color: #8c1f47;
  border-radius: 30px;
  padding: 18px 40px;
}

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

button.secondary,
input[type='submit'].secondary,
a.button.secondary {
  background: #f2c335;
  color: #161426;
  border-color: #f2c335;
  border-radius: 30px;
  padding: 18px 40px;
}

button.secondary:hover,
input[type='submit'].secondary:hover,
a.button.secondary:hover {
  background: #ffa644;
}

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

.layout > .footer {
  background: #efecf4;
  color: #161426;
}

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

/* --- Textblock component --- */

.textblock-content {
  font-size: 20px;
}

.textblock-content ul > li::marker {
  color: #f2c335;
  font-size: 1.3em;
}

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

.ingress-search input,
.ingress-searchbar-mobile input {
  background: #efecf4;
  border-radius: 30px;
}

.ingress-searchbar-mobile button {
  background: transparent;
  border: none;
}

.ingress {
  background: #f0474b;
}

.ingress-nav a {
  color: #161426;
  font-size: 20px;
}

.ingress-nav a.active {
  font-weight: bold;
  text-decoration: none;
}

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

.ingress-mobile-nav a.active {
  font-weight: bold;
  text-decoration: none;
}

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

.credits {
  background: #40132e;
  color: #efecf4;
}

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

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

.pillars a {
  color: #161426;
}

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

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

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

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

.newsletter-inner {
  max-width: 800px;
  margin-inline: auto;
  background: #f2c335;
  border-radius: 30px;
  padding: 48px;
}

.newsletter-pitch {
  color: #40132e;
}

.newsletter-form input.newsletter-input[type='email'] {
  border-radius: 30px;
  padding: 18px 24px;
  background: #efecf4;
}

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

.card {
  background: #ffa644;
  border: 1px solid #ffa644;
  box-shadow: none;
  border-radius: 20px;
  padding: 30px;
  transition: background-color 0.2s, border-color 0.2s;
}

.card:hover,
.card:focus-within {
  background: #f0474b;
  border-color: #fff;
  box-shadow: none;
}

/* --- Comparison component --- */

.comparison-table th,
.comparison-table td {
  color: #40132e;
  border-bottom: 1px solid #f0c8ad;
  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: #161426;
}

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

.comparison-table thead th:last-child {
  border-radius: 30px 30px 0 0;
}

.comparison-table tbody tr:last-child > :last-child {
  border-radius: 0 0 30px 30px;
}

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

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

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

.pricing-plan {
  flex-basis: 280px;
  color: #161426;
  background: #fff;
  border-color: #f2d0b8;
  padding: 30px;
  border-radius: 30px;
}

.pricing-plan:nth-child(2) {
  color: #fff;
  background: #8c1f47;
}

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

.pricing-badge {
  color: #d9183b;
  background: #fff;
  border: 1px solid #f5bb89;
  text-transform: none;
  font-weight: 600;
  border-radius: 16px;
  text-transform: uppercase;
  padding: 6px 8px;
}

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

.pricing-info {
  color: #40132e;
  font-weight: 400;
}

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

.pricing-plan:nth-child(2) .pricing-name,
.pricing-plan:nth-child(2) .pricing-price,
.pricing-plan:nth-child(2) .pricing-info,
.pricing-plan:nth-child(2) .pricing-features li {
  color: #fff;
}

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

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

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

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

/* --- Reel component --- */

.reel {
  background: #fff0e5;
}

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

.stats .stats-data {
  gap: 40px;
}

.stats dl {
  position: relative;
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #161426;
  background: #f0474b;
  border: 3px solid #161426;
  border-radius: 20px;
  padding: 24px;
  text-align: center;
}

.stats-data > dl:not(:last-child)::after {
  content: '\2192';
  position: absolute;
  top: 50%;
  left: calc(100% + 2px);
  width: 40px;
  color: #8c1f47;
  font-size: 32px;
  line-height: 40px;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .stats .stats-data {
    flex-direction: column;
  }

  .stats-data > dl:not(:last-child)::after {
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}

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

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

.contact {
  background: #fff0e5;
  border-radius: 30px;
  border: 1px solid #f0474b;
}

.contact input,
.contact textarea {
  border-color: #f5bb89;
  border-radius: 20px;
  background: #fff;
}

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

.pagelist-image {
  border-radius: 20px;
}

.pagelist-item {
  box-shadow: none;
  border: 1px solid #f5bb89;
  border-radius: 20px;
  background-color: #fff0e5;
}

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

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

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

.home-hero .hero {
  background: #f0474b;
}

.home-hero .hero-inner {
  max-width: 1164px;
  margin-inline: auto;
}

.home-hero .hero-overlay {
  width: 52%;
  text-align: left;
}

.home-hero .hero-links {
  justify-content: flex-start;
}

/* --- Homepage hero section BUBBLES --- */
.home-hero .hero::before,
.home-hero .hero::after {
  content: '';
  position: absolute;
  top: 22%;
  right: 12%;
  width: clamp(160px, 21vw, 290px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: #d83e42;
  background: currentColor;
  pointer-events: none;
  animation: fire-bubble-float 7s ease-in-out infinite alternate;
}

.home-hero .hero::after {
  top: 60%;
  right: 8%;
  width: clamp(110px, 14vw, 190px);
  box-shadow: -170px 30px 0 -40px currentColor;
  animation-duration: 9s;
  animation-delay: -3s;
}

@keyframes fire-bubble-float {
  to {
    transform: translate(-12px, -28px) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .hero::before,
  .home-hero .hero::after {
    animation: none;
  }
}

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

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

.home-features .page-section {
  max-width: 1100px;
  margin: 0 auto;
}
/* --- Homepage how it works section --- */

.home-how-it-works {
  background: #fff;
  padding: 72px 0;
}

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

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

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

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

.home-pricing {
  background: #ffeca2;
  padding: 72px 24px;
}

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

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

.home-delivery {
  background: #efecf4;
  padding: 72px 24px;
}

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

.home-delivery .steps-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.home-delivery .steps-item {
  flex: 1 1 400px;
  min-width: 0;
  margin: 0;
  padding: 20px 32px;
  background: #fff;
  border-radius: 20px;
  gap: 20px;
}

.home-delivery .steps-item-marker {
  background: #f0474b;
}

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

.home-comparison {
  background: #ffeca2;
  padding: 72px 24px;
}
.comparison-table {
  border-radius: 30px;
  border-collapse: separate;
  border-spacing: 0;
}

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

.home-comparison .page-section-header {
  max-width: 820px;
  margin: 0 auto 48px;
  text-align: center;
}