/* Sections */
.sec { margin: 40px 0; }
.sec > h2 { display: flex; align-items: center; gap: 12px; }
.h-i { width: 1.1em; height: 1.1em; color: var(--brand); flex: none; }
.sec-lead { color: var(--muted); max-width: 70ch; }
.sec-tint { background: var(--surface-2); border-radius: 22px; padding: 32px 28px; }
@media (max-width: 560px) { .sec-tint { padding: 24px 16px; border-radius: 18px; } .sec { margin: 32px 0; } }

/* Hero */
.stage {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 24px 0 0; padding: 44px 36px;
  border-radius: 26px; color: #fff;
  background: var(--deep);
  min-height: clamp(430px, 62vh, 640px);
  display: flex; align-items: center;
}
.stage-bg { position: absolute; inset: 0; z-index: -1; }
.stage-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.stage-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(4, 47, 74, .94) 0%, rgba(4, 47, 74, .86) 46%, rgba(3, 92, 142, .55) 100%);
}
.stage-in { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: center; width: 100%; }
.stage-over { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .13); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.stage-over .i { color: var(--gold); }
.stage h1 { color: #fff; margin-bottom: 14px; }
.stage-lead { color: rgba(255, 255, 255, .88); font-size: 1.02rem; max-width: 56ch; }
.stage-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.stage-art { position: relative; }
.stage-art img { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .45)); }
.stage-art::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 112%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(246, 186, 30, .45) 0%, rgba(246, 186, 30, 0) 62%);
  animation: sb-halo 5.5s ease-in-out infinite;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) { .stage-art::before { animation: none; } }

/* Offer ticket (hero + pane) */
.ticket { display: block; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; padding: 18px 20px; margin-top: 18px; }
.pane .ticket { margin-top: 0; }
.ticket-over { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.ticket-cond { display: block; font-size: 13px; opacity: .85; margin-top: 6px; }
.ticket-sum { display: block; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 900; line-height: 1; color: #fff; }
.ticket-plus { display: block; font-size: 14px; margin-top: 6px; color: rgba(255, 255, 255, .9); }
.ticket-terms { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .2); display: grid; gap: 8px; font-size: 13.5px; }
.ticket-terms li { display: flex; align-items: center; gap: 8px; }
.ticket-terms .i { color: var(--gold); width: 18px; height: 18px; }

@media (min-width: 1100px) { .stage .ticket-sm { display: none; } }
@media (max-width: 1099px) {
  .stage-lead { font-size: .96rem; }
}
@media (max-width: 1099px) and (min-width: 700px) {
  .stage-in { grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; }
}
@media (max-width: 699px) {
  .stage-in { grid-template-columns: minmax(0, 1fr); }
  .stage-art { display: none; }
  .stage { padding: 28px 20px; min-height: 0; }
}
@media (max-width: 560px) {
  .stage { padding: 16px 14px; border-radius: 20px; margin-top: 10px; }
  .stage-over { display: none; }
  .stage h1 { font-size: 1.9rem; margin-bottom: 8px; }
  .stage-lead { font-size: .82rem; line-height: 1.38; margin-bottom: 0; }
  .ticket-sm { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; padding: 9px 12px; margin-top: 10px; }
  .ticket-sm .ticket-over { width: 100%; }
  .ticket-sm .ticket-cond { font-size: 12px; }
  .ticket-sm .ticket-cond { width: 100%; }
  .ticket-sm .ticket-sum { width: 100%; font-size: 1.7rem; line-height: 1.05; }
  .ticket-sm .ticket-plus { width: 100%; font-size: 12.5px; margin-top: 2px; }
  .stage-cta { gap: 9px; margin-top: 13px; }
  .stage-cta .btn { width: 100%; min-height: 48px; font-size: 15px; }
}

/* Table of contents */
.toc-wrap { margin: 20px 0 0; }
.toc { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; margin: 0; display: block; }
.toc > summary { background: transparent; }
.toc > summary { display: flex; align-items: center; gap: 10px; padding: 12px 2px; cursor: pointer; color: var(--muted); font-size: 13.5px; font-weight: 700; list-style: none; }
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary .i { width: 17px; height: 17px; flex: none; color: var(--brand); }
.toc > summary h2 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.toc-chev { margin-left: auto; transition: transform .2s linear; }
.toc[open] .toc-chev { transform: rotate(90deg); }
.toc-list { list-style: none; margin: 0; padding: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 20px; }
.toc-list a { font-size: 13.5px; color: #4a5a6b; }
@media (hover: hover) and (min-width: 1024px) { .toc-list a:hover { color: var(--brand); } }

/* Steps */
.ladder { list-style: none; counter-reset: step; margin: 24px 0 0; padding: 0; display: grid; gap: 22px; }
.ladder li { position: relative; padding-left: 62px; counter-increment: step; }
.ladder li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; font-weight: 900; font-size: 18px;
  box-shadow: 0 0 0 5px rgba(3, 92, 142, .12);
}
.ladder li::after { content: ''; position: absolute; left: 21px; top: 48px; bottom: -22px; width: 2px; background: var(--line); }
.ladder li:last-child::after { display: none; }
.ladder h3 { margin-bottom: 4px; }
.ladder p { margin: 0; color: var(--muted); }

/* Feature section with image background */
.sec-shot { position: relative; overflow: hidden; border-radius: 22px; padding: 34px 30px; background: var(--deep); color: #fff; isolation: isolate; }
.shot-bg { position: absolute; inset: 0; z-index: -1; }
.shot-bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.shot-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--deep) 0%, rgba(4, 47, 74, .96) 46%, rgba(4, 47, 74, .3) 100%); }
.sec-shot h2 { color: #fff; }
.sec-shot .h-i { color: var(--gold); }
.sec-shot .sec-lead { color: rgba(255, 255, 255, .84); max-width: 54ch; }
.perks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; max-width: 58ch; }
.perks li { display: flex; gap: 14px; padding: 14px 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; }
.perks .i { width: 26px; height: 26px; color: var(--gold); flex: none; }
.perks strong { display: block; color: #fff; margin-bottom: 2px; }
.perks p { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, .82); }
@media (max-width: 560px) { .sec-shot { padding: 24px 16px; } .shot-bg::after { background: linear-gradient(180deg, rgba(4, 47, 74, .92) 0%, rgba(4, 47, 74, .97) 60%); } }