/* Let the shared blurred photo, topo lines and ridgeline backdrop show through (same as journal and leaderboard). */
html:has(body.gift-page) { background: var(--bg); }
.gift-page { background: transparent !important; }
/* Gift a Rider Pass page */
.gx { width: min(1100px, 100% - 2.5rem); margin-inline: auto; padding-block: 6.5rem 4rem; position: relative; z-index: 1; }
.gift-page .role:empty { display: none; }
.gxhero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.gxhero h1 { font: 900 clamp(2.4rem, 5vw, 4.2rem)/0.95 var(--font-display); text-transform: uppercase; margin: 0; }
.gxhero h1 span { color: var(--accent); }
.gxhero__sub { margin-top: 1.2rem; max-width: 46ch; color: var(--muted); font-size: var(--text-base, 1.05rem); line-height: 1.6; }
.gxcard { position: relative; padding: 1.8rem; background: linear-gradient(160deg, hsl(22 100% 52% / 0.14), var(--surface) 45%); box-shadow: inset 0 0 0 2px var(--accent), 0 24px 60px rgb(0 0 0 / 0.45); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.gxcard__top { display: flex; justify-content: space-between; align-items: center; }
.gxcard__brand { font: 900 1.3rem/1 var(--font-display); letter-spacing: 0.04em; }
.gxcard__brand span { color: var(--accent); }
.gxcard__tag { font: 700 0.72rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 0.45rem 0.7rem; }
.gxcard__price { margin: 1.2rem 0 0.2rem; color: var(--muted); font: 700 0.85rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.gxcard__price span { font: 900 3.6rem/0.9 var(--font-display); color: var(--accent); margin-right: 0.35rem; letter-spacing: 0; }
.gxcard .checks { margin: 1.2rem 0 1.4rem; }
.gxcard__terms { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.gxcode { display: block; margin: 1.1rem 0 0.4rem; padding: 1rem; text-align: center; font: 700 clamp(1.15rem, 3.4vw, 1.6rem)/1 var(--font-mono); letter-spacing: 0.06em; white-space: nowrap; background: hsl(0 0% 0% / 0.35); box-shadow: inset 0 0 0 1px var(--border); user-select: all; }
.gxcard--code h2 { font: 900 2rem/1 var(--font-display); text-transform: uppercase; margin: 1rem 0 0.3rem; }
.gxcard--code .gxto { color: var(--muted); margin: 0; }
.gxcard--code blockquote { margin: 1rem 0 0; padding-left: 0.9rem; border-left: 3px solid var(--accent); color: var(--fg); font-style: normal; }
.gxcard--code .gxbtns { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.gxcard--code .gxhow2 { margin-top: 1.1rem; color: var(--muted); font-size: 0.85rem; line-height: 1.55; }
.gxhow { margin-top: 4rem; }
.gxhow h2 { font: 900 2rem/1 var(--font-display); text-transform: uppercase; }
.gxsteps { list-style: none; counter-reset: s; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gxsteps li { counter-increment: s; padding: 1.3rem 1.2rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.gxsteps li::before { content: counter(s, decimal-leading-zero); display: block; font: 900 1.8rem/1 var(--font-display); color: var(--accent); margin-bottom: 0.6rem; }
.gxsteps strong { display: block; color: var(--fg); margin-bottom: 0.25rem; }
@media (max-width: 820px) { .gxhero { grid-template-columns: 1fr; gap: 2rem; } .gxsteps { grid-template-columns: 1fr; } }
@media print {
  .mbar, .pbg, .gxhero__copy, .gxhow, .footer, .gxbtns, [data-gbuy] { display: none !important; }
  body { background: #fff; } .gx { padding: 0; }
  .gxcard { box-shadow: inset 0 0 0 2px #f60; background: #fff; color: #111; clip-path: none; }
  .gxcard * { color: #111 !important; } .gxcode { background: #f4f4f4; }
}