/* ================================================================
   GAIN ACCESS page (page-gainaccess.php). Moved out of the template; the
   explore-shell layout was replaced by normal page flow + the page head.
   Tokens: tcn-base.css section 0.
   ================================================================ */
/* ═══ GAIN ACCESS PAGE ═══ */
/* Same purple→teal brand gradient as the homepage hero (front-page.php's
   --fp-gradient) — redefined here since this page has its own stylesheet
   and never loads front-page.php's. Used to give the QR button and the
   page title the same vibrant identity instead of the flat near-solid
   green the QR button had (a gradient from teal to a near-identical teal
   reads as flat, not as a gradient). */
/* ═══ PAGE FLOW (replaces the fixed explore shell) ═══ */
.ga-page { min-height: 0; padding: 0; }
.ga-screen { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
.ga-panes { padding: 8px 0 120px; }
.ga-pane { display: none; }
.ga-pane.on { display: block; animation: gaPaneIn .18s ease; }
@keyframes gaPaneIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ga-panes .ga-how { max-width: 760px; margin: 0 auto; padding: 8px 4px 12px; }
.ga-panes .ga-how--flush { margin-top: 0; }
/* its own pane now, so the leftover step badge is just noise; steps stay numbered in the How It Works pane */
.ga-pane[data-ga-pane="unlock"] .ga-flow-badge, .ga-pane[data-ga-pane="browse"] .ga-flow-badge { display: none; }
.ga-pane[data-ga-pane="unlock"] .ga-flow-step, .ga-pane[data-ga-pane="browse"] .ga-flow-step { gap: 0; }
.ga-pane[data-ga-pane="browse"] .ga-section-title { display: none; }
.ga-panes .ga-recent { margin: 0 auto; padding: 0; }
.ga-panes .ga-faq { margin: 0 auto; padding: 0; }
.ga-panes .ga-feature-section { margin: 0 auto 18px; padding: 0; }
.ga-dept-badge { display: inline-block; margin-left: 8px; padding: 2px 9px; border: 1px solid var(--line-strong); border-radius: 99px; font-size: 11px; letter-spacing: .06em; vertical-align: 1px; color: var(--ink); }
/* the dock: one floating pill group, pinned to the bottom of the viewport */
.ga-dock { position: sticky; bottom: 18px; z-index: 50; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: max-content; max-width: calc(100% - 24px); margin: 0 auto; padding: 6px;
  background: color-mix(in srgb, var(--paper) 88%, transparent); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 14px 50px rgba(0,0,0,.45); backdrop-filter: blur(22px); }
.ga-bd { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 12px var(--dp-sans); cursor: pointer; transition: background .2s, color .2s; }
.ga-bd:hover { color: var(--ink); }
.ga-bd.on { background: var(--panel-2); color: var(--inverse); }
.ga-bd-i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(255,255,255,.08); }
.ga-bd.on .ga-bd-i { background: rgba(8,8,8,.12); }
@media (max-width: 900px) { .ga-screen { width: min(100% - 36px, 760px); } .ga-dock { bottom: 90px; } .ga-bd { padding: 8px 12px 8px 8px; font-size: 11.5px; } }

/* ═══ TOAST — inline redeem feedback, replaces alert() ═══ */
.ga-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--clr-text-main);
  color:var(--inverse);
  padding: 14px 22px;
  border-radius: 12px;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(0,0,0,.2);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  max-width: min(90vw, 420px);
  text-align: center;
}
.ga-toast.ga-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ga-toast.ga-toast--error { background: #dc2626; }

/* ═══ CHANNEL FEATURE SECTION — was a fixed-overlay popup
   (.ga-channel-modal), now a real panel in the page flow. Same
   .ga-channel-group*/.ga-channel-asset markup and CSS as before, only the
   outer shell changed from a fixed backdrop to an inline card. ═══ */
.ga-feature-section { margin: 28px auto 0; max-width: 900px; padding: 0 24px; scroll-margin-top: 90px; }
.ga-feature-inner {
  position: relative;
  background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.18); padding: 32px 28px;
}
.ga-feature-close {
  position: absolute; top: 14px; right: 18px; background: none; border: none;
  color: var(--clr-text-muted); font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.ga-feature-close:hover { color: var(--clr-text-main); }
.ga-feature-head { margin: 0 28px 1.25rem 0; }
.ga-feature-eyebrow { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--clr-text-muted); margin-bottom: .25rem; }
.ga-feature-title { font-family:var(--dp-serif); font-size: 1.3rem; margin: 0; color: var(--clr-text-main); text-transform: uppercase; }
.ga-feature-loading, .ga-feature-empty { color: var(--clr-text-muted); font-size: .85rem; text-align: center; padding: 24px 0; }
.ga-feature-terminal-slot:empty { display: none; }
.ga-feature-terminal-slot .ga-terminal-wrap { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--clr-border); }
.ga-channel-group + .ga-channel-group { margin-top: 10px; }
.ga-channel-group-h {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  padding: 10px 14px; font-family: Inter, sans-serif; font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--clr-text-main); cursor: pointer;
}
.ga-channel-group-h span { transition: transform .2s; color: var(--clr-text-muted); font-size: .7rem; }
.ga-channel-group.open .ga-channel-group-h span { transform: rotate(180deg); }
.ga-channel-group-list { display: none; flex-direction: column; gap: 4px; padding: 8px 4px 2px; }
.ga-channel-group.open .ga-channel-group-list { display: flex; }
.ga-channel-asset {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--clr-text-main); font-size: .85rem; font-weight: 600;
  background: none; border: none; width: 100%; text-align: left; cursor: pointer; font-family: Inter, sans-serif;
  transition: background .15s;
}
.ga-channel-asset:hover { 
rgba(255,255,255,.04); }
.ga-channel-asset img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }

/* the redeem box is the placeable widget: assets/widgets/redeem.css */
.ga-terminal-wrap { margin: 0 0 8px; }

/* ═══ HOW IT WORKS — a vertical flow (numbered badge + content, left to
   right) instead of 3 side-by-side cards. Step 1 and step 3 sit in their
   own .ga-how card; step 2 (.ga-how--flush) drops the card chrome and
   padding so it sits flush on top of the real mechanism directly below
   it — visually "step 2" is the mechanism, not a separate summary of it. ═══ */
.ga-how { max-width: 720px; margin: 0 auto; padding: 40px 1.5rem 8px; }
/* Same box as .ga-how (same max-width + horizontal padding) so step 2's
   text lines up with step 1 and step 3 instead of stretching full-width
   and left-aligning with the department sidebar below it — that mismatch
   was the "text seems aligned off" look. Only the bottom padding changes,
   so it still sits close against the mechanism directly under it. */
.ga-how--flush { padding-bottom: 0; }
/* Default assumes the dark .ga-page canvas directly behind it (step 3,
   "Your Recent Unlocks", FAQ) — .ga-how-panel below flips these back to
   dark-on-light for the one context (steps 1+2) where they sit on white. */
.ga-section-title { text-align: center; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 900; color: var(--ink); margin-bottom: 2rem; letter-spacing: 1px; }
.ga-section-sub { text-align: center; color: var(--muted); font-size: .85rem; margin-top: -.75rem; margin-bottom: 2rem; }

.ga-flow-step { display: flex; gap: 20px; align-items: flex-start; }
.ga-flow-badge {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--fp-gradient); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family:var(--dp-serif); font-size: 1.05rem;
  box-shadow: 0 6px 16px rgba(139,92,246,.3); text-transform: uppercase; }
.ga-flow-content { flex: 1; min-width: 0; padding-top: 4px; }
.ga-flow-content h3 { color: var(--ink); font-size: 1.05rem; font-weight: 800; margin: 0 0 0.4rem; }
.ga-flow-content p { color: var(--muted); font-size: 0.88rem; line-height: 1.55; margin: 0; }
.ga-flow-content a { color: var(--clr-primary); }

.ga-how-panel .ga-section-title { color: var(--clr-text-main); }
.ga-how-panel .ga-flow-content h3 { color: var(--clr-text-main); }
.ga-how-panel .ga-flow-content p { color: var(--clr-text-muted); }

/* Step 1's real, clickable public codes */
.ga-step-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; position: relative; z-index: 1; }
.ga-step-chip {
  display: inline-flex; align-items: center; gap: 5px; background: rgba(var(--dept-rgb,13,148,136),.08);
  border: 1px solid rgba(var(--dept-rgb,13,148,136),.25); border-radius: 999px; padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  color: var(--dept-color, var(--clr-primary)); cursor: pointer; transition: background .2s, transform .15s;
}
.ga-step-chip:hover { background: rgba(var(--dept-rgb,13,148,136),.16); transform: translateY(-1px); }
.ga-step-chip-lock { font-size: .65rem; }
.ga-step-hint { margin-top: .6rem !important; font-size: .72rem !important; font-style: italic; }

/* ═══ RECENT UNLOCKS ═══ */
.ga-recent { max-width: 900px; margin: 4rem auto 0; padding: 0 1.5rem; }
.ga-recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.ga-recent-card {
  display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: var(--clr-surface);
  border: 1px solid var(--clr-border); border-radius: var(--radius-sm); text-decoration: none; transition: border-color 0.2s;
}
.ga-recent-card:hover { border-color: rgba(13,148,136,.2); }
.ga-recent-thumb {
  width: 52px; height: 52px; border-radius: 0.5rem; background-size: cover;
  background-position: center; flex-shrink: 0;
}
.ga-thumb-empty { background: var(--clr-surface-light); display: flex; align-items: center; justify-content: center; }
.ga-thumb-empty span { font-size: 0.6rem; font-weight: 800; color: var(--clr-text-muted); letter-spacing: 0.1em; }
.ga-recent-info { min-width: 0; }
.ga-recent-type { display: block; font-size: 0.6rem; font-weight: 700; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.ga-recent-title { display: block; color: var(--clr-text-main); font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-recent-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; margin-top: 0.25rem; }
.ga-badge-perm { color: var(--clr-primary); }
.ga-badge-time { color: #d97706; }

@media (max-width: 768px) {
  .ga-flow-badge { width: 32px; height: 32px; font-size: .9rem; }
}

/* ═══ DEPARTMENTS SECTION — same dpt2 grid/detail screen-switcher as /departments/ and /channels/ ═══ */
.ga-dept-grid { max-width: 100%; }

/* Showcase graphic between step 2 and step 3 — same glow-pedestal +
   drop-shadow treatment as the homepage hero photo (.fp-hero-sales__photo)
   so it reads as part of the same design language, not a bare pasted-in
   image floating on the dark canvas. */
.ga-showcase-graphic {
    position: relative; display: flex; align-items: center; justify-content: center;
    max-width: 1000px; margin: 0 auto; padding: 8px 1.5rem 24px;
}
.ga-showcase-graphic::before {
    content: ''; position: absolute; width: 55%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.30), rgba(18,196,139,.16) 55%, transparent 75%);
    filter: blur(30px); z-index: 0;
}
.ga-showcase-graphic__img {
    position: relative; z-index: 1; display: block; width: 100%; max-width: 620px; height: auto;
    filter: drop-shadow(0 24px 48px rgba(0,0,0,.45));
}
@media (max-width: 640px) {
    .ga-showcase-graphic__img { max-width: 360px; }
}

/* Steps 1+2 ("How It Works") as one white panel on the dark .ga-page
   canvas — same .fp-panel principle as the homepage, so this page doesn't
   read as a flat-white section butting up against a dark one below it. */
.ga-how-panel {
    max-width: 760px; margin: 48px auto; padding: 40px;
    background: var(--panel); border-radius: var(--radius-lg, 14px);
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.ga-how-panel .ga-how,
.ga-how-panel .ga-how--flush { max-width: none; padding: 0; }
.ga-how-panel .ga-how--flush { margin-top: 32px; }
@media (max-width: 640px) {
    .ga-how-panel { margin: 32px auto; padding: 28px 20px; }
}

.dpt2-screen--grid { display: none; }
.dpt2-screen--grid.active { display: block; }
.dpt2-screen--detail { display: none; }
.dpt2-screen--detail.active { display: block; animation: dpt2Fade .3s ease; }
@keyframes dpt2Fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Header sits transparent on this hero's gradient, same as /departments/,
   /music/, etc. (inc/tcn-dpt2-showcase.php) — the hero is pulled up under
   the sticky header (negative margin), with matching extra top padding so
   the title itself isn't hidden underneath. This page only had the
   transparent-background half of that treatment, not the white-nav-text
   half, so the logo/links rendered in their default dark color directly on
   the gradient — inconsistent with every other transparent-hero page. */

.dpt2-detail-hero {
    position: relative; overflow: hidden;
    margin-top: calc(-1 * var(--header-height));
    padding: calc(64px + var(--header-height)) var(--sp-lg) 48px;
    background: var(--clr-bg);
}
.dpt2-detail-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at top, rgba(18,196,139,.10), transparent 60%);
}
/* Softens the hard cutoff where the gradient hero meets the flat dark
   canvas below it into a deliberate fade instead of a visible seam line. */
.dpt2-detail-hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
    background: linear-gradient(to bottom, transparent, var(--clr-bg));
    pointer-events: none;
}
.dpt2-detail-hero-inner { position: relative; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.dpt2-badge-row { display: flex; align-items: center; gap: 10px; }
.dpt2-badge {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em;
    color: var(--dept-color, #0d9488); background: rgba(var(--dept-rgb,13,148,136),.10);
    border: 1px solid rgba(var(--dept-rgb,13,148,136),.28);
    border-radius: 999px; padding: 5px 11px;
}
.dpt2-stat { font-size: 12px; color: var(--muted); font-weight: 600; }
/* Title/subtitle/CTAs below — same classes and values as Channels/
   Departments' hero (.dpt2-hero-title2 etc. in page-channels.php), copied
   here rather than shared, matching how this page already duplicates its
   own copy of every other .dpt2-* rule. This page used to have its own
   bespoke .dpt2-detail-title (a gradient-text single-line title, no
   subtitle, no CTAs) — replaced outright so the hero actually matches the
   other two instead of just echoing their component names. */
.dpt2-hero-title2 { font-family:var(--dp-serif); font-size: clamp(32px, 5vw, 52px); line-height: 1.05; margin: 0 0 14px; color: var(--ink); text-transform: uppercase; }
.dpt2-hero-title2-accent { color: var(--dept-color, #0d9488); }
.dpt2-hero-sub2 { font-size: .95rem; color: var(--muted); max-width: 560px; margin: 0 0 22px; line-height: 1.6; }
.dpt2-hero-ctas2 { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.dpt2-hero-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer; text-decoration: none; transition: transform .15s, filter .15s; }
.dpt2-hero-cta--access { background: rgba(var(--dept-rgb,13,148,136),.10); color: var(--dept-color, #0d9488); border: 1px solid rgba(var(--dept-rgb,13,148,136),.28); }
.dpt2-hero-cta--ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(255,255,255,.3); }
.dpt2-hero-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.dpt2-hero-cta--ghost:hover { border-color: var(--dept-color, #0d9488); color: var(--dept-color, #0d9488); }

.dpt2-swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.dpt2-swatch {
    width: 30px; height: 30px; border-radius: 999px; border: 2px solid rgba(255,255,255,.9);
    cursor: pointer; padding: 0; transition: .3s cubic-bezier(.4,0,.2,1);
}
.dpt2-swatch:hover { transform: scale(1.12); }
.dpt2-swatch.active { border-color: #0a0a0a; }
.dpt2-swatch-hint { font-size: 12px; color: var(--muted); align-self: center; margin-left: 6px; }
.dpt2-swatch--home {
    background: var(--ink); display: flex; align-items: center; justify-content: center;
    color:var(--inverse); margin-right: 4px;
}
.dpt2-swatch--home.active { border-color: var(--dept-color, #0d9488); }

/* Stats band — identical to /channels/ and /departments/ (page-channels.php,
   inc/tcn-dpt2-showcase.php) so the hero-to-content transition matches
   theirs instead of jumping straight from hero into the white panel. */
.dpt2-stats-band { background: rgba(var(--dept-rgb,13,148,136),.06); border-top: 1px solid rgba(var(--dept-rgb,13,148,136),.15); border-bottom: 1px solid rgba(var(--dept-rgb,13,148,136),.15); }
.dpt2-stats-band-inner { max-width: 1280px; margin: 0 auto; padding: 28px var(--sp-lg); display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.dpt2-stat-card { display: flex; align-items: center; gap: 12px; }
.dpt2-stat-card-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(var(--dept-rgb,13,148,136),.14); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.dpt2-stat-card-num { display: block; font-family:var(--dp-serif); font-size: 1.3rem; color: var(--ink); line-height: 1.1; text-transform: uppercase; }
.dpt2-stat-card-label { display: block; font-size: .72rem; color: var(--muted); font-weight: 600; }
@media (max-width: 760px) { .dpt2-stats-band-inner { grid-template-columns: repeat(2,1fr); } }

/* ── Department picker — a horizontally-scrollable pill row instead of a
   vertical sidebar, so it keeps working the same way whether there's 1
   department or 20 ("slide through finding their offer"). Lives inside
   step 1's card now, not a separate two-column layout next to the
   terminal. ── */
.ga-dept-scroller {
    display: flex; gap: 8px; overflow-x: auto; margin: 1rem 0 0; padding: 2px 2px 10px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
/* Each pill (except "All") carries its own --pill-color/--pill-rgb inline
   (its department's real color) so it reads as that department at rest,
   not just once selected — the shared --dept-color/--dept-rgb on
   #ga-departments only reflects whichever ONE department is currently
   active, which isn't useful for tinting every pill in the row. */
.ga-dept-pill {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
    background: rgba(var(--pill-rgb,107,114,128),.06); border: 1px solid rgba(var(--pill-rgb,107,114,128),.22); border-radius: 999px;
    padding: 8px 8px 8px 10px; font-family: Inter, sans-serif; font-size: 13px; font-weight: 600;
    color: var(--clr-text-main); cursor: pointer; white-space: nowrap; transition: .15s ease;
}
.ga-dept-pill:hover { border-color: rgba(var(--pill-rgb,107,114,128),.4); }
.ga-dept-pill.active {
    background: rgba(var(--pill-rgb,13,148,136),.14); border-color: rgba(var(--pill-rgb,13,148,136),.45);
    color: var(--pill-color, #0d9488); font-weight: 700;
}
.ga-dept-pill-dot {
    width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0;
    background: rgba(var(--pill-rgb,13,148,136),.18); color: var(--pill-color, #0d9488);
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.ga-dept-pill-dot--all { background: var(--clr-text-main); color:var(--inverse); font-size: 11px; }
.ga-dept-pill-count { font-size: 11px; color: #6b7280; font-weight: 600; }
.ga-dept-pill.active .ga-dept-pill-count { color: inherit; opacity: .7; }

/* ── Whichever offer panel is active under the picker — the quick public
   codes ("all"), or a department's real ticket rows + shop. Same compact
   card treatment as the terminal below it, so step 1's two states (chips
   vs. ticket list) don't look like two different products. ── */
.ga-offer-scope {
    margin-top: 1rem; background: var(--clr-surface); border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg); overflow: hidden;
}
/* Same 2rem padding as .ga-panel-body (step 2's terminal box) so the two
   step boxes read as the same size/density instead of step 1 looking
   noticeably more cramped next to step 2's more generous padding. */
.ga-offer-scope .ga-step-chips { padding: 32px 32px 4px; margin-top: 0; }
.ga-offer-scope .ga-step-hint { padding: 0 32px 24px; margin-top: 0 !important; }
.ga-offer-scope .ga-products-wrap { padding: 0 32px 32px; margin-top: 20px; }

#ga-departments { scroll-margin-top: var(--header-height, 72px); }

/* ═══ Layout C: Unified Ticket/Code Rows — single-line list, matches /channels/ dpt2-row ═══ */
.dc-list { display: flex; flex-direction: column; }

.lc-row {
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--clr-border);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.lc-row:last-child { border-bottom: none; }
.lc-row:hover { background: rgba(var(--dept-rgb,13,148,136),.05); border-left-color: var(--dept-color, var(--clr-primary)); }
.lc-ticket { background: rgba(var(--tier-color,13,148,136),.03); }

.lc-row-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: rgba(var(--dept-rgb,13,148,136),.08);
  border: 1px solid var(--clr-border);
}

.lc-row-main {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}
.lc-row-icon { font-size: .85rem; flex-shrink: 0; }
.lc-row-title {
  font-family:var(--dp-serif);
  font-size: .95rem;
  color: var(--clr-text-main);
  letter-spacing: .015em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Channel pill — a smaller, secondary affordance next to the row's real
   action button, not a competing CTA. Opens the "explore this channel"
   popup; the main REDEEM/BUY/CLAIM pill stays the obvious primary action,
   since the point of this page is still getting the code redeemed. */
.ga-channel-pill {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: rgba(var(--dept-rgb,13,148,136),.08); border: 1px solid rgba(var(--dept-rgb,13,148,136),.25);
  border-radius: 999px; padding: 5px 10px 5px 6px; font-family: Inter, sans-serif;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: var(--dept-color, var(--clr-primary)); cursor: pointer; white-space: nowrap; transition: background .2s;
}
.ga-channel-pill:hover { background: rgba(var(--dept-rgb,13,148,136),.16); }
.ga-channel-pill-dot { width: 14px; height: 14px; border-radius: 999px; background: var(--dept-color, var(--clr-primary)); flex-shrink: 0; }
.ga-channel-pill-count { color: inherit; opacity: .65; font-weight: 700; }
.lc-row-creator {
  font-size: .7rem;
  font-weight: 800;
  color: var(--dept-color, var(--clr-primary));
  text-transform: uppercase;
  letter-spacing: .06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-row-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.lc-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  font-weight: 800;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--clr-border);
  
rgba(255,255,255,.04);
  color: var(--clr-text-main);
  transition: background .2s, filter .2s, border-color .2s;
}
.lc-row-btn--ghost:hover { background: var(--line); border-color: var(--line); }
/* Same light-tint pill as .lc-row-btn--buy below, not a solid fill —
   a solid edge-to-edge fill of the department's own accent color read as
   muddy/low-contrast for some departments, and a fixed brand gradient
   lost the per-department color entirely. A tinted pill stays legible
   (dark-ish colored text on a pale colored background) while still
   changing color per department. */
.lc-row-btn--primary {
  background: rgba(var(--dept-rgb,13,148,136),.1);
  border-color: rgba(var(--dept-rgb,13,148,136),.3);
  color: var(--dept-color, var(--clr-primary));
  font-weight: 900;
}
.lc-row-btn--primary:hover { background: rgba(var(--dept-rgb,13,148,136),.18); }
.lc-row-btn--buy {
  background: rgba(var(--dept-rgb,13,148,136),.1);
  border-color: rgba(var(--dept-rgb,13,148,136),.25);
  color: var(--dept-color, var(--clr-primary));
  font-weight: 900;
}
.lc-row-btn--buy:hover { background: rgba(var(--dept-rgb,13,148,136),.18); }
.lc-row-btn--owned {
  background: rgba(22,163,74,.08);
  border-color: rgba(22,163,74,.25);
  color: #16a34a;
  pointer-events: none;
}

@media (max-width: 640px) {
  .lc-row { grid-template-columns: 44px 1fr auto; gap: 12px; padding: 12px; }
  .lc-row-thumb { width: 44px; height: 44px; }
  .ga-channel-pill, .lc-row-creator { display: none; }
}

/* ═══ Products (Shop {Department}) — Drops & Merch panel, dropped into
   each department's code-list tab so purchase and redemption live in one
   feed ═══ */
.ga-products-wrap { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--clr-border); }
.ga-products-heading {
  font-family:var(--dp-serif);
  font-size: 1rem;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--clr-text-main);
  margin: 0 0 4px;
}
.ga-products-sub { font-size: .78rem; color: var(--clr-text-muted, #6b7280); margin: 0 0 14px; }

/* ═══ FAQ ═══ */
/* assets/tcn-app.css's sitewide "Cards across page families" rule gives
   .ga-faq-item an !important background/border/border-radius/box-shadow —
   it's rendered as an individual rounded white card, not a flat
   divider-separated row. The rules below used to assume the latter
   (border-bottom dividers, zero horizontal padding on the button/answer
   since there was no card edge to clear, gap:0 since rows just stacked
   flush against their shared divider) — against an actual rounded card
   that meant question/arrow text sitting flush against the card's edges
   and cards touching with no gap, pinching at the rounded corners. Don't
   fight the override's border/background here; just stop assuming a
   layout it no longer produces. */
/* Extra top padding + a divider line pull the FAQ visually apart from the
   "how it works"/unlock flow above it — pure spacing between two dark,
   undifferentiated sections read as one continuous block ("meshes in too
   closely") even with a few hundred px of gap, since nothing marks where
   one section ends and the next begins. */
.ga-faq { padding: 6rem 1.5rem 3rem; max-width: 720px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.08); }
.ga-faq-list { display: flex; flex-direction: column; gap: 10px; }
.ga-faq-item { transition: background .2s; }
.ga-faq-item:hover { background: rgba(13,148,136,.02); }
.ga-faq-item.open { background: rgba(13,148,136,.03); }
.ga-faq-q {
  width: 100%; background: none; border: none; color: var(--clr-text-main);
  padding: 1.1rem 20px; font-size: 1rem; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; text-align: left; letter-spacing: 0.01em;
  transition: color 0.2s;
}
.ga-faq-q:hover { color: var(--clr-primary); }
.ga-faq-arrow {
  font-size: 0.65rem; transition: transform 0.3s ease; color: rgba(13,148,136,0.5);
  flex-shrink: 0; margin-left: 16px;
}
.ga-faq-item.open .ga-faq-arrow { transform: rotate(180deg); }
.ga-faq-a {
  max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 20px;
}
.ga-faq-item.open .ga-faq-a { max-height: 300px; padding: 0 20px 1.1rem; }
.ga-faq-a p {
  color: var(--clr-text-muted); font-size: 0.9rem; line-height: 1.7;
  margin: 0;
}


/* layout system: 44px touch targets for the pickers */
.ga-bd, .ga-dept-pill, .ga-step-chip { min-height: var(--tap, 44px); }