/* =========================
   PRICING SECTION
========================= */

.pricing{
    width:100%;
    padding:70px 24px 120px;
    background:#fff;
}

.pricing-cards{
    width:100%;
    max-width:1250px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(3, 1fr);
    align-items:center;
    gap:18px;
}


/* =========================
   BASE CARD
========================= */

.price-card{
    position:relative;
    min-height:590px;

    padding:42px 38px 34px;

    border-radius:30px;

    display:flex;
    flex-direction:column;

    box-sizing:border-box;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* LEFT - BLACK */

.price-card.dark{
    background:#171923;
    color:#fff;
    border:1px solid #171923;
}


/* MIDDLE - RED / FEATURED */

.price-card.red{
    background:#d92027;
    color:#fff;

    min-height:630px;

    transform:translateY(-25px) scale(1.02);

    z-index:2;

    box-shadow:
        0 25px 55px rgba(217,32,39,.20);
}


/* RIGHT - WHITE */

.price-card.light{
    background:#fff;
    color:#171923;

    border:1px solid #dedfe2;

    box-shadow:0 10px 35px rgba(0,0,0,.04);
}


/* =========================
   CARD HOVER
========================= */

.price-card.dark:hover{
    transform:translateY(-8px);
}

.price-card.red:hover{
    transform:translateY(-32px) scale(1.025);
}

.price-card.light:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.08);
}


/* =========================
   CARD TITLE
========================= */

.price-card h3{
    margin:0 0 18px;

    font-size:28px;
    line-height:1.1;
    letter-spacing:-.035em;

    font-weight:650;
}


/* =========================
   DESCRIPTION
========================= */

.price-desc{
    margin:0;

    max-width:360px;

    font-size:15px;
    line-height:1.65;

    opacity:.72;
}


/* =========================
   PRICE
========================= */

.price{
    display:flex;
    align-items:baseline;
    gap:8px;

    margin:38px 0 28px;
}

.amount{
    font-size:42px;
    line-height:1;

    font-weight:650;
    letter-spacing:-.045em;
}

.period{
    font-size:14px;
    opacity:.65;
}


/* =========================
   BOOK BUTTON
========================= */

.price-card .btn-book.full{
    width:100%;

    min-height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    font-size:16px;
    font-weight:600;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}


/* Dark card button */

.price-card.dark .btn-book.full{
    background:#fff;
    color:#171923;
    border:1px solid #fff;
}


/* Red card button */

.price-card.red .btn-book.full{
    background:#fff;
    color:#d92027;
    border:1px solid #fff;
}


/* Light card button */

.price-card.light .btn-book.full{
    background:#171923;
    color:#fff;
    border:1px solid #171923;
}


.price-card .btn-book.full:hover{
    transform:translateY(-2px);
}


/* =========================
   FEATURES
========================= */

.price-features{
    list-style:none;

    margin:32px 0 0;
    padding:0;

    display:flex;
    flex-direction:column;
    gap:14px;
}

.price-features li{
    position:relative;

    padding-left:25px;

    font-size:14px;
    line-height:1.45;

    opacity:.88;
}

.price-features li::before{
    content:"✓";

    position:absolute;
    left:0;
    top:0;

    font-size:14px;
    font-weight:700;
}


/* =========================
   PAYMENT TEXT
========================= */

.price-secured{
    margin:auto 0 0;
    padding-top:35px;

    font-size:11px;
    opacity:.5;
    text-align:center;
}

.price-secured strong{
    font-weight:700;
}


/* =========================
   PRICING HERO
========================= */

.page-hero{
    width:100%;
    max-width:1000px;

    margin:0 auto;

    padding:110px 24px 55px;

    text-align:center;
}

.page-hero h1{
    margin:22px auto 0;

    max-width:850px;

    font-size:clamp(52px,6vw,82px);

    line-height:.98;

    letter-spacing:-.065em;

    font-weight:650;
}

.section-sub{
    max-width:650px;

    margin:25px auto 0;

    color:#686b73;

    font-size:17px;
    line-height:1.6;
}


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

@media (max-width:900px){

    .pricing{
        padding:50px 20px 90px;
    }

    .pricing-cards{
        grid-template-columns:1fr;
        max-width:550px;
        gap:24px;
    }

    .price-card{
        min-height:auto;
        padding:36px 30px;
    }

    .price-card.red{
        min-height:auto;
        transform:none;
        order:1;
    }

    .price-card.dark{
        order:2;
    }

    .price-card.light{
        order:3;
    }

    .price-card.red:hover{
        transform:translateY(-5px) scale(1.01);
    }

    .price-card.dark:hover,
    .price-card.light:hover{
        transform:translateY(-5px);
    }

    .page-hero{
        padding:80px 20px 40px;
    }

    .page-hero h1{
        font-size:clamp(46px,11vw,65px);
    }
}


@media (max-width:500px){

    .price-card{
        padding:32px 25px;
        border-radius:24px;
    }

    .amount{
        font-size:36px;
    }

    .price-card h3{
        font-size:25px;
    }

    .price-desc{
        font-size:14px;
    }
}




/* =========================================================
   STARTDOT FAQ
   Responsive — Desktop / Tablet / Mobile
========================================================= */

.faq {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;

  padding: 115px 30px 105px;

  text-align: center;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  color: #171923;
  box-sizing: border-box;
}


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

.faq .eyebrow {
  margin: 0 0 25px;

  color: #555861;

  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  letter-spacing: .02em;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.faq > h2 {
  max-width: 1000px;

  margin: 0 auto;

  color: #22242c;

  font-size: clamp(52px, 5.2vw, 82px);
  font-weight: 650;
  line-height: .98;

  letter-spacing: -4px;

  text-align: center;
}


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

.faq-list {
  width: 100%;

  margin-top: 72px;

  display: grid;

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

  column-gap: 6px;
  row-gap: 6px;

  text-align: left;
}


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

.faq-item {
  width: 100%;

  margin: 0;
  padding: 0;

  background: #ffffff;

  border: 1px solid #e1e1e3;
  border-radius: 28px;

  overflow: hidden;

  box-sizing: border-box;

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}


/* subtle hover */

.faq-item:hover {
  border-color: #cfcfd2;
}


/* =========================================================
   QUESTION
========================================================= */

.faq-item summary {
  width: 100%;
  min-height: 94px;

  padding: 0 28px 0 30px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  cursor: pointer;

  list-style: none;

  color: #20222a;

  font-family: inherit;

  font-size: 23px;
  font-weight: 500;

  line-height: 1.25;

  letter-spacing: -.5px;

  box-sizing: border-box;
}


/* remove default arrow */

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  display: none;
}


/* =========================================================
   CHEVRON
========================================================= */

.faq-item .chev {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #171923;

  font-family: Arial, sans-serif;

  font-size: 31px;
  font-weight: 300;

  line-height: 1;

  transform: rotate(90deg);

  transition:
    transform .25s ease,
    background .25s ease;
}


/* open state */

.faq-item[open] .chev {
  transform: rotate(-90deg);
}


/* =========================================================
   ANSWER
========================================================= */

.faq-item > p {
  margin: 0;

  padding: 0 75px 28px 30px;

  color: #666a73;

  font-family: inherit;

  font-size: 16px;
  font-weight: 400;

  line-height: 1.6;

  letter-spacing: -.1px;
}


/* =========================================================
   OPEN CARD
========================================================= */

.faq-item[open] {
  background: #fff;

  border-color: #d7d7da;
}


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

.faq-footer {
  margin: 65px 0 0;

  color: #62666f;

  font-family: inherit;

  font-size: 19px;
  font-weight: 400;

  line-height: 1.6;

  text-align: center;
}


/* =========================================================
   CONTACT SUPPORT
========================================================= */

.faq-footer .contact-support {
  display: inline-flex;

  margin-top: 3px;

  color: #25272e;

  font-family: inherit;

  font-size: 19px;
  font-weight: 600;

  text-decoration: none;

  transition:
    color .2s ease,
    transform .2s ease;
}

.faq-footer .contact-support:hover {
  color: #d92027;
  transform: translateX(3px);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

  .faq {
    max-width: 1380px;
    padding-top: 120px;
  }

  .faq > h2 {
    font-size: 82px;
  }

  .faq-list {
    margin-top: 76px;
  }

  .faq-item summary {
    min-height: 96px;
    padding-left: 31px;
    padding-right: 28px;

    font-size: 24px;
  }
}


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

@media (max-width: 1000px) {

  .faq {
    padding: 90px 24px 85px;
  }

  .faq > h2 {
    font-size: clamp(48px, 7vw, 65px);
    letter-spacing: -3px;
  }

  .faq-list {
    margin-top: 55px;

    column-gap: 5px;
    row-gap: 5px;
  }

  .faq-item {
    border-radius: 23px;
  }

  .faq-item summary {
    min-height: 82px;

    padding: 0 22px;

    font-size: 18px;
  }

  .faq-item .chev {
    width: 27px;
    height: 27px;
    flex-basis: 27px;

    font-size: 27px;
  }

  .faq-item > p {
    padding: 0 55px 25px 22px;

    font-size: 15px;
  }

  .faq-footer {
    margin-top: 50px;
    font-size: 17px;
  }

  .faq-footer .contact-support {
    font-size: 17px;
  }
}


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

@media (max-width: 700px) {

  .faq {
    width: 100%;

    padding: 72px 18px 75px;
  }


  /* eyebrow */

  .faq .eyebrow {
    margin-bottom: 18px;

    font-size: 11px;
  }


  /* heading */

  .faq > h2 {
    max-width: 100%;

    font-size: clamp(40px, 11vw, 54px);

    line-height: .98;

    letter-spacing: -2.5px;
  }


  /* one column */

  .faq-list {
    margin-top: 42px;

    display: grid;

    grid-template-columns: 1fr;

    gap: 8px;
  }


  /* card */

  .faq-item {
    border-radius: 20px;
  }


  /* question */

  .faq-item summary {
    min-height: 76px;

    padding: 0 18px;

    gap: 15px;

    font-size: 16px;

    line-height: 1.3;

    letter-spacing: -.25px;
  }


  /* chevron */

  .faq-item .chev {
    width: 25px;
    height: 25px;

    flex-basis: 25px;

    font-size: 25px;
  }


  /* answer */

  .faq-item > p {
    padding: 0 42px 22px 18px;

    font-size: 14px;

    line-height: 1.55;
  }


  /* footer */

  .faq-footer {
    margin-top: 40px;

    padding: 0 10px;

    font-size: 15px;

    line-height: 1.55;
  }

  .faq-footer .contact-support {
    margin-top: 2px;

    font-size: 15px;
  }
}


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

@media (max-width: 400px) {

  .faq {
    padding: 60px 15px 65px;
  }

  .faq > h2 {
    font-size: 39px;
    letter-spacing: -2px;
  }

  .faq-list {
    margin-top: 35px;
    gap: 7px;
  }

  .faq-item {
    border-radius: 18px;
  }

  .faq-item summary {
    min-height: 70px;

    padding: 0 16px;

    font-size: 15px;
  }

  .faq-item .chev {
    width: 23px;
    height: 23px;
    flex-basis: 23px;

    font-size: 23px;
  }

  .faq-item > p {
    padding: 0 35px 20px 16px;

    font-size: 13.5px;
  }

  .faq-footer {
    margin-top: 35px;
    font-size: 14px;
  }

  .faq-footer .contact-support {
    font-size: 14px;
  }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 340px) {

  .faq {
    padding-left: 13px;
    padding-right: 13px;
  }

  .faq > h2 {
    font-size: 35px;
    letter-spacing: -1.8px;
  }

  .faq-item summary {
    min-height: 66px;
    padding-left: 14px;
    padding-right: 14px;

    font-size: 14px;
  }

  .faq-item > p {
    padding-left: 14px;
    padding-right: 30px;

    font-size: 13px;
  }
}






/* =========================================================
   STARTDOT PRICING — TYPOGRAPHY FIX
========================================================= */

html,
body {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body * {
  font-family: inherit;
}


/* HEADER */
#site-header,
#site-header *,
#site-header *::before,
#site-header *::after {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;
}


/* PRICING PAGE */
.pricing,
.pricing *,
.page-hero,
.page-hero *,
.price-card,
.price-card * {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}