/* StayOn eSIM — plans.css (plans page only; builds on styles.css tokens) */

.plans-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 1rem; }
.plans-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); max-width: 14ch; }
.plans-hero .lead { color: var(--ink-soft); font-size: 1.2rem; max-width: 36rem; margin-top: 1.25rem; }
.hero-chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 1.75rem 0 0; }
.hero-chips li { display: inline-flex; align-items: center; gap: .45rem; background: var(--white); border: 1px solid var(--line); border-radius: 99px; padding: .5rem .95rem; font-weight: 600; font-size: .95rem; }
.hero-chips svg { width: 1rem; height: 1rem; color: var(--on); }

.trip-plans { padding-block: 2.5rem clamp(3rem, 7vw, 5rem); }
.dest-tabs { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.5rem; }
.dest-tabs [role="tab"] { border: 2px solid var(--line); background: var(--white); color: var(--ink); border-radius: 99px; padding: .7rem 1.15rem; cursor: pointer; font: 700 1rem var(--font-body); display: inline-flex; align-items: center; gap: .55rem; transition: border-color .15s, background .15s, color .15s; }
.dest-tabs [role="tab"]:hover { border-color: var(--signal); }
.dest-tabs [role="tab"] .code { font: 500 .72rem var(--font-mono); opacity: .65; }
.dest-tabs [role="tab"][aria-selected="true"] { background: var(--signal); border-color: var(--signal); color: #fff; }

.dest-banner { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 15rem; color: #fff; display: flex; align-items: flex-end; isolation: isolate; background: var(--ink); }
.dest-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.dest-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6, 12, 28, .88), rgba(6, 12, 28, .25) 75%); }
.dest-banner-copy { padding: clamp(1.25rem, 3vw, 2rem); }
.dest-banner-copy span { font: 500 .78rem var(--font-mono); letter-spacing: .09em; text-transform: uppercase; opacity: .85; }
.dest-banner-copy h2 { color: #fff; margin-top: .3rem; font-size: clamp(2rem, 4.5vw, 3.2rem); }
.dest-banner-copy p { margin-top: .5rem; opacity: .9; }

.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.25rem; }
.tier-card { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; position: relative; transition: transform .25s var(--ease), box-shadow .25s; }
.tier-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tier-card.featured { border-color: var(--signal); box-shadow: 0 0 0 3px var(--tint), var(--shadow); }
.tier-kicker { position: absolute; top: -.8rem; left: 1.4rem; background: var(--pop); color: #fff; font: 600 .68rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: .32rem .7rem; border-radius: 99px; }
.tier-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tier-name { font: 700 1.15rem var(--font-display); letter-spacing: -.01em; }
.tier-days { font: 500 .78rem var(--font-mono); color: var(--ink-soft); background: var(--paper); padding: .25rem .6rem; border-radius: 99px; }
.tier-data { font: 800 4rem/1 var(--font-display); letter-spacing: -.04em; color: var(--signal); }
.tier-data small { font: 700 1.25rem var(--font-display); margin-left: .3rem; color: var(--ink); letter-spacing: 0; }
.tier-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; color: var(--ink-soft); font-size: .97rem; }
.tier-list li { display: flex; gap: .55rem; align-items: flex-start; }
.tier-list svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .22rem; color: var(--on); }
.tier-price { margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.tier-price strong { font: 800 2.2rem var(--font-display); letter-spacing: -.03em; }
.tier-price span { font-size: .88rem; color: var(--ink-soft); }
.price-note { margin-top: 1.25rem; font-size: .92rem; color: var(--ink-soft); }

.included { padding-block: clamp(3.5rem, 8vw, 6rem); }
.included-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 2.5rem; }
.included-grid svg { width: 2.7rem; height: 2.7rem; padding: .7rem; border-radius: 14px; background: var(--tint); color: var(--signal); margin-bottom: .9rem; }
.included-grid p { color: var(--ink-soft); margin-top: .4rem; }

@media (max-width: 1000px) {
  .tier-grid { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; }
  .included-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tier-grid, .included-grid { grid-template-columns: 1fr; }
  .dest-banner { min-height: 13rem; }
}