/* ==========================================================================
   Neon Loyalty Rewards — page-specific styles
   Relies on global tokens from style.css (--neon-magenta/blue/green/gold,
   --bg-deep, --font-display). Scoped under .loy to avoid collisions.
   ========================================================================== */

.loy {
    --blue: var(--neon-blue, #0A8DFC);
    --green: var(--neon-green, #43D605);
    --pink: var(--neon-magenta, #FC00FF);
    --gold: var(--neon-gold, #FFCB3A);
    --loy-ink: #f3f4fb;
    --loy-dim: #9aa3b2;
    color: var(--loy-ink);
    overflow-x: clip;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.loy-bg {
    background:
        radial-gradient(900px 520px at 12% -8%, rgba(252, 0, 255, 0.12), transparent 60%),
        radial-gradient(900px 520px at 92% 4%, rgba(10, 141, 252, 0.12), transparent 60%),
        var(--bg-deep, #050508);
}

.loy section {
    padding: 64px 24px;
}

.loy .loy-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.loy h1,
.loy h2,
.loy h3 {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    line-height: 1.12;
    margin: 0;
}

.loy p,
.loy li {
    font-family: 'Exo 2', sans-serif;
}

.loy .loy-eyebrow {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--green);
    margin: 0 0 12px;
}

.loy h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    font-weight: 800;
}

.loy .loy-section-sub {
    color: var(--loy-dim);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 640px;
    margin: 14px 0 0;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.loy-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-top: 124px;
    padding-bottom: 56px;
}

.loy-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.loy-hero-bg-vid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(7px) saturate(0.9) brightness(0.55);
    transform: scale(1.08); /* hide blur edge bleed */
}

.loy-hero-scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 50% 35%, rgba(5,5,8,0.35) 0%, rgba(5,5,8,0.78) 70%, rgba(5,5,8,0.95) 100%),
        linear-gradient(180deg, rgba(5,5,8,0.55) 0%, rgba(5,5,8,0.85) 100%);
}

.loy-hero .loy-inner {
    position: relative;
    z-index: 1;
}

.loy-hero-display {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.loy-hl-lead {
    font-size: clamp(2.1rem, 6vw, 3.6rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.5px;
    background: linear-gradient(92deg, #ffffff 0%, #cdd5ff 60%, #ffd0fb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.loy-clean {
    position: relative;
    display: block;
    width: min(86vw, 9.5em);
    aspect-ratio: 3923 / 721;
    margin: 2px auto 0;
    font-size: clamp(2.1rem, 6vw, 3.6rem); /* drives the `em`-based width */
}

/* Gold word — the ALWAYS-visible base layer. The masked video (if it renders)
   sits on top of it; if the video/mask fails for any reason, this stays visible
   so the headline is never blank. */
.loy-clean-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.7em;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 0 22px rgba(255, 203, 58, 0.55), 0 0 44px rgba(255, 203, 58, 0.3);
}

/* The video, masked to the CLEAN glyph shape, overlaid on top of the gold word.
   Hidden until @supports confirms masks; never hides the gold base beneath it. */
.loy-clean-vid {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3923 721' preserveAspectRatio='xMidYMid meet' fill='%23fff'%3E%3Cg transform='translate(-56 721) scale(1%2C-1)'%3E%3Cpath transform='translate(0 0)' d='M204 0Q163 0 129.5 20.0Q96 40 76.0 73.5Q56 107 56 148V572Q56 613 76.0 646.5Q96 680 129.5 700.0Q163 720 204 720H774V564H244Q228 564 219.5 556.0Q211 548 211 531V189Q211 173 219.5 164.5Q228 156 244 156H774V0Z'/%3E%3Cpath transform='translate(822 0)' d='M57 0V721H212V156H777V0Z'/%3E%3Cpath transform='translate(1601 0)' d='M58 0V720H723V564H215V438H624V282H215V156H723V0Z'/%3E%3Cpath transform='translate(2367 0)' d='M58 0V572Q58 612.5 78.0 646.25Q98 680 131.75 700.0Q165.5 720 206 720H629Q669.5 720 703.25 700.0Q737 680 757.5 646.25Q778 612.5 778 572V0H621V232H213V0H58ZM213 388H621V564Q621 564 621.0 564.0Q621 564 621 564H213Q213 564 213.0 564.0Q213 564 213 564V388Z'/%3E%3Cpath transform='translate(3203 0)' d='M56 0V720H216L619 240V720H776V0H616L211 482V0Z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3923 721' preserveAspectRatio='xMidYMid meet' fill='%23fff'%3E%3Cg transform='translate(-56 721) scale(1%2C-1)'%3E%3Cpath transform='translate(0 0)' d='M204 0Q163 0 129.5 20.0Q96 40 76.0 73.5Q56 107 56 148V572Q56 613 76.0 646.5Q96 680 129.5 700.0Q163 720 204 720H774V564H244Q228 564 219.5 556.0Q211 548 211 531V189Q211 173 219.5 164.5Q228 156 244 156H774V0Z'/%3E%3Cpath transform='translate(822 0)' d='M57 0V721H212V156H777V0Z'/%3E%3Cpath transform='translate(1601 0)' d='M58 0V720H723V564H215V438H624V282H215V156H723V0Z'/%3E%3Cpath transform='translate(2367 0)' d='M58 0V572Q58 612.5 78.0 646.25Q98 680 131.75 700.0Q165.5 720 206 720H629Q669.5 720 703.25 700.0Q737 680 757.5 646.25Q778 612.5 778 572V0H621V232H213V0H58ZM213 388H621V564Q621 564 621.0 564.0Q621 564 621 564H213Q213 564 213.0 564.0Q213 564 213 564V388Z'/%3E%3Cpath transform='translate(3203 0)' d='M56 0V720H216L619 240V720H776V0H616L211 482V0Z'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    /* Gold fill sits BEHIND the (opaque) video, sharing the same mask, so it is
       perfectly aligned. It only shows through if the video frame never paints. */
    background: linear-gradient(180deg, #ffe9a6 0%, #FFCB3A 55%, #e0a312 100%);
    filter: drop-shadow(0 0 16px rgba(255, 203, 58, 0.65)) drop-shadow(0 0 34px rgba(255, 203, 58, 0.35));
}

/* Where CSS masks work, the masked video (with its aligned gold backing) is the
   headline; hide the separate text fallback so it can't bleed through. */
@supports ((-webkit-mask-image: url(#m)) or (mask-image: url(#m))) {
    .loy-clean-vid { display: block; }
    .loy-clean-fallback { display: none; }
}

/* Squeegee light streak. Purely additive (sits on top); it can never hide the
   headline. Hidden at rest; loyalty.js adds .is-swiping to sweep it across on
   load and each time the hero video loops back to water. */
.loy-clean::after {
    content: "";
    position: absolute;
    inset: -8% -4%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.85) 50%, transparent 58%);
    mix-blend-mode: screen;
    transform: translateX(-130%);
    opacity: 0;
}

.loy-clean.is-swiping::after {
    animation: loy-squeegee 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes loy-squeegee {
    0%   { transform: translateX(-130%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(130%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .loy-hero-bg-vid { display: none; }
    .loy-hero-bg { background: #050508 center/cover no-repeat; }
    /* No moving video; show the static gold word instead. */
    .loy-clean-vid { display: none; }
    .loy-clean-fallback { display: flex; }
    .loy-clean::after { display: none; animation: none; }
}

.loy-hero-sub {
    color: var(--loy-dim);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 660px;
    margin: 18px auto 28px;
}

.loy-hero .hero-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.loy-trust-row {
    display: flex;
    gap: 10px 26px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 28px;
    color: var(--loy-dim);
    font-size: 0.92rem;
}

.loy-trust-row .loy-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.loy-trust-row strong {
    color: var(--loy-ink);
}

.loy-stars {
    color: var(--gold);
    letter-spacing: 2px;
}

/* --------------------------------------------------------------------------
   HOW IT WORKS
   -------------------------------------------------------------------------- */
.loy-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 40px;
}

.loy-step {
    --card-color: var(--blue);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: var(--bg-card, rgba(255, 255, 255, 0.03));
    padding: 28px 24px 26px;
    transition: transform 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow:
        0 0 28px color-mix(in srgb, var(--card-color) 42%, transparent),
        0 4px 24px rgba(0, 0, 0, 0.4);
}

.loy-step:nth-child(1) { --card-color: var(--blue); }
.loy-step:nth-child(2) { --card-color: var(--green); }
.loy-step:nth-child(3) { --card-color: var(--gold); }

.loy-step:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--card-color) 50%, rgba(255, 255, 255, 0.2));
    box-shadow:
        0 0 36px color-mix(in srgb, var(--card-color) 55%, transparent),
        0 8px 40px rgba(0, 0, 0, 0.5);
}

.loy-step .loy-step-num {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(10, 141, 252, 0.5);
    box-shadow: 0 0 14px rgba(10, 141, 252, 0.25);
    margin-bottom: 16px;
}

.loy-step h3 {
    font-size: 1.08rem;
    margin-bottom: 8px;
}

.loy-step p {
    color: var(--loy-dim);
    font-size: 0.94rem;
    line-height: 1.5;
}

.loy-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 34px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid rgba(67, 214, 5, 0.45);
    background: rgba(67, 214, 5, 0.07);
    color: var(--loy-ink);
    font-size: 0.92rem;
    box-shadow: 0 0 18px rgba(67, 214, 5, 0.12);
}

.loy-badge svg {
    width: 17px;
    height: 17px;
    stroke: var(--green);
    flex: none;
}

/* --------------------------------------------------------------------------
   THE ASCENT — Progress Rail (signature element)
   -------------------------------------------------------------------------- */
.loy-rail-shell {
    margin-top: 46px;
    padding: 0 9px;
}

.loy-rail {
    position: relative;
    height: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
}

.loy-rail .fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--blue), var(--green) 38%, var(--pink) 72%, var(--gold));
    /* Resting state: "installed but idle" — dim tube. Hover surges light it up. */
    opacity: 0.32;
    box-shadow: 0 0 8px rgba(252, 0, 255, 0.2);
    /* JS may animate --rail-fill; defaults to 100% so it's correct with JS off */
    width: var(--rail-fill, 100%);
    transition: width 1.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

/* Hover surge — a neon segment in the hovered tier's color flickers on up
   to that tier's checkpoint. JS sets --surge (width) and --surge-color. */
.loy-rail .surge {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    /* Full-rail gradient that keeps each tier's colour at its own stop, so a
       partial reveal shows the journey so far (blue -> green -> pink -> gold). */
    background: linear-gradient(90deg,
        var(--blue) 0%, var(--blue) 25%,
        var(--green) 50%, var(--pink) 75%, var(--gold) 100%);
    /* Reveal only the left portion up to the hovered tier. clip-path keeps the
       gradient fixed to the rail (no stretching) and drop-shadow follows it. */
    clip-path: inset(0 calc(100% - var(--surge, 0%)) 0 0 round 8px);
    filter:
        drop-shadow(0 0 6px rgba(255, 255, 255, 0.5))
        drop-shadow(0 0 14px var(--surge-color, var(--gold)))
        drop-shadow(0 0 26px var(--surge-color, var(--gold)));
    opacity: 0;
    pointer-events: none;
    transition: clip-path 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.loy-rail .surge.flicker {
    animation: loy-neon-on 0.6s both;
}

/* Strobey neon turn-on */
@keyframes loy-neon-on {
    0%   { opacity: 0; }
    4%   { opacity: 0.9; }
    6%   { opacity: 0.1; }
    10%  { opacity: 1; }
    13%  { opacity: 0.2; }
    16%  { opacity: 0.95; }
    20%  { opacity: 0.3; }
    23%  { opacity: 1; }
    27%  { opacity: 0.45; }
    31%  { opacity: 1; }
    39%  { opacity: 0.7; }
    43%  { opacity: 1; }
    100% { opacity: 1; }
}

.loy-rail .chk {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 3px solid var(--bg-deep, #050508);
}

.loy-rail .chk-blue  { left: 2%;  background: var(--blue);  box-shadow: 0 0 12px var(--blue); }
.loy-rail .chk-green { left: 36%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.loy-rail .chk-pink  { left: 70%; background: var(--pink);  box-shadow: 0 0 14px var(--pink); }
.loy-rail .chk-gold  { left: 98%; background: var(--gold);  box-shadow: 0 0 14px var(--gold); }

/* Matching checkpoint flares when its tier is hovered */
.loy-rail .chk {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.loy-rail .chk.lit {
    transform: translate(-50%, -50%) scale(1.4);
    animation: loy-chk-flare 0.55s ease both;
}

@keyframes loy-chk-flare {
    0%   { filter: brightness(0.6); }
    10%  { filter: brightness(2); }
    14%  { filter: brightness(0.8); }
    22%  { filter: brightness(2); }
    100% { filter: brightness(1.6); }
}

@media (prefers-reduced-motion: reduce) {
    .loy-rail .surge.flicker { animation: none; opacity: 1; }
    .loy-rail .chk.lit { animation: none; }
}

.loy-rail-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: #cdd5e3;
}

.loy-rail-labels span {
    flex: 1;
    text-align: center;
}

.loy-rail-labels span:first-child { text-align: left; }
.loy-rail-labels span:last-child  { text-align: right; }

/* Tier cards */
.loy-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 40px;
}

.loy-tier {
    --card-color: var(--blue);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: var(--bg-card, rgba(255, 255, 255, 0.03));
    overflow: hidden;
    padding-bottom: 22px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease;
    /* Always-on colored glow behind the card (matches homepage service cards) */
    box-shadow:
        0 0 30px color-mix(in srgb, var(--card-color) 45%, transparent),
        0 4px 24px rgba(0, 0, 0, 0.4);
}

.loy-tier:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--card-color) 50%, rgba(255, 255, 255, 0.28));
    box-shadow:
        0 0 38px color-mix(in srgb, var(--card-color) 60%, transparent),
        0 8px 40px rgba(0, 0, 0, 0.5);
}

.loy-tier::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    z-index: 2;
}

.loy-tier[data-tier="blue"]::before  { background: var(--blue); }
.loy-tier[data-tier="green"]::before { background: var(--green); }
.loy-tier[data-tier="pink"]::before  { background: var(--pink); }
.loy-tier[data-tier="gold"]::before  { background: var(--gold); }

.loy-tier[data-tier="blue"]  { --card-color: var(--blue); }
.loy-tier[data-tier="green"] { --card-color: var(--green); }
.loy-tier[data-tier="pink"]  { --card-color: var(--pink); }
.loy-tier[data-tier="gold"]  { --card-color: var(--gold); }

.loy-tier-art {
    display: block;
    width: 100%;
    height: auto;
}

.loy-tier-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px 2px;
}

.loy-tier-head h3 {
    font-size: 1.18rem;
}

.loy-threshold {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    color: #cdd5e3;
    white-space: nowrap;
}

.loy-tier ul {
    list-style: none;
    margin: 12px 0 0;
    padding: 0 18px;
}

.loy-tier li {
    position: relative;
    padding: 7px 0 7px 22px;
    color: #c8cfdb;
    font-size: 0.9rem;
    line-height: 1.42;
}

.loy-tier li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 13px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.loy-tier[data-tier="blue"]  li::before { background: var(--blue); }
.loy-tier[data-tier="green"] li::before { background: var(--green); }
.loy-tier[data-tier="pink"]  li::before { background: var(--pink); }
.loy-tier[data-tier="gold"]  li::before { background: var(--gold); }

.loy-tier li.loy-perk-lead {
    padding-left: 0;
    color: var(--loy-dim);
    font-style: italic;
    font-size: 0.85rem;
}

.loy-tier li.loy-perk-lead::before { display: none; }

.loy-ascent-note {
    text-align: center;
    margin-top: 28px;
    color: var(--loy-dim);
    font-size: 0.95rem;
}

.loy-ascent-note strong { color: var(--loy-ink); }

/* --------------------------------------------------------------------------
   WAYS TO EARN
   -------------------------------------------------------------------------- */
.loy-earn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 36px;
}

.loy-earn-item {
    --card-color: var(--green);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: var(--bg-card, rgba(255, 255, 255, 0.03));
    padding: 20px;
    transition: transform 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow:
        0 0 26px color-mix(in srgb, var(--card-color) 40%, transparent),
        0 4px 24px rgba(0, 0, 0, 0.4);
}

.loy-earn-item:nth-child(1) { --card-color: var(--blue); }   /* $1 = 1 pt (base) */
.loy-earn-item:nth-child(2) { --card-color: var(--green); }  /* review bonus */
.loy-earn-item:nth-child(3) { --card-color: var(--blue); }   /* referral (base 150 = Blue) */
.loy-earn-item:nth-child(4) { --card-color: var(--green); }  /* rebooking — Green and up */
.loy-earn-item:nth-child(5) { --card-color: var(--pink); }   /* 1.25x — Pink */
.loy-earn-item:nth-child(6) { --card-color: var(--gold); }   /* 1.5x — Gold */

.loy-earn-item:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--card-color) 50%, rgba(255, 255, 255, 0.2));
    box-shadow:
        0 0 34px color-mix(in srgb, var(--card-color) 52%, transparent),
        0 8px 40px rgba(0, 0, 0, 0.5);
}

.loy-earn-item .loy-earn-pts {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--green);
    display: block;
    margin-bottom: 4px;
}

.loy-earn-item p {
    color: var(--loy-dim);
    font-size: 0.92rem;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   REDEEM
   -------------------------------------------------------------------------- */
.loy-redeem-wrap {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 30px;
    align-items: start;
    margin-top: 36px;
}

.loy-redeem-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
}

.loy-redeem-table th,
.loy-redeem-table td {
    text-align: left;
    padding: 14px 18px;
    font-size: 0.98rem;
}

.loy-redeem-table thead th {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--loy-dim);
    background: rgba(255, 255, 255, 0.04);
}

.loy-redeem-table tbody tr {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.loy-redeem-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.loy-redeem-table .loy-reward {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-weight: 700;
    color: var(--loy-ink);
}

.loy-redeem-table .loy-cost {
    text-align: right;
    color: var(--pink);
    font-weight: 600;
}

.loy-redeem-side .loy-min {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 1.05rem;
    color: var(--loy-ink);
    margin-bottom: 12px;
}

.loy-fineprint {
    color: var(--loy-dim);
    font-size: 0.85rem;
    line-height: 1.55;
    margin-top: 14px;
}

/* --------------------------------------------------------------------------
   ACCORDIONS (FAQ + Terms) — native <details>, no JS
   -------------------------------------------------------------------------- */
.loy-accordion {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--pink);
    border-radius: 12px;
    background: var(--bg-card, rgba(255, 255, 255, 0.03));
    margin-top: 14px;
    overflow: hidden;
}

.loy-accordion > summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 52px 18px 20px;
    position: relative;
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 0.98rem;
    color: var(--loy-ink);
}

.loy-accordion > summary::-webkit-details-marker { display: none; }

.loy-accordion > summary::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--pink);
    border-bottom: 2px solid var(--pink);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease;
}

.loy-accordion[open] > summary::after {
    transform: translateY(-35%) rotate(225deg);
}

.loy-accordion .loy-accordion-body {
    padding: 0 20px 20px;
    color: #c8cfdb;
    font-size: 0.95rem;
    line-height: 1.6;
}

.loy-accordion .loy-accordion-body a {
    color: var(--blue);
}

/* Terms block formatting */
.loy-terms-body h4 {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 0.92rem;
    color: var(--loy-ink);
    margin: 18px 0 6px;
}

.loy-terms-body p { margin: 6px 0; }

.loy-terms-body ul {
    margin: 6px 0 6px 0;
    padding-left: 20px;
}

.loy-terms-body li { margin: 4px 0; }

.loy-terms-effective {
    color: var(--loy-dim);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   FINAL CTA
   -------------------------------------------------------------------------- */
.loy-final {
    text-align: center;
}

.loy-final .hero-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .loy-tiers { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .loy section { padding: 52px 18px; }
    .loy-hero { padding-top: 110px; }
    .loy-steps-grid,
    .loy-earn-grid { grid-template-columns: 1fr; }
    .loy-tiers { grid-template-columns: 1fr; }
    .loy-redeem-wrap { grid-template-columns: 1fr; }
}