.topo path { opacity: .14; }

/* PACKAGES: two side-by-side cards, stacking on narrow screens */
.pkgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 26px 0 10px;
}

.pkg {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(140deg, var(--panel), var(--base2));
  position: relative;
  overflow: hidden;
}

.pkg::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(224, 172, 82, .16);
}

.pkg .k {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 12px;
}

.pkg h2 {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--bone);
}

.pkg .sub {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--pine);
  margin-top: 6px;
}

.pkg > p {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--bone);
  opacity: .9;
}

.incl {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.incl li {
  font-size: 13.5px;
  padding: 6px 12px;
  border: 1px solid rgba(46, 155, 132, .5);
  border-radius: 100px;
  color: var(--pine);
  background: var(--panel);
}

/* price sits at the card foot so both cards line up regardless of copy length */
.price {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.price .lab {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.price .amt {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--sand);
}

/* caveat that applies across both packages, so it sits under the pair */
.build-note {
  margin: 22px 0 0;
  padding: 16px 20px;
  border-left: 2px solid var(--sand);
  background: rgba(224, 172, 82, .05);
  border-radius: 0 10px 10px 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--bone-dim);
}

.build-note span {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sand);
  display: block;
  margin-bottom: 6px;
}

.bespoke {
  margin: 20px 0 0;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(140deg, var(--panel), var(--base2));
  position: relative;
  overflow: hidden;
}

.bespoke::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(224, 172, 82, .16);
}

.bespoke .k {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 12px;
}

.bespoke h3 {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  color: var(--bone);
  letter-spacing: .01em;
}

.bespoke p {
  margin-top: 10px;
  color: var(--bone);
  opacity: .9;
  max-width: 560px;
}

/* secondary line: warranty / fitment caveats sit below the main pitch */
.bespoke p.note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--bone-dim);
  opacity: .95;
}

@media (max-width: 720px) {
  .pkgs { grid-template-columns: 1fr; }
  .pkg { padding: 26px; }
}

@media (prefers-reduced-motion: no-preference) {
  .pkg { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .pkg:nth-child(2) { animation-delay: .07s; }
}

@media print {
  .pkg .sub,
  .bespoke .k { color: #0F6B5F; }
  .price .amt { color: #C4892C; }
}