/* =========================================
   INFO PAGE
========================================= */

.info-page {
  max-width:
    1000px;

  margin:
    0 auto;
}


.info-page-header {
  max-width:
    720px;

  margin:
    0 auto 36px;

  text-align:
    center;
}


.info-page-eyebrow {
  margin-bottom:
    8px;

  color:
    var(--orange);

  font-size:
    0.78rem;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.info-page-header .title {
  margin-bottom:
    14px;

  color:
    var(--navy);
}


.info-page-intro {
  color:
    #64748b;

  font-size:
    1rem;

  line-height:
    1.7;
}


/* =========================================
   HOW IT WORKS
========================================= */

.how-it-works-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    18px;
}


.how-it-works-card {
  padding:
    24px;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    14px;

  box-shadow:
    0 4px 14px
    rgba(
      15,
      23,
      42,
      0.05
    );
}


.how-it-works-number {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    38px;

  margin-bottom:
    16px;

  color:
    var(--navy);

  background-color:
    var(--orange);

  border-radius:
    10px;

  font-weight:
    850;
}


.how-it-works-card h2 {
  margin-bottom:
    8px;

  color:
    var(--navy);

  font-size:
    1rem;

  font-weight:
    800;
}


.how-it-works-card p {
  margin:
    0;

  color:
    #64748b;

  font-size:
    0.88rem;

  line-height:
    1.6;
}


/* =========================================
   SAFETY
========================================= */

.how-it-works-safety {
  margin-top:
    28px;

  padding:
    26px;

  background-color:
    var(--surface-soft);

  border:
    1px solid
    var(--border);

  border-radius:
    14px;
}


.how-it-works-safety .title {
  margin-bottom:
    10px;

  color:
    var(--navy);
}


.how-it-works-safety p {
  max-width:
    760px;

  margin-bottom:
    18px;

  color:
    #64748b;

  line-height:
    1.65;
}


/* =========================================
   ACTIONS
========================================= */

.info-page-actions {
  display:
    flex;

  justify-content:
    center;

  gap:
    12px;

  margin-top:
    30px;
}


.site-orange-button {
  color:
    var(--navy);

  background-color:
    var(--orange);

  border-color:
    var(--orange);

  font-weight:
    800;
}


.site-orange-button:hover {
  color:
    #ffffff;

  background-color:
    var(--orange-dark);

  border-color:
    var(--orange-dark);
}


/* =========================================
   TABLET
========================================= */

@media screen and (max-width: 900px) {

  .how-it-works-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 600px) {

  .info-page-header {
    margin-bottom:
      24px;

    text-align:
      left;
  }


  .how-it-works-grid {
    grid-template-columns:
      1fr;
  }


  .how-it-works-card {
    padding:
      20px;
  }


  .info-page-actions {
    flex-direction:
      column;
  }


  .info-page-actions .button {
    width:
      100%;
  }

}

/* =========================================
   SAFETY PAGE
========================================= */

.safety-section-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    18px;
}


.safety-card {
  padding:
    24px;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    14px;

  box-shadow:
    0 4px 14px
    rgba(
      15,
      23,
      42,
      0.05
    );
}


.safety-card h2 {
  margin-bottom:
    8px;

  color:
    var(--navy);

  font-size:
    1rem;

  font-weight:
    800;
}


.safety-card p {
  margin:
    0;

  color:
    #64748b;

  font-size:
    0.88rem;

  line-height:
    1.65;
}


.safety-warning {
  margin-top:
    22px;

  padding:
    24px;

  background-color:
    #fff7ed;

  border:
    1px solid
    #fed7aa;

  border-radius:
    14px;
}


.safety-warning .title {
  margin-bottom:
    10px;

  color:
    var(--navy);
}


.safety-warning p {
  margin:
    0;

  color:
    #64748b;

  line-height:
    1.65;
}


/* =========================================
   SAFETY MOBILE
========================================= */

@media screen and (max-width: 700px) {

  .safety-section-grid {
    grid-template-columns:
      1fr;
  }

}

/* =========================================
   PROHIBITED ITEMS
========================================= */

.prohibited-items-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    18px;
}


.prohibited-item-card {
  padding:
    24px;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    14px;

  box-shadow:
    0 4px 14px
    rgba(
      15,
      23,
      42,
      0.05
    );
}


.prohibited-item-card h2 {
  margin-bottom:
    8px;

  color:
    var(--navy);

  font-size:
    1rem;

  font-weight:
    800;
}


.prohibited-item-card p {
  margin:
    0;

  color:
    #64748b;

  font-size:
    0.88rem;

  line-height:
    1.65;
}


.prohibited-items-notice {
  margin-top:
    22px;

  padding:
    24px;

  background-color:
    var(--surface-soft);

  border:
    1px solid
    var(--border);

  border-radius:
    14px;
}


.prohibited-items-notice .title {
  margin-bottom:
    10px;

  color:
    var(--navy);
}


.prohibited-items-notice p {
  margin:
    0;

  color:
    #64748b;

  line-height:
    1.65;
}


/* =========================================
   PROHIBITED ITEMS MOBILE
========================================= */

@media screen and (max-width: 700px) {

  .prohibited-items-grid {
    grid-template-columns:
      1fr;
  }

}

/* =========================================
   CONTACT PAGE
========================================= */

.contact-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(260px, 1fr);

  gap:
    22px;
}


.contact-card,
.contact-help-card {
  padding:
    26px;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    14px;

  box-shadow:
    0 4px 14px
    rgba(
      15,
      23,
      42,
      0.05
    );
}


.contact-card .title,
.contact-help-card .title {
  margin-bottom:
    18px;

  color:
    var(--navy);
}


.contact-help-card {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;
}


.contact-help-card a {
  display:
    block;

  width:
    100%;

  padding:
    12px 0;

  color:
    var(--navy);

  border-bottom:
    1px solid
    var(--border);

  font-size:
    0.9rem;

  font-weight:
    700;

  text-decoration:
    none;
}


.contact-help-card a:last-child {
  border-bottom:
    0;
}


.contact-help-card a:hover {
  color:
    var(--orange-dark);
}


/* =========================================
   CONTACT MOBILE
========================================= */

@media screen and (max-width: 768px) {

  .contact-layout {
    grid-template-columns:
      1fr;
  }

}

/* =========================================
   FAQ
========================================= */

.faq-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  margin-top:
    28px;
}


.faq-item {
  padding:
    20px;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    12px;

  box-shadow:
    0 5px 18px
    rgba(
      15,
      23,
      42,
      0.04
    );
}


.faq-item h2 {
  margin-bottom:
    8px;

  color:
    var(--navy);

  font-size:
    1rem;

  font-weight:
    800;
}


.faq-item p {
  margin:
    0;

  color:
    var(--text);

  line-height:
    1.65;
}


.faq-item a {
  display:
    inline-block;

  margin-top:
    10px;

  color:
    var(--orange-dark);

  font-weight:
    750;
}


.faq-item a:hover {
  text-decoration:
    underline;
}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 700px) {

  .faq-item {
    padding:
      17px;
  }

}
/* =========================================
   LEGAL PAGES
========================================= */

.info-page-updated {
  margin-top:
    10px;

  color:
    var(--light-muted);

  font-size:
    0.8rem;
}


.legal-content {
  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;

  margin-top:
    28px;
}


.legal-section {
  padding:
    22px;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    12px;

  box-shadow:
    0 5px 18px
    rgba(
      15,
      23,
      42,
      0.04
    );
}


.legal-section h2 {
  margin-bottom:
    10px;

  color:
    var(--navy);

  font-size:
    1.05rem;

  font-weight:
    800;
}


.legal-section p {
  margin-bottom:
    10px;

  color:
    var(--text);

  line-height:
    1.65;
}


.legal-section p:last-child {
  margin-bottom:
    0;
}


.legal-section a {
  display:
    inline-block;

  margin-top:
    4px;

  color:
    var(--orange-dark);

  font-weight:
    750;
}


.legal-section a:hover {
  text-decoration:
    underline;
}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 700px) {

  .legal-section {
    padding:
      17px;
  }

}


/* =========================================
   ABOUT PAGE
========================================= */

.about-story {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    18px;

  margin-top:
    28px;
}


.about-card {
  padding:
    24px;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    14px;

  box-shadow:
    0 4px 14px
    rgba(
      15,
      23,
      42,
      0.05
    );
}


.about-card h2 {
  margin-bottom:
    8px;

  color:
    var(--navy);

  font-size:
    1rem;

  font-weight:
    800;
}


.about-card p {
  margin:
    0;

  color:
    #64748b;

  font-size:
    0.88rem;

  line-height:
    1.65;
}


.about-community {
  margin-top:
    24px;

  padding:
    26px;

  background-color:
    var(--surface-soft);

  border:
    1px solid
    var(--border);

  border-radius:
    14px;
}


.about-community .title {
  margin-bottom:
    10px;

  color:
    var(--navy);
}


.about-community p {
  margin:
    0;

  color:
    #64748b;

  line-height:
    1.65;
}


@media screen and (max-width: 768px) {

  .about-story {
    grid-template-columns:
      1fr;
  }

}