@charset "UTF-8";
/* ==========================================================================
   NSW Book Publishers — Packages
   Ported from ukpublishinghouse.co.uk/packages.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */
.pkg-hero {
  padding: 100px 0 110px;
  background: linear-gradient(160deg, #1B2E63 0%, #16265C 100%);
  text-align: center;
}
.eyebrow-pill--dark {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.pkg-hero__title {
  max-width: 880px;
  margin: 22px auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -.028em;
  color: #fff;
}
.pkg-hero__title em { font-style: italic; color: var(--red-500); }
.pkg-hero__lede {
  max-width: 740px;
  margin: 0 auto 36px;
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  line-height: 1.7;
  color: rgba(255, 255, 255, .85);
}
.pkg-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* Shared button shapes for this page. */
.pkg-hero .btn,
.pkg-faq__intro .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .005em;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.pkg-hero .btn-red,
.pkg-faq__intro .btn-red { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.pkg-hero .btn-red:hover,
.pkg-faq__intro .btn-red:hover { background: var(--red-600); border-color: var(--red-600); transform: translateY(-1px); }
.pkg-hero .btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.pkg-hero .btn-outline-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.pkg-hero .btn .arr,
.pkg-faq__intro .btn .arr {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  font-size: var(--fs-small);
  line-height: 1;
  transition: transform .25s;
}
.pkg-hero .btn:hover .arr,
.pkg-faq__intro .btn:hover .arr { transform: translateX(3px); }

/* --- Section head --------------------------------------------------------- */
.sec.packages-sec { background: #FBF7F0; padding: 110px 0 130px; }
.packages-sec .head { text-align: center; max-width: 780px; margin: 0 auto 56px; }
.packages-sec .head .eyebrow-pill { margin-bottom: 16px; }
.packages-sec .head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--navy-700);
  margin: 0 0 18px;
}
.packages-sec .head p {
  max-width: 660px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--navy-600);
}

/* --- Compare bar ---------------------------------------------------------- */
.pkg-compare {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto 64px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: 0 18px 38px -22px rgba(27, 46, 99, .25);
}
.pkc-stat { position: relative; text-align: center; padding: 6px 4px; }
.pkc-stat + .pkc-stat::before {
  content: "";
  position: absolute;
  left: -10px; top: 14px; bottom: 14px;
  width: 1px;
  background: var(--rule);
}
.pkc-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--navy-700);
}
.pkc-num span { font-style: italic; color: var(--red-500); margin-left: 2px; }
.pkc-lbl {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-nano);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 860px) {
  .pkg-compare { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
  .pkc-stat:nth-child(odd)::before { display: none; }
}
@media (max-width: 460px) {
  .pkg-compare { grid-template-columns: 1fr; }
  .pkc-stat::before { display: none !important; }
}

/* --- Tier deck ------------------------------------------------------------ */
.pkg-shell { max-width: 1280px; margin: 0 auto; }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
@media (max-width: 991px) { .pkg-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 30px -18px rgba(27, 46, 99, .18);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s;
}
.pkg:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -22px rgba(27, 46, 99, .28);
  border-color: var(--navy-700);
}
.pkg--featured { border-color: var(--red-500); }

/* Corner ribbon: a 170px band rotated 45deg inside a clipped 130px box. */
.pkg-ribbon {
  position: absolute;
  top: 0; right: 0;
  width: 130px; height: 130px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.pkg-ribbon > span {
  position: absolute;
  top: 22px; right: -38px;
  width: 170px;
  padding: 7px 0;
  transform: rotate(45deg);
  background: var(--red-500);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 6px 14px -6px rgba(27, 46, 99, .5);
}

.pkg-header {
  padding: 36px 28px 28px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.pkg-header h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--navy-700);
  margin: 0 0 4px;
}
.pkg-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
}

.pkg-list-wrap { flex: 1 1 0; }
.pkg-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 8px 12px 8px 0;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--red-500) transparent;
}
.pkg-list::-webkit-scrollbar { width: 5px; }
.pkg-list::-webkit-scrollbar-track { background: rgba(27, 46, 99, .06); border-radius: 4px; margin: 4px 0; }
.pkg-list::-webkit-scrollbar-thumb { background: var(--red-500); border-radius: 4px; }
.pkg-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--navy-600);
}
.pkg-list li::before {
  content: "\2713";
  flex: 0 0 auto;
  color: var(--red-500);
  font-weight: 700;
  font-size: var(--fs-micro);
}

.pkg-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin: 18px 28px 28px;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--red-500);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  transition: background .2s, transform .2s;
}
.pkg-cta:hover { background: var(--red-600); transform: translateY(-1px); }

/* FAQ styles moved to components.css — shared with the blog archive. */
/* --- Closing CTA ---------------------------------------------------------- */
.ctabanner {
  padding: 130px 0;
  background: linear-gradient(160deg, #1B2E63 0%, #0E1A45 100%);
  text-align: center;
}
.ctabanner__title {
  max-width: 900px;
  margin: 0 auto 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: #fff;
}
.ctabanner__lede {
  max-width: 640px;
  margin: 0 auto 32px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: rgba(255, 255, 255, .8);
}
.ctabanner-phone { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.ctabanner-phone:hover { border-color: #fff; }

.ctabanner__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  transition: background .2s, border-color .2s, transform .2s;
}
.cta-pill--red { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.cta-pill--red:hover { background: var(--red-600); border-color: var(--red-600); transform: translateY(-2px); }
.cta-pill--dark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); color: #fff; }
.cta-pill--dark:hover { background: rgba(255, 255, 255, .16); border-color: #fff; transform: translateY(-2px); }

@media (max-width: 768px) {
  .pkg-hero { padding: 70px 0 76px; }
  .sec.packages-sec { padding: 76px 0 84px; }
  .sec.pkg-faq { padding: 76px 0; }
  .ctabanner { padding: 84px 0; }
}