/* Homepage: packages section (tabs + compact cards). Uses the colour/font variables from index.html */
.hp-packages{padding:14vh 5vw 4vh;border-top:1px solid var(--line)}
.hp-packages__intro{max-width:620px;color:#55555e;font-size:18px;margin:28px 0 30px}
.hp-packages__note{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);color:var(--grey);font-size:14px}

/* Tabs */
.hp-pk-tabs{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;
}
.hp-pk-tabs button{
  font:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;
  background:rgba(255,255,255,.45);border:1px solid var(--line);border-radius:100px;padding:10px 18px;
  transition:background .25s,border-color .25s,color .25s;
}
.hp-pk-tabs button:hover{border-color:var(--ink)}
.hp-pk-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.hp-pk-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Cards */
.hp-pk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-top:14px}
.hp-pk{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:22px;padding:30px 22px 22px;background:rgba(255,255,255,.5);
  transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.2,1);
}
.hp-pk:hover{border-color:var(--ink);transform:translateY(-4px)}
.hp-pk h3{font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1.15;letter-spacing:-.01em}
.hp-pk__desc{color:#5c5c66;font-size:14.5px;line-height:1.45;margin:8px 0 18px;min-height:2.9em}
.hp-pk__price{padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:16px}
.hp-pk__from{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.hp-pk__amt{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.hp-pk__amt b{font-family:var(--display);font-weight:700;font-size:2rem;line-height:1;letter-spacing:-.02em}
.hp-pk__amt i{font-style:normal;color:var(--grey);font-size:15px;font-weight:500}
.hp-pk__amt--custom b{font-size:1.6rem}
.hp-pk ul{list-style:none;flex:1;margin-bottom:20px}
.hp-pk li{position:relative;padding:6px 0 6px 24px;font-size:14.5px;line-height:1.35}
.hp-pk li::before{
  content:"";position:absolute;left:0;top:9px;width:14px;height:14px;border-radius:50%;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center/14px no-repeat;
}
.hp-pk__cta{
  display:flex;justify-content:center;align-items:center;border-radius:100px;padding:13px 18px;
  background:var(--ink);color:var(--bone);font-weight:700;font-size:14px;transition:background .3s;
}
.hp-pk__cta:hover{background:var(--blue)}
.hp-pk__badge{
  position:absolute;top:-12px;left:22px;background:var(--blue);color:#fff;border-radius:100px;padding:4px 12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}
.hp-pk--featured{background:var(--ink);color:var(--bone);border-color:var(--ink);box-shadow:0 22px 50px -24px rgba(36,56,255,.5)}
.hp-pk--featured:hover{border-color:var(--blue)}
.hp-pk--featured .hp-pk__desc{color:#a8a8b2}
.hp-pk--featured .hp-pk__price{border-color:#2a2a33}
.hp-pk--featured .hp-pk__from,.hp-pk--featured .hp-pk__amt i{color:#8a8a96}
.hp-pk--featured .hp-pk__cta{background:var(--bone);color:var(--ink)}
.hp-pk--featured .hp-pk__cta:hover{background:var(--blue);color:#fff}
.hp-pk-more{display:inline-block;margin-top:22px;color:var(--blue);border-bottom:1px solid rgba(36,56,255,.3);font-weight:500}

/* Below 1024px: tabs and cards become one swipeable row each */
@media(max-width:1023px){
  .hp-pk-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -5vw 20px;padding:0 5vw}
  .hp-pk-tabs::-webkit-scrollbar{display:none}
  .hp-pk-tabs button{flex:none}
  .hp-pk-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -5vw;padding:14px 5vw 18px;scroll-padding:0 5vw}
  .hp-pk{flex:0 0 min(300px,80vw);scroll-snap-align:start}
  .hp-pk:hover{transform:none}
}
.hp-packages .hp-pk-tabs{margin-top:34px}