/* =====================================================================
   /keyholder: the pass presentation from concepts/keyholder-tv/pass.html
   (intro, two pass slots with pills, the three notes), on site.css tokens.
   Plans below use the account styles (account.css .plan-chooser).
   ===================================================================== */
.khp{--jt-depth:var(--ink); position:relative; overflow:hidden; padding-block:clamp(48px, 6vw, 72px) clamp(56px, 7vw, 104px);
  background:
    radial-gradient(900px 600px at 28% 62%, rgba(255,93,0,.20), transparent 70%),
    radial-gradient(800px 560px at 76% 60%, rgba(255,93,0,.16), transparent 70%),
    linear-gradient(180deg, #0D0B0A, #110C09 55%, var(--ink))}

.khp-label{font-family:var(--font-mono); font-size:11px; font-weight:700; line-height:1.3; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.khp-label--o{color:var(--juice)}

/* intro */
.khp-intro{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:end; padding-top:clamp(0px, 2vw, 24px)}
.khp-intro h1{margin-top:14px; font-size:clamp(64px, 8.4vw, 128px); line-height:.88}
.khp-intro h1 > span{display:block}
.khp-intro__copy > p{max-width:460px; color:var(--muted); font-size:18px; line-height:1.55}
.khp-intro__copy > p b{color:var(--paper)}
.khp-intro .perk-list{margin-top:18px}

/* the two pass slots */
.khp-stage{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; padding-top:40px}
.khp-slot{position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; gap:28px; padding:36px 24px 40px; border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); box-shadow:inset 0 0 0 1px var(--line)}
.khp-slot__head{align-self:stretch; display:flex; justify-content:space-between; align-items:center; gap:12px}
.khp-slot .kpass{--kpass-w:min(360px, 78vw); --kp-ground:#100c0a}
.khp-pill{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:99px; font-family:var(--font-mono); font-size:11px; font-weight:700; line-height:1; letter-spacing:.16em; text-transform:uppercase; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--line); color:var(--muted)}
.khp-pill i{width:8px; height:8px; border-radius:50%; background:#777}
.khp-pill--on{color:var(--ink); background:var(--cream); box-shadow:none}
.khp-pill--on i{background:var(--leaf); box-shadow:0 0 0 3px rgba(40,132,7,.25)}
.khp-controls{align-self:stretch; display:grid; gap:12px; max-width:440px; width:100%; margin:4px auto 0}
.khp-btns{display:flex; gap:12px; flex-wrap:wrap}
.khp-btns .btn--primary{flex:1}
/* pass.html buttons are set in the display face */
.khp-slot .btn{max-width:100%; white-space:normal; text-align:center; font-family:var(--font-display); font-weight:400; font-size:22px; line-height:1; letter-spacing:.08em; text-transform:uppercase; padding:calc(13px + .1em) 26px 13px}
/* Bebas caps sit high in the line box; the extra top padding above centres them optically. */
.khp-slot .btn svg{width:20px; height:20px}
.khp-hint{margin:0; font-size:13px; color:var(--muted); text-align:center}
.khp-hint a{color:var(--cream); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.khp-caption{max-width:360px; text-align:center; color:var(--muted); font-size:14px}
.khp-caption b{color:var(--paper)}

/* notes */
.khp-notes{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:clamp(48px, 6vw, 104px)}
.khp-note{padding:24px; border-radius:20px; background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px var(--line)}
.khp-note h2{margin:10px 0 8px; font-size:34px}
.khp-note p:last-child{color:var(--muted); font-size:15px}

@media (max-width:900px){
  .khp-intro{grid-template-columns:1fr; gap:16px}
  .khp-stage{grid-template-columns:minmax(0,1fr); gap:24px; padding-top:32px}
  .khp-slot{padding:28px 16px 32px; border-radius:22px}
  .khp-notes{grid-template-columns:minmax(0,1fr); gap:16px}
  .khp-slot .btn{font-size:19px}
}
@media (max-width:420px){
  .khp-btns{display:grid; grid-template-columns:1fr}
}