/* =========================
   Plans Page – Four Seasons
   Final Production CSS
   ========================= */

.fs-plans{
  background:#fff;
}

/* =========================
   Section rhythm
   ========================= */

.fs-plans .fs-section{
  padding:68px 0;
}

.fs-plans .fs-section.soft{
  background:#f7faf7;
}

.fs-plans .fs-hero{
  padding:68px 0 56px;
}

.fs-plans .fs-divider{
  border:none;
  border-top:1px solid var(--fs-border);
  margin:0;
  display:block !important;
}

/* =========================
   Titles
   ========================= */

.fs-plans .fs-title-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}

.fs-plans .fs-accent-line{
  width:72px;
  height:4px;
  border-radius:999px;
  background:var(--fs-accent);
  margin-bottom:16px;
}

/* =========================
   Hero split
   ========================= */

.fs-plans .fs-split{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(320px, .9fr);
  gap:24px;
  align-items:stretch;
}

.fs-plans .fs-left,
.fs-plans .fs-right,
.fs-plans .fs-col{
  min-width:0;
}

/* =========================
   Layout grids
   ========================= */

.fs-plans .fs-grid.fs-grid-3{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:22px !important;
  align-items:stretch !important;
}

.fs-plans .fs-grid.fs-grid-4{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
}

/* =========================
   Cards
   ========================= */

.fs-plans .fs-card{
  background:#fff;
  border:1px solid var(--fs-border);
  border-radius:20px;
  padding:24px 20px;
  box-shadow:0 10px 28px rgba(10,35,66,.04);
  overflow:visible;
}

.fs-plans .fs-plan-card{
  height:100%;
  display:flex;
  flex-direction:column;
}

.fs-plans .fs-plan-footer{
  margin-top:auto;
  padding-top:16px;
}

/* =========================
   Featured plan
   ========================= */

.fs-plans .fs-featured{
  position:relative;
  border:2px solid var(--fs-accent) !important;
  box-shadow:0 18px 38px rgba(10,35,66,.08) !important;
  transform:translateY(-4px);
}

.fs-plans .fs-featured .fs-tag{
  background:var(--fs-accent) !important;
  color:#fff !important;
  border-color:var(--fs-accent) !important;
  box-shadow:none !important;
}

/* =========================
   Tags
   ========================= */

.fs-plans .fs-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 11px;
  border-radius:999px;
  border:1px solid var(--fs-border);
  background:#f7faf7;
  color:var(--fs-ink);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:12px;
  box-shadow:none;
}

/* =========================
   Copy
   ========================= */

.fs-plans .fs-h1,
.fs-plans .fs-h2,
.fs-plans .fs-h3{
  color:var(--fs-ink);
}

.fs-plans .fs-h1{
  margin:0 0 12px;
}

.fs-plans .fs-h2{
  margin:0;
}

.fs-plans .fs-h3{
  margin:0 0 8px;
}

.fs-plans .fs-p{
  color:var(--fs-gray);
  line-height:1.65;
  margin:0 0 16px;
}

.fs-plans .fs-micro{
  color:var(--fs-gray);
  font-size:14px;
  line-height:1.58;
  margin:0;
}

.fs-plans .fs-plan-subhead{
  margin-top:16px !important;
  margin-bottom:8px !important;
  font-size:16px !important;
}

.fs-plans .fs-plan-highlight{
  font-weight:700;
}

.fs-plans .fs-card-note{
  margin-top:14px;
}

/* =========================
   Signal box
   ========================= */

.fs-plans .fs-signal{
  margin-top:16px;
  padding:13px 14px;
  border:1px solid var(--fs-border);
  border-radius:16px;
  background:#f7faf7;
  font-size:14px;
  line-height:1.5;
  color:var(--fs-gray);
}

/* =========================
   Lists
   ========================= */

.fs-plans .fs-list{
  margin:8px 0 0;
  padding-left:18px;
  color:var(--fs-gray);
}

.fs-plans .fs-list li{
  margin:0 0 8px;
  line-height:1.55;
}

.fs-plans .fs-list li:last-child{
  margin-bottom:0;
}

/* =========================
   CTA rows
   ========================= */

.fs-plans .fs-cta-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.fs-plans .fs-btn{
  white-space:nowrap;
}

/* =========================
   Table
   ========================= */

.fs-plans table{
  width:100%;
  border-collapse:collapse;
  min-width:960px;
}

.fs-plans th{
  text-align:left;
  padding:13px 12px;
  border-bottom:1px solid var(--fs-border);
  color:var(--fs-ink);
  font-size:14px;
  font-weight:800;
  background:#fff;
}

.fs-plans td{
  padding:13px 12px;
  border-bottom:1px solid var(--fs-border);
  color:var(--fs-gray);
  font-size:14px;
  line-height:1.5;
}

.fs-plans tbody tr:last-child td{
  border-bottom:none;
}

.fs-plans .fs-compare-card{
  margin-top:0;
  -webkit-overflow-scrolling:touch;
}

/* =========================
   Enhancement cards
   ========================= */

.fs-plans .fs-mini{
  height:100%;
  padding:16px 16px 14px;
  border:1px solid var(--fs-border);
  border-radius:16px;
  background:#fff;
  font-size:14px;
  line-height:1.55;
  color:var(--fs-gray);
  display:block;
}

.fs-plans .fs-mini strong{
  display:block;
  color:var(--fs-ink);
  font-weight:800;
  margin-bottom:5px;
}

.fs-plans .fs-enhancement-note{
  margin-top:18px !important;
}

.fs-plans .fs-card > .fs-cta-row{
  margin-top:16px !important;
}

/* =========================
   Named spacing helpers
   ========================= */

.fs-plans .fs-hero-cta{
  margin-top:20px;
}

.fs-plans .fs-pricing-card{
  margin-top:18px;
}

.fs-plans .fs-plan-grid{
  margin-top:22px;
}

.fs-plans .fs-plan-cta-row{
  margin-top:16px;
}

.fs-plans .fs-enhancement-card{
  margin-top:18px;
}

.fs-plans .fs-enhancement-grid{
  margin-top:20px;
  margin-bottom:18px;
}

.fs-plans .fs-enhancement-cta{
  margin-top:16px;
}

.fs-plans .fs-steps-grid{
  margin-top:18px;
}

.fs-plans .fs-final-cta-title{
  margin-bottom:8px;
}

.fs-plans .fs-final-cta-row{
  margin-top:0;
}

.fs-plans .fs-final-cta-note{
  margin-top:12px;
}

/* =========================
   Tablet
   ========================= */

@media (max-width: 1180px){
  .fs-plans .fs-grid.fs-grid-4{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1080px){
  .fs-plans .fs-split{
    grid-template-columns:1fr;
    gap:20px;
  }

  .fs-plans .fs-grid.fs-grid-3{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .fs-plans .fs-featured{
    transform:none;
  }
}

/* =========================
   Mobile
   ========================= */

@media (max-width: 767px){

  /* Remove the hero right card on phones */
  .fs-plans .fs-right{
    display:none;
  }

  /* Hide compare table section completely on mobile */
  .fs-plans .fs-section.soft{
    display:none;
  }

  .fs-plans .fs-section{
    padding:40px 0 !important;
  }

  .fs-plans .fs-hero{
    padding:34px 0 30px !important;
  }

  .fs-plans .fs-wrap{
    padding-left:14px;
    padding-right:14px;
  }

  .fs-plans .fs-card{
    padding:16px 12px !important;
    border-radius:16px !important;
  }

  .fs-plans .fs-title-row{
    margin-bottom:6px !important;
  }

  .fs-plans .fs-accent-line{
    width:58px;
    height:3px;
    margin-bottom:12px;
  }

  .fs-plans .fs-h1{
    font-size:30px;
    line-height:1.08;
    margin-bottom:8px !important;
  }

  .fs-plans .fs-h2{
    font-size:22px;
    margin-bottom:0 !important;
  }

  .fs-plans .fs-h3{
    font-size:16px;
    margin-bottom:6px !important;
  }

  .fs-plans .fs-p{
    margin-bottom:12px !important;
    font-size:14px;
    line-height:1.5;
  }

  .fs-plans .fs-micro{
    margin-top:4px !important;
    font-size:12px;
    line-height:1.45 !important;
  }

  .fs-plans .fs-signal{
    margin-top:12px !important;
    padding:11px 12px !important;
    line-height:1.42 !important;
  }

  .fs-plans .fs-grid.fs-grid-3{
    gap:12px !important;
  }

  .fs-plans .fs-grid.fs-grid-4{
    grid-template-columns:1fr !important;
    gap:10px !important;
    align-items:start !important;
  }

  .fs-plans .fs-plan-card > .fs-tag{
    margin-bottom:9px !important;
  }

  .fs-plans .fs-plan-subhead{
    margin-top:10px !important;
    margin-bottom:5px !important;
    font-size:14px !important;
  }

  .fs-plans .fs-list{
    margin-top:4px !important;
    padding-left:16px !important;
  }

  .fs-plans .fs-list li{
    margin-bottom:5px !important;
    line-height:1.42 !important;
  }

  .fs-plans .fs-plan-footer{
    padding-top:10px !important;
    margin-top:10px !important;
  }

  .fs-plans .fs-cta-row{
    gap:7px !important;
    margin-top:10px !important;
  }

  .fs-plans .fs-btn{
    width:100% !important;
    justify-content:center !important;
    min-height:40px !important;
    padding:10px 12px !important;
    font-size:13px !important;
  }

  .fs-plans .fs-mini{
    height:auto !important;
    min-height:0 !important;
    padding:13px 12px !important;
    border-radius:14px !important;
    line-height:1.45 !important;
  }

  .fs-plans .fs-mini strong{
    margin-bottom:4px !important;
  }

  .fs-plans .fs-enhancement-note{
    margin-top:10px !important;
  }

  .fs-plans .fs-card > .fs-cta-row{
    margin-top:12px !important;
  }

  .fs-plans .fs-hero-cta,
  .fs-plans .fs-pricing-card,
  .fs-plans .fs-plan-grid,
  .fs-plans .fs-enhancement-card,
  .fs-plans .fs-enhancement-grid,
  .fs-plans .fs-enhancement-cta,
  .fs-plans .fs-steps-grid{
    margin-top:12px !important;
  }

  .fs-plans .fs-plan-cta-row{
    margin-top:10px !important;
  }

  .fs-plans .fs-card-note{
    margin-top:8px !important;
  }

  .fs-plans .fs-final-cta-title{
    margin-bottom:6px !important;
  }

  .fs-plans .fs-final-cta-note{
    margin-top:8px !important;
  }
}

/* =========================
   Very small phones
   ========================= */

@media (max-width: 420px){

  .fs-plans .fs-section{
    padding:32px 0 !important;
  }

  .fs-plans .fs-hero{
    padding:28px 0 24px !important;
  }

  .fs-plans .fs-card{
    padding:14px 11px !important;
  }

  .fs-plans .fs-h1{
    font-size:28px;
  }

  .fs-plans .fs-h2{
    font-size:21px;
  }

  .fs-plans .fs-p{
    font-size:14px;
  }

  .fs-plans .fs-grid.fs-grid-3{
    gap:10px !important;
  }

  .fs-plans .fs-grid.fs-grid-4{
    gap:8px !important;
  }

  .fs-plans .fs-plan-footer{
    padding-top:9px !important;
    margin-top:9px !important;
  }

  .fs-plans .fs-cta-row{
    gap:6px !important;
  }
}