/* ==========================================================================
   Waiz Earn — page composition
   Mobile is designed first and separately; the desktop rules widen it into a
   bento, they do not shrink a desktop layout down.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER — the bar, the brand and Back/Home live in components.css, shared
   with every page. Only the site header's own navigation and controls are here.
   -------------------------------------------------------------------------- */

.hdr-nav { display: none; margin-inline: auto; gap: 2px; }
.hdr-nav a, .hdr-nav button {
  padding: 9px 14px; border-radius: var(--r-xs);
  font-size: calc(13.8px * var(--text-scale)); font-weight: 600; color: var(--muted);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.hdr-nav a:hover, .hdr-nav button:hover { color: var(--text); background: var(--surface-2); }

@media (max-width: 899px) {
  /* The floating accessibility button was removed: it sat over the hero on a
     phone and covered the first trust chip. It lives in the header now. */
  .hdr-right { gap: 2px; }
  .lang-btn { padding-inline: 8px; }
}

.hdr-right { display: flex; align-items: center; gap: 6px; margin-left: auto; position: relative; }
.hdr-status { display: none; align-items: center; gap: 7px; margin-right: 6px; }

.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px; border-radius: var(--r-sm);
  color: var(--muted); font-size: calc(13px * var(--text-scale)); font-weight: 700;
  border: 1px solid transparent;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang-btn:hover { background: var(--surface-hover); color: var(--text); }

@media (min-width: 900px) {
  .hdr-nav { display: flex; }
  .hdr-status { display: inline-flex; }
}

/* One tactile light/dark switch. It supports click, keyboard arrows and drag. */
.theme-switch{display:inline-flex;align-items:center;gap:8px;min-width:54px;min-height:40px;padding:0;border:0;background:transparent;color:var(--muted);touch-action:none;cursor:pointer}
.theme-switch-track{position:relative;display:flex;align-items:center;justify-content:space-between;width:52px;height:28px;padding:0 7px;border:1px solid var(--line);border-radius:999px;background:#111827;box-shadow:inset 0 1px 4px rgba(0,0,0,.35);transition:background-color var(--t-fast),border-color var(--t-fast)}
.theme-switch-track svg{position:relative;z-index:1;width:13px;height:13px}.theme-switch-moon{color:#c4b5fd}.theme-switch-sun{color:#fbbf24}
.theme-switch-thumb{position:absolute;z-index:2;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#f8fafc;box-shadow:0 2px 7px rgba(0,0,0,.35);transition:transform .22s var(--ease)}
.theme-switch[aria-checked="true"] .theme-switch-track{background:#dbeafe;border-color:#93c5fd}
.theme-switch[aria-checked="true"] .theme-switch-thumb{transform:translateX(24px);background:#fff}
.theme-switch:focus-visible .theme-switch-track{outline:3px solid var(--focus);outline-offset:2px}
.theme-switch-wide{min-width:0}.theme-switch-label{font-size:calc(12px * var(--text-scale));font-weight:700}.theme-switch[aria-checked="false"] .theme-light-label,.theme-switch[aria-checked="true"] .theme-dark-label{opacity:.5}
@media(prefers-reduced-motion:reduce){.theme-switch-thumb,.theme-switch-track{transition:none}}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
/* The hero already ends in whitespace under the pills, so its bottom padding
   plus the next section's top padding stacked into a visible dead band. The
   hero gives up its own bottom padding and lets the section below set the gap. */
.hero { padding-block: clamp(34px, 5vw, 58px) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: center; }
.hero-copy, .hero-art { min-width: 0; }
.hero-copy > * { max-width: 100%; }

.hero h1 {
  font-size: calc(var(--fs-display) * var(--text-scale));
  letter-spacing: -.04em; line-height: 1.02; margin-block: 16px 14px;
}
.hero h1 span { display: block; }
/* The gradient rides on two words only; a fully gradient headline reads as an
   advertisement rather than a product name. */
.hero h1 .g {
  background: linear-gradient(100deg, #60A5FA 0%, #818CF8 45%, #C084FC 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="light"] .hero h1 .g {
  background: linear-gradient(100deg, #2563EB 0%, #4F46E5 45%, #9333EA 100%);
  -webkit-background-clip: text; background-clip: text;
}
.hero-lede {
  color: var(--muted); font-size: calc(15.5px * var(--text-scale));
  line-height: 1.62; max-width: 46ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-6); }
.hero-cta .btn { flex: 1 1 auto; min-width: 168px; }

/* Compact app carousel. The cards remain native links and the viewport remains
   a normal horizontal scroller, so touch, trackpad and keyboard all work even
   if the timed enhancement never runs. */
.app-showcase {
  width: 100%; max-width: 100%; min-width: 0; contain: inline-size;
  margin-top: var(--sp-5); padding: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden;
}
.showcase-head, .showcase-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.showcase-head { margin-bottom: 10px; padding-inline: 2px; }
.showcase-kicker {
  display: block; color: var(--brand); font-size: 10px; font-weight: 850;
  letter-spacing: .13em; line-height: 1.2; text-transform: uppercase;
}
.showcase-head strong {
  display: block; max-width: 36ch; margin-top: 2px; color: var(--muted);
  font-size: calc(11.5px * var(--text-scale)); font-weight: 600; line-height: 1.35;
}
.showcase-controls { display: flex; gap: 5px; flex: none; }
.showcase-arrow {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px; color: var(--muted);
  background: var(--surface-2); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.showcase-arrow:hover { color: var(--text); border-color: var(--line-strong); transform: translateX(-1px); }
.showcase-arrow.is-next { transform: rotate(180deg); }
.showcase-arrow.is-next:hover { transform: rotate(180deg) translateX(-1px); }
.showcase-viewport { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; border-radius: var(--r-md); }
.showcase-viewport::-webkit-scrollbar { display: none; }
.showcase-track { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding-inline: 9%; }
.showcase-slide {
  --ac: var(--brand); width: 82%; max-width: 82%; flex: 0 0 82%; min-width: 0; overflow: hidden; scroll-snap-align: center;
  position:relative; isolation:isolate;
  display: grid; grid-template-columns: 48px minmax(0,1fr) auto auto; align-items: center; gap: 11px;
  min-height: 76px; padding: 13px; border-radius: var(--r-md);
  background: linear-gradient(110deg, color-mix(in srgb, var(--ac) 14%, var(--surface-2)), var(--surface-2) 55%);
  border: 1px solid color-mix(in srgb, var(--ac) 30%, var(--line));
  opacity: .4; transform: scale(.88);
  transition: opacity .38s var(--ease), transform .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease);
}
.showcase-slide.is-active { opacity: 1; transform: scale(1); border-color: color-mix(in srgb, var(--ac) 58%, var(--line)); box-shadow: 0 14px 28px -22px var(--ac); }
.showcase-slide.effect-glow.is-active { box-shadow: 0 12px 30px -13px var(--ac); }
.showcase-slide.effect-shimmer::after { content:""; position:absolute; inset:-60% auto -60% -30%; width:22%; transform:rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); animation:card-glint 4.8s ease-in-out infinite; pointer-events:none; }
.showcase-slide.effect-pulse.is-active { animation:card-pulse 2.8s ease-in-out infinite; }
@keyframes card-glint { 0%,55%{left:-30%} 78%,100%{left:125%} }
@keyframes card-pulse { 50%{box-shadow:0 12px 34px -10px var(--ac)} }
@media (prefers-reduced-motion:reduce){:where(html:not([data-preview-motion])) .showcase-slide.effect-shimmer::after,:where(html:not([data-preview-motion])) .showcase-slide.effect-pulse.is-active{animation:none}}
.showcase-slide img { width: 48px; height: 48px; border-radius: 13px; box-shadow: 0 8px 20px -12px var(--ac); }
.showcase-copy { min-width: 0; }
.showcase-effect {
  display:inline-flex;align-items:center;width:max-content;margin-bottom:3px;padding:2px 6px;
  border:1px solid color-mix(in srgb,var(--ac) 38%,var(--line));border-radius:999px;
  background:color-mix(in srgb,var(--ac) 12%,var(--surface-2));color:color-mix(in srgb,var(--ac) 62%,var(--text));
  font-size:calc(8px * var(--text-scale));font-weight:900;line-height:1.2;letter-spacing:.09em;text-transform:uppercase;
}
.showcase-effect.is-new{color:var(--ok);background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.showcase-copy b { display: block; font-size: calc(14px * var(--text-scale)); font-weight: 800; }
.showcase-copy small { display: block; color: var(--muted); font-size: calc(11.4px * var(--text-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.showcase-slide .app-go { color: var(--brand); }
.showcase-foot { padding: 9px 3px 0; }
.showcase-dots { display: flex; align-items: center; gap: 5px; }
.showcase-dots button { width: 6px; height: 6px; border-radius: 999px; background: var(--line-strong); transition: width var(--t-base) var(--ease), background-color var(--t-base) var(--ease); }
.showcase-dots button[aria-current="true"] { width: 20px; background: var(--brand); }
.showcase-all { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; color: var(--brand); font-size: calc(11.5px * var(--text-scale)); font-weight: 750; }

@media (max-width: 480px) {
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; min-width: 0; }
  .app-showcase { padding: 10px 0; border-radius: 16px; }
  .showcase-head, .showcase-foot { padding-inline: 12px; }
  .showcase-head strong { display: none; }
  .showcase-controls { display: flex; }
  .showcase-controls .showcase-arrow:not(.showcase-toggle) { display: none; }
  .showcase-toggle { width: 30px; height: 30px; font-size: 11px; }
  .showcase-track { gap: 7px; padding-inline: 16%; }
  .showcase-slide { width: 68%; max-width: 68%; flex-basis: 68%; grid-template-columns: 36px minmax(0,1fr) auto; min-height: 58px; padding: 9px; border-radius: 13px; }
  .showcase-slide img { width: 36px; height: 36px; border-radius: 10px; }
  .showcase-copy b { font-size: calc(12.5px * var(--text-scale)); }
  .showcase-copy small { font-size: calc(10.4px * var(--text-scale)); }
  .showcase-slide .badge { display: none; }
  .showcase-slide .app-go { grid-row: 1 / span 2; grid-column: 3; }
  .showcase-copy small { max-width: 190px; }
  .hero-pill { min-width: 0; padding-inline: 10px; align-items: flex-start; }
  .hero-pill .ic { margin-top: 1px; }
  .hero-pill span { min-width: 0; }
  /* Wrap, never truncate. These are four-word facts, and "Supported reg…" is a
     worse outcome than two short lines — an ellipsis on a label this short only
     hides the word that carried the meaning. */
  .hero-pill b, .hero-pill small { overflow-wrap: break-word; hyphens: none; }
}

/* Trust pills — four facts, no claims. */
.hero-pills {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-top: var(--sp-6);
}
.hero-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
}
.hero-pill .ic { color: var(--brand); flex: none; }
:root:not([data-theme="light"]) .hero-pill .ic { color: #8FB6FF; }
.hero-pill b { display: block; font-size: calc(12.5px * var(--text-scale)); font-weight: 700; line-height: 1.25; }
.hero-pill small { display: block; color: var(--subtle); font-size: calc(11.2px * var(--text-scale)); }

/* --- the product preview -------------------------------------------------
   Built from real app logos and real section names — it is the product, not a
   stock illustration, and it contains no invented numbers. */
.hero-art { position: relative; }
@media (max-width: 600px) { .hero-art { display: none; } }
.phone {
  position: relative; margin-inline: auto; width: min(300px, 82vw);
  border-radius: 38px; padding: 10px;
  background: linear-gradient(170deg, var(--surface-2), var(--surface-sunk));
  border: 1px solid var(--line-strong); box-shadow: var(--sh-3);
}
.phone-screen {
  border-radius: 30px; padding: 16px 14px 18px; overflow: hidden;
  background: linear-gradient(175deg, #0F1830 0%, #0A0F1E 62%);
  border: 1px solid var(--line);
}
:root[data-theme="light"] .phone-screen {
  background: linear-gradient(175deg, #EEF3FF 0%, #FFFFFF 62%);
}
.phone-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.phone-bar img { width: 22px; height: 22px; border-radius: 6px; }
.phone-bar b { font-size: 12.5px; font-weight: 800; letter-spacing: -.02em; }
.phone-bar .badge { margin-left: auto; padding: 3px 8px; font-size: 10px; }

.phone-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.phone-app {
  display: flex; align-items: center; gap: 8px;
  padding: 10px; border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line);
}
.phone-app img { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.phone-app span { font-size: 11px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-strip {
  margin-top: 12px; padding: 11px 12px; border-radius: 13px;
  background: linear-gradient(120deg, rgba(59,130,246,.2), rgba(168,85,247,.16));
  border: 1px solid var(--brand-line);
  display: flex; align-items: center; gap: 9px;
}
.phone-strip b { font-size: 11.5px; font-weight: 800; }
.phone-strip small { display: block; font-size: 10.2px; color: var(--muted); }

/* Two floating capability chips. Static; they do not orbit or pulse. */
.chip-float {
  position: absolute; display: none; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--sh-2); font-size: 12px; font-weight: 700;
}
.chip-float.c1 { top: 14%; left: -6%; }
.chip-float.c2 { bottom: 16%; right: -4%; }
@media (min-width: 1024px) { .chip-float { display: inline-flex; } }

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  /* Deliberately NOT four across. The hero copy column is ~570px, so four
     pills give each about 135px and every label wraps onto two lines. Two
     columns lets each label sit on one line, which is the whole point of a
     chip. */
  .hero-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-cta .btn { flex: 0 0 auto; }
  .phone { width: min(330px, 100%); }
}

/* A restrained first-paint sequence gives the hero depth without turning the
   page into an animation demo. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: hero-rise .55s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .05s; }
  .hero-copy > :nth-child(3) { animation-delay: .10s; }
  .hero-copy > :nth-child(4) { animation-delay: .15s; }
  .hero-copy > :nth-child(5) { animation-delay: .20s; }
  .hero-copy > :nth-child(6) { animation-delay: .25s; }
  .hero-art { animation: hero-art-in .7s .12s var(--ease) both; }
  @keyframes hero-rise { from { opacity: 0; transform: translateY(12px); } }
  @keyframes hero-art-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
}
@media (min-width: 1280px) {
  /* Only once there is genuinely room for four one-line labels. */
  .hero-pills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-pill b, .hero-pill small { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   APP GRID
   -------------------------------------------------------------------------- */
.app-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .app-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .app-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .app-grid { grid-template-columns: repeat(5, 1fr); } }

/* --------------------------------------------------------------------------
   BENTO — activity beside how-it-works on desktop, stacked on mobile.
   -------------------------------------------------------------------------- */
.bento { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .bento { grid-template-columns: 1.02fr 1fr; align-items: start; } }
.bento > :only-child { grid-column: 1 / -1; width: 100%; max-width: 900px; margin-inline: auto; }

.panel-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.panel-head h2 { font-size: calc(17px * var(--text-scale)); }
.panel-head .lede { color: var(--muted); font-size: calc(12.5px * var(--text-scale)); margin-top: 2px; }
.panel-head .btn { margin-left: auto; }
.panel-link { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--brand); font-size: calc(12px * var(--text-scale)); font-weight: 800; white-space: nowrap; }
.panel-body { padding: 0 var(--sp-5) var(--sp-5); }
.panel-body .seg { margin-bottom: var(--sp-2); width: 100%; }
.panel-body .seg button { flex: 1; }
#activityPanel .panel-body { padding-bottom: 13px; }
#activityPanel .state { padding: 16px 12px 8px; min-height: 64px; }
.activity-currency { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:26px; padding:0 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--surface-2); font-size:10px; font-weight:800; letter-spacing:.06em; }
/* Kept on phones. It is the only label that says WHICH currency the amounts
   are in, and that is the whole point of converting them. Compacted, not hidden. */
@media (max-width: 520px) { .activity-currency { min-width: 34px; height: 22px; padding: 0 6px; font-size: 9.5px; } }

/* Steps */
.steps { display: grid; gap: 12px; }
.app-breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; color: var(--muted); }
.app-guide { max-width: 860px; }
.app-guide h2 { margin: 28px 0 12px; }
.app-guide p, .app-guide li { line-height: 1.8; }
.app-guide ul, .app-guide ol { padding-left: 24px; }
.app-directory .step { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.app-directory .step h3 { margin: 0; }
.app-directory .step p { color: var(--muted); line-height: 1.7; }
.app-directory .step a { text-underline-offset: 4px; }
.app-directory .step > a:last-of-type { margin-top: auto; }
@media (min-width: 560px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  padding: var(--sp-5); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
}
.step-ic {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line);
  margin-bottom: 12px;
}
:root:not([data-theme="light"]) .step-ic { color: #A8C4FF; }
.step-n { font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--brand); letter-spacing: .1em; }
:root:not([data-theme="light"]) .step-n { color: #8FB6FF; }
.step b { display: block; font-size: calc(15px * var(--text-scale)); font-weight: 800; margin-top: 4px; }
.step small { display: block; color: var(--muted); font-size: calc(12.5px * var(--text-scale)); margin-top: 4px; line-height: 1.5; }

.disclosure {
  margin-top: var(--sp-4); padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--surface-sunk); border: 1px solid var(--line);
  color: var(--muted); font-size: calc(12.2px * var(--text-scale)); line-height: 1.55;
  display: flex; gap: 9px;
}
.disclosure .ic { color: var(--subtle); flex: none; margin-top: 1px; }

/* Ecosystem + help grids */
.eco-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 520px)  { .eco-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .eco-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .eco-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1180px) {
  .eco-grid .tile { flex-direction: column; align-items: flex-start; gap: 10px; }
}

.help-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .help-grid { grid-template-columns: repeat(3, 1fr); } }

.faq-wrap { max-width: 820px; margin-inline: auto; }

/* Dedicated information pages keep secondary content out of the home flow. */
.subpage-main { min-height: 64vh; }
.subpage-hero { padding-block: clamp(58px, 9vw, 108px) 10px; text-align: center; }
.subpage-hero .eyebrow { justify-content: center; }
.subpage-hero h1 { margin: 16px 0 12px; font-size: calc(clamp(36px, 6vw, 62px) * var(--text-scale)); }
.subpage-hero .hero-lede { margin-inline: auto; }
.steps-page { max-width: 920px; margin-inline: auto; }
.subpage-actions { display: flex; justify-content: center; margin-top: var(--sp-5); }

@media (max-width: 640px) {
  .subpage-hero { padding-block: 44px 0; }
  .subpage-hero h1 { font-size: calc(34px * var(--text-scale)); }
  .subpage-main .section { padding-block: 32px; }
  .subpage-main .section-head { align-items: flex-start; }
  .subpage-main .section-head h2 { font-size: calc(20px * var(--text-scale)); }
  .faq-item summary { padding: 15px 16px; font-size: calc(14px * var(--text-scale)); }
}

.act-source { display: flex; align-items: center; gap: 6px; flex: none; }
.act-source > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); font-size: calc(11px * var(--text-scale)); font-weight: 700; }
.act-source img { width: 22px; height: 22px; object-fit: contain; border-radius: 7px; background: var(--surface-2); }
.activity-dialog { max-width: min(780px, calc(100vw - 32px)) !important; }
.activity-modal-list { padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunk); }
.activity-modal-body > .chooser-label:not(:first-child) { margin-top: 24px; }

@media (max-width: 700px) {
  #activityPanel .act-source > span:first-child { display: none; }
  .act-source > span > span { display: none; }
  .act-source img { width: 24px; height: 24px; }
  #activityPanel .act-time { display: none; }
  .activity-modal-body { padding-inline: 14px; }
  .activity-modal-list { padding-inline: 10px; }
  .activity-modal-list .act-source > span:first-child { display: none; }
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.foot {
  margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--line);
  background: var(--surface-sunk);
  padding-bottom: calc(env(safe-area-inset-bottom) + 76px);
}
@media (min-width: 900px) { .foot { padding-bottom: 0; } }
.foot-in { padding-block: clamp(32px, 5vw, 52px) var(--sp-6); }
.foot-grid { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; }
@media (min-width: 720px)  { .foot-grid { grid-template-columns: 1.3fr repeat(2, 1fr); } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.foot-brand p { color: var(--muted); font-size: calc(13px * var(--text-scale)); margin-top: 12px; max-width: 32ch; }
.foot-col h3 {
  font-size: calc(11.5px * var(--text-scale)); font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--subtle); margin-bottom: 12px;
}
.foot-col a, .foot-col button {
  display: block; padding: 7px 0; text-align: left;
  color: var(--muted); font-size: calc(13.2px * var(--text-scale));
  transition: color var(--t-fast) var(--ease);
}
.foot-col a:hover, .foot-col button:hover { color: var(--text); }
.foot-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  justify-content: space-between; padding-block: var(--sp-5);
  border-top: 1px solid var(--line); color: var(--subtle);
  font-size: calc(12.2px * var(--text-scale));
}

/* --------------------------------------------------------------------------
   MOBILE TAB BAR
   Apps is the strongest action, raised out of the bar. Hidden on desktop,
   where the header already carries the same destinations.
   -------------------------------------------------------------------------- */
.tabbar {
  position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 70;
  width: min(calc(100% - 24px), 420px); transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 5px 8px;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong); border-radius: 22px; box-shadow: 0 18px 44px -18px rgba(0,0,0,.9);
}
@media (min-width: 900px) { .tabbar { display: none; } }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 52px; border-radius: var(--r-sm); color: var(--subtle);
  font-size: 10.5px; font-weight: 700;
  transition: color var(--t-fast) var(--ease);
}
.tab:hover, .tab.is-on { color: var(--text); }
.tab.is-primary { color: var(--brand-ink); }
.tab.is-primary .tab-ic {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  margin-top: -20px;
  background: linear-gradient(135deg, var(--brand-solid), var(--brand-solid-2) 60%, var(--brand-solid-3));
  box-shadow: var(--sh-brand); color: #fff;
  border: 3px solid var(--bg-elev);
}
.tab.is-primary span { color: var(--text); }

/* --------------------------------------------------------------------------
   APP CHOOSER DIALOG internals
   -------------------------------------------------------------------------- */
.chooser-list { display: grid; gap: 10px; }
@media (min-width: 560px) { .chooser-list.is-grid { grid-template-columns: repeat(2, 1fr); } }
.chooser-row {
  --ac: var(--brand);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 13px; border-radius: var(--r-md); min-height: 52px;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.chooser-row:hover {
  transform: translateY(-2px); background: var(--surface-2);
  border-color: color-mix(in srgb, var(--ac) 45%, var(--line));
}
.chooser-row[aria-disabled="true"] { opacity: .62; cursor: not-allowed; }
.chooser-row[aria-disabled="true"]:hover { transform: none; border-color: var(--line); background: var(--surface); }
.chooser-row img { width: 42px; height: 42px; border-radius: 12px; flex: none; }
.chooser-row .cr-tx { flex: 1; min-width: 0; }
.chooser-row b { display: block; font-size: calc(14.5px * var(--text-scale)); font-weight: 800; }
.chooser-row small { display: block; color: var(--muted); font-size: calc(12.2px * var(--text-scale)); line-height: 1.4; }
.chooser-effect {
  display: inline-flex; align-items: center; width: max-content; margin-bottom: 3px;
  padding: 2px 7px; border-radius: 999px; font-size: calc(9px * var(--text-scale));
  line-height: 1.35; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
}
.chooser-effect.is-new { color: var(--ok); background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.chooser-effect:not(.is-new) { color:var(--text-2); background:var(--surface-2); border:1px solid var(--line); }
.chooser-row.effect-glow { border-color:color-mix(in srgb,var(--ac) 46%,var(--line)); box-shadow:0 12px 28px -24px var(--ac); }
.chooser-row.effect-shimmer,.chooser-row.effect-pulse { position:relative; overflow:hidden; }
.chooser-row.effect-shimmer::after { content:""; position:absolute; inset:-60% auto -60% -25%; width:20%; transform:rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); animation:card-glint 5s ease-in-out infinite; pointer-events:none; }
.chooser-row.effect-pulse { animation:card-pulse 3s ease-in-out infinite; }
.chooser-list:not(.is-grid) .chooser-row{
  position:relative;isolation:isolate;overflow:hidden;
  border-color:color-mix(in srgb,var(--ac) 45%,var(--line));
  background:linear-gradient(110deg,color-mix(in srgb,var(--ac) 10%,var(--surface)),var(--surface) 52%);
  box-shadow:0 16px 36px -30px var(--ac);
}
.chooser-row.effect-glow{animation:managed-site-glow 3.8s ease-in-out infinite}
@keyframes managed-site-glow{50%{box-shadow:0 15px 34px -18px var(--ac);border-color:color-mix(in srgb,var(--ac) 68%,var(--line))}}
@media (prefers-reduced-motion:reduce){:where(html:not([data-preview-motion])) .chooser-row.effect-glow{animation:none}}
:root[data-motion="reduced"] .chooser-row.effect-glow{animation:none}
.app-meta { opacity:.78; font-size:10px!important; margin-top:2px; }
.chooser-label {
  font-size: calc(11px * var(--text-scale)); font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--subtle); margin: var(--sp-4) 0 10px;
}
.chooser-label:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   PREFERENCES SHEET internals
   -------------------------------------------------------------------------- */
.pref-group + .pref-group { margin-top: var(--sp-6); }
.pref-group > h3 {
  font-size: calc(11.5px * var(--text-scale)); font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--subtle); margin-bottom: 10px;
}
.pref-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 44px; padding-block: 4px;
}
.pref-row > span { font-size: calc(13.8px * var(--text-scale)); font-weight: 600; }
.pref-note { color: var(--subtle); font-size: calc(12px * var(--text-scale)); line-height: 1.5; margin-top: var(--sp-4); }
.lang-list { display: grid; gap: 6px; }
/* Trust row — three small facts under the hero CTAs. Deliberately quiet:
   a trust signal that shouts reads as compensation for not being trusted. */
.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 18px; margin-top: 16px; padding: 0; list-style: none;
}
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.trust-seal {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 9px;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
}
.trust-seal.is-verified {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--brand-solid), var(--brand-solid-2));
  box-shadow: 0 6px 14px -8px var(--brand-solid);
}
.hero-trust b {
  display: block; font-family: var(--font-display);
  font-size: calc(12.5px * var(--text-scale)); font-weight: 700; line-height: 1.2;
  color: var(--text-2); white-space: nowrap;
}
.hero-trust small {
  display: block; color: var(--subtle);
  font-size: calc(10.6px * var(--text-scale)); line-height: 1.25; white-space: nowrap;
}
@media (max-width: 420px) {
  .hero-trust { gap: 8px 14px; }
  .hero-trust small { display: none; }   /* keep one line per chip on small phones */
}

/* Activity row extras: the app stack and the "paid via" wallet mark. */
.act-apps { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; }
.act-apps img {
  width: 14px; height: 14px; border-radius: 4px; flex: none;
  border: 1px solid var(--line); background: var(--surface-2);
}
.act-wallet {
  width: 18px; height: 18px; border-radius: 5px; flex: none; object-fit: contain;
  opacity: .9;
}
.act-note {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 12px;
  color: var(--subtle); font-size: calc(11.4px * var(--text-scale)); line-height: 1.45;
}
.act-note .ic { flex: none; margin-top: 1px; }

/* ==========================================================================
   SPACING CORRECTIONS
   Measured, not guessed: the mobile footer rendered 1,069px tall because five
   columns stack into one, and the desktop section rhythm (76px + 76px + a 72px
   main-to-footer gap) stacked into visible dead bands.
   ========================================================================== */

/* Sections carried 76px top AND bottom on desktop; adjacent sections therefore
   produced 152px of air. One side owns the gap now. */
.section { padding-block: clamp(28px, 4vw, 44px); }
.section + .section { padding-top: 0; }

@media (min-width: 900px) {
  /* The hero sat 145px below a header that is only 72px tall. */
  .hero { padding-block: clamp(24px, 3vw, 36px) 0; }
}

/* --- footer ---------------------------------------------------------------
   On mobile the five columns stacked to over a thousand pixels. Two columns
   below 720px keeps it navigable without turning the page into a scroll. */
.foot-in { padding-block: clamp(24px, 4vw, 40px) var(--sp-4); }
.foot-grid { gap: var(--sp-5) var(--sp-6); }

@media (max-width: 719px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-col a, .foot-col button { padding-block: 5px; }
  .foot-col h3 { margin-bottom: 8px; }
}
.foot-bottom { padding-block: var(--sp-4); }

/* --------------------------------------------------------------------------
   APP SHOWCASE ON DESKTOP
   It used to sit inside the hero's left column: on a 1440px screen that meant
   one visible card and two slivers in a 570px gutter while the right half of
   the page sat empty. It is now a grid sibling placed on its own row, so the
   copy and the product preview keep the top row and the apps get full width.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; align-items: start; }
  /* Explicit placement. Without it the spanning showcase claims row 1 and
     shoves the product preview down to row 3. */
  .hero-copy     { grid-column: 1; grid-row: 1; }
  .hero-art      { grid-column: 2; grid-row: 1; }
  .app-showcase  { grid-column: 1 / -1; grid-row: 2; margin-top: var(--sp-2); }

  /* Every real slide fits, so the loop clones would read as duplicate apps. */
  .showcase-slide[data-clone] { display: none; }
  .showcase-slide { width: auto; max-width: none; flex: 1 1 0; min-width: 0; }
  .showcase-track { padding-inline: 0; gap: 12px; }
  .showcase-viewport { scroll-snap-type: none; overflow: visible; }
  /* Nothing left to page through. */
  .showcase-controls, .showcase-dots { display: none; }
  .showcase-foot { justify-content: flex-end; margin-top: 10px; }
  /* Room for name + tagline without the status chip colliding with them. */
  .showcase-slide { grid-template-columns: 44px minmax(0,1fr) auto; row-gap: 2px; padding: 14px; }
  .showcase-slide .badge { grid-column: 2; justify-self: start; margin-top: 2px; }
  .showcase-slide .app-go { grid-row: 1 / span 2; grid-column: 3; }
  .showcase-copy small { max-width: none; }
}

/* ==========================================================================
   TRUST CHIPS — final, minimal
   One line each, no sub-label. Sub-labels restated the chip and forced the row
   onto two lines on a phone.
   ========================================================================== */
.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-top: 16px; padding: 0; list-style: none;
}
.hero-trust li {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  padding: 6px 12px 6px 7px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
}
.hero-trust b {
  font-family: var(--font); font-weight: 650;
  font-size: calc(12.2px * var(--text-scale)); line-height: 1.2;
  color: var(--text-2); white-space: nowrap;
}
.trust-seal {
  display: grid; place-items: center; flex: none;
  width: 21px; height: 21px; border-radius: 50%;
  color: var(--muted); background: var(--surface-hover);
}
.trust-seal.is-verified {
  color: #fff; background: linear-gradient(135deg, var(--brand-solid), var(--brand-solid-2));
  box-shadow: 0 4px 10px -4px var(--brand-solid);
}
.hero-trust small { display: none; }   /* superseded; kept harmless if reintroduced */

/* ==========================================================================
   LIVE ACTIVITY — real table rows on every size
   The old row was a flex line that collapsed on a phone: the name, the app
   stack and the amount competed for the same space and the amount wrapped.
   A grid gives each column a fixed job, so five rows read as a table.
   ========================================================================== */
#activityPanel .act-list { display: flex; flex-direction: column; }

#activityPanel .act-row {
  display: grid;
  grid-template-columns: auto 34px minmax(0, 1fr) auto auto;
  align-items: center; column-gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
#activityPanel .act-row:last-child { border-bottom: 0; }
#activityPanel .act-rank { grid-column: 1; }
/* Rows without a rank must not leave a hole where the rank would sit. */
#activityPanel .act-row > .act-ic:first-child { grid-column: 1 / span 2; justify-self: center; }

.act-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.act-name {
  font-size: calc(13.4px * var(--text-scale)); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.act-val {
  font-family: var(--font-display);
  font-size: calc(14px * var(--text-scale)); font-weight: 700;
  color: var(--ok); white-space: nowrap; justify-self: end;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 430px) {
  /* The wallet mark STAYS on phones. It is the "paid via" signal, and hiding
     it removed the one thing that showed GCash/Maya/PayPal per region.
     The row keeps all five columns; the name column absorbs the squeeze. */
  #activityPanel .act-row { grid-template-columns: auto 30px minmax(0, 1fr) 16px auto; column-gap: 7px; }
  #activityPanel .act-wallet { width: 16px; height: 16px; }
  #activityPanel .act-ic { width: 32px; height: 32px; }
  .act-name { font-size: calc(12.8px * var(--text-scale)); }
  .act-val  { font-size: calc(13.2px * var(--text-scale)); }
}

/* Panel chrome: the head wrapped to three lines on a phone. */
@media (max-width: 560px) {
  .panel-head { padding: var(--sp-4) var(--sp-4) var(--sp-3); gap: 10px; flex-wrap: wrap; }
  .panel-head h2 { font-size: calc(15.5px * var(--text-scale)); }
  .panel-head .lede { font-size: calc(11.8px * var(--text-scale)); line-height: 1.4; }
  .panel-body { padding: 0 var(--sp-4) var(--sp-4); }
  .activity-currency { order: 3; }
  .act-note { font-size: calc(10.8px * var(--text-scale)); }
}

/* Activity panel head on a phone.
   It was flex-wrap, so the currency chip and the refresh button dropped onto a
   line of their own and left a stranded icon under the sentence. A two-column
   grid keeps the controls beside the title where they belong. */
@media (max-width: 560px) {
  #activityPanel .panel-head {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto auto;
    align-items: center; column-gap: 9px; row-gap: 2px;
    flex-wrap: nowrap; padding: var(--sp-4) var(--sp-4) var(--sp-3);
  }
  #activityPanel .panel-head .section-ic { width: 32px; height: 32px; grid-row: 1; }
  #activityPanel .panel-head > div { grid-column: 2; grid-row: 1; min-width: 0; }
  #activityPanel .panel-head .activity-currency { grid-column: 3; grid-row: 1; order: 0; }
  #activityPanel .panel-head .icon-btn { grid-column: 4; grid-row: 1; width: 34px; height: 34px; }
  /* The sentence spans the full width underneath rather than squeezing the row. */
  #activityPanel .panel-head .lede { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
}
@media (min-width: 561px) {
  /* The lede is now a sibling of the title, so give it the full width back. */
  #activityPanel .panel-head { flex-wrap: wrap; }
  #activityPanel .panel-head > .lede { flex-basis: 100%; order: 9; margin-top: 2px; }
  #activityPanel .panel-head .activity-currency { margin-left: auto; }
}

/* ==========================================================================
   FOOTER STACKING — the footer was invisible
   body::before is a FIXED, full-viewport backdrop at z-index 0 whose gradient
   reaches fully opaque #070A12 near the bottom. `main` sits above it because it
   carries position:relative + z-index:1; the footer never got the same, so it
   painted UNDERNEATH an opaque layer. The DOM said "visible", the pixels said
   nothing was there.
   Anything that must survive that backdrop needs its own stacking position.
   ========================================================================== */
.foot { position: relative; z-index: 1; }

/* Trust chips: three on one row at every width.
   45 characters of full label cannot fit a 358px phone row at a legible size,
   so the phone swaps to a shorter true label instead of wrapping to 2 + 1. */
.hero-trust .t-short { display: none; }
.hero-trust li { flex: 0 1 auto; }
@media (max-width: 620px) {
  .hero-trust { flex-wrap: nowrap; gap: 6px; }
  .hero-trust .t-full  { display: none; }
  .hero-trust .t-short { display: inline; }
  .hero-trust li { padding: 5px 10px 5px 5px; min-width: 0; }
  .hero-trust b { font-size: calc(11.4px * var(--text-scale)); overflow: hidden; text-overflow: ellipsis; }
  .trust-seal { width: 19px; height: 19px; }
}
@media (max-width: 360px) {
  .hero-trust b { font-size: calc(10.8px * var(--text-scale)); }
  .hero-trust li { padding: 4px 8px 4px 4px; }
}

/* ==========================================================================
   PROMO LINES — the Mini App Hub's ticker, under the calls to action
   One glass pill, like the hub's. Every line sits in the same grid cell, so
   the pill is as wide as its longest line and never jumps as they rotate; the
   inactive ones are hidden from sight and from screen readers alike. The
   figure is the emphasis, in the same green the activity amounts use.
   ========================================================================== */
.promo-ticker {
  display: inline-flex; align-items: center; gap: 10px;
  max-width: 100%; margin-top: 16px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(34,211,238,.07)), var(--surface-2);
  border: 1px solid var(--brand-line);
  box-shadow: var(--sh-2);
}
.promo-glyph {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 12px; line-height: 1;
  color: var(--brand); background: var(--brand-soft);
}
.promo-glyph::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  border: 1px solid var(--brand-line); opacity: 0;
}
.promo-lines { display: grid; min-width: 0; }
.promo-line {
  grid-area: 1 / 1; min-width: 0;
  font-size: calc(var(--fs-sm) * var(--text-scale)); font-weight: 600; line-height: 1.35;
  color: var(--text-2);
  opacity: 0; visibility: hidden; transform: translateY(6px); filter: blur(2px);
  transition: opacity .34s var(--ease), transform .34s var(--ease), filter .34s var(--ease),
              visibility 0s linear .34s;
}
.promo-line.is-on {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity .34s var(--ease), transform .34s var(--ease), filter .34s var(--ease), visibility 0s;
}
.promo-amt {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em;
  color: var(--ok); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  .promo-glyph::after { animation: promo-ring 2.8s var(--ease) infinite; }
  @keyframes promo-ring { 0% { opacity: .9; transform: scale(.85); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
}
/* No rotation for anyone who asked for less motion: every line, listed. */
@media (prefers-reduced-motion: reduce) {
  .promo-lines { gap: 4px; }
  .promo-line { grid-area: auto; opacity: 1; visibility: visible; transform: none; filter: none; transition: none; }
}
:root[data-motion="reduced"] .promo-lines { gap: 4px; }
:root[data-motion="reduced"] .promo-line { grid-area: auto; opacity: 1; visibility: visible; transform: none; filter: none; }
@media (max-width: 620px) {
  .promo-ticker { display: flex; width: 100%; padding-right: 12px; }
}

/* ==========================================================================
   VERIFIED BADGE
   A circle CONTAINING a seal outline is two competing shapes, and at the 19px
   it actually renders the seal detail turns to noise. The badge IS the seal
   now — a scalloped silhouette with a plain tick inside, which is the shape
   people already read as "verified" at any size.
   ========================================================================== */
.trust-seal.is-verified {
  border-radius: 0;
  background: linear-gradient(140deg, #3B82F6 0%, #4F46E5 55%, #7E22CE 100%);
  box-shadow: none;
  clip-path: polygon(
    50% 0%,   61% 7%,   75% 5%,   81% 17%,  94% 21%,  93% 34%,
    100% 45%, 92% 55%,  97% 68%,  85% 75%,  82% 88%,  69% 87%,
    58% 96%,  47% 88%,  33% 91%,  27% 79%,  14% 76%,  16% 63%,
    5% 52%,   15% 42%,  11% 29%,  24% 22%,  27% 9%,   41% 10%
  );
  /* The clip eats the edges, so the glyph needs a little room. */
  width: 22px; height: 22px;
}
.trust-seal.is-verified .ic { width: 12px; height: 12px; stroke-width: 3; }

@media (max-width: 620px) {
  .trust-seal.is-verified { width: 20px; height: 20px; }
  .trust-seal.is-verified .ic { width: 11px; height: 11px; }
}

/* ==========================================================================
   Card design from Mini App Hub › Applications (app/lib/cardstyle.php)
   Chooser rows (.chooser-row) and hero showcase slides (.showcase-slide).
   Effects animate the .cr-fx layer, never the row's own box.
   ========================================================================== */
.chooser-list{--card-speed:1}
.chooser-list[data-speed="slow"]{--card-speed:1.6}
.chooser-list[data-speed="fast"]{--card-speed:.6}
.chooser-row{position:relative;isolation:isolate;overflow:hidden}
/* The effect layer sits BEHIND the content inside the row's own stacking context (isolation:isolate).
   Positioning the text column instead made it the containing block, so a ribbon or corner badge
   anchored to the text, not the card. */
.cr-fx,.showcase-slide .cr-fx{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;overflow:hidden}
.cr-fx::before,.cr-fx::after{content:"";position:absolute;pointer-events:none}

/* -- layout ---------------------------------------------------------------- */
.chooser-list[data-gap="tight"]{gap:6px}
.chooser-list[data-gap="roomy"]{gap:14px}
.chooser-list[data-radius="sharp"] .chooser-row{border-radius:8px}
.chooser-list[data-radius="round"] .chooser-row{border-radius:22px}
@media (min-width:560px){ .chooser-list.is-grid[data-layout="list"]{grid-template-columns:minmax(0,1fr)} }
@media (min-width:420px){ .chooser-list.is-grid[data-layout="grid"]{grid-template-columns:repeat(2,minmax(0,1fr))} }
.chooser-list[data-layout="compact"] .chooser-row{padding:9px 11px;min-height:0;gap:10px}
.chooser-list[data-layout="compact"] .chooser-row img{width:34px;height:34px;border-radius:10px}
.chooser-list[data-layout="compact"] .chooser-row .app-meta{display:none}

/* -- size -------------------------------------------------------------------- */
.chooser-row.size-compact{padding:9px 11px;min-height:0}
.chooser-row.size-compact img{width:34px;height:34px}
.chooser-row.size-compact .app-meta{display:none}
.chooser-row.size-large{padding:17px 15px}
.chooser-row.size-large img{width:54px;height:54px;border-radius:15px}
.chooser-row.size-large b{font-size:calc(16px * var(--text-scale))}
.chooser-list.is-grid .chooser-row.size-wide{grid-column:1/-1}
.showcase-slide.size-compact{min-height:62px;padding:10px}
.showcase-slide.size-large{min-height:92px}
.showcase-slide.size-large img{width:58px;height:58px}

/* -- card design -------------------------------------------------------------
   Revision 2 (whCardDesignRevision). Scoped under .chooser-list so a style also
   reaches the featured row: its own rule (.chooser-list:not(.is-grid) .chooser-row)
   outranked a plain .chooser-row.style-* and silently swallowed the design. */
:root{--wh-card-design:2}
.chooser-list .chooser-row.style-solid,.showcase-slide.style-solid{
  background:color-mix(in srgb,var(--ac) 12%,var(--surface-2));
  border-color:color-mix(in srgb,var(--ac) 45%,var(--line));
  box-shadow:inset 3px 0 0 var(--ac);
}
.chooser-list .chooser-row.style-gradient,.showcase-slide.style-gradient{
  background:linear-gradient(120deg,color-mix(in srgb,var(--ac) 38%,var(--surface)),color-mix(in srgb,var(--ac) 8%,var(--surface)) 72%);
  border-color:color-mix(in srgb,var(--ac) 55%,var(--line));
}
.chooser-list .chooser-row.style-outline,.showcase-slide.style-outline{
  background:transparent;border:1.5px solid color-mix(in srgb,var(--ac) 80%,var(--line));box-shadow:none;
}
.chooser-list .chooser-row.style-neon,.showcase-slide.style-neon{
  background:color-mix(in srgb,#05070f 78%,var(--surface));color:#EEF2FF;
  border-color:var(--ac);box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 45%,transparent),0 0 20px -6px var(--ac);
}
.chooser-list .chooser-row.style-neon small,.showcase-slide.style-neon small{color:rgba(238,242,255,.7)}
.chooser-list .chooser-row.style-neon b,.showcase-slide.style-neon b{text-shadow:0 0 12px color-mix(in srgb,var(--ac) 70%,transparent)}
.chooser-list .chooser-row.style-minimal,.showcase-slide.style-minimal{background:transparent;border-color:transparent;box-shadow:none}

/* -- effects on the layer (behind the row's content) --------------------------- */
.chooser-row.effect-glow .cr-fx::after,.showcase-slide.effect-glow .cr-fx::after{
  inset:0;
  background:radial-gradient(60% 150% at 0% 50%,color-mix(in srgb,var(--ac) 42%,transparent),transparent 72%);
  animation:crBreathe calc(3.8s * var(--card-speed)) ease-in-out infinite;
}
.chooser-row.effect-pulse .cr-fx::after,.showcase-slide.effect-pulse .cr-fx::after{
  inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1.5px var(--ac),inset 0 0 22px -8px var(--ac);
  animation:crBreathe calc(3s * var(--card-speed)) ease-in-out infinite;
}
.chooser-row.effect-aurora .cr-fx::before,.showcase-slide.effect-aurora .cr-fx::before{
  width:130%;aspect-ratio:1;left:-15%;top:50%;translate:0 -50%;
  background:conic-gradient(from 0deg,transparent 0 10%,color-mix(in srgb,var(--ac) 70%,transparent) 22%,transparent 40%,
    color-mix(in srgb,var(--ac) 50%,transparent) 62%,transparent 80%);
  filter:blur(22px);opacity:.85;
  animation:crSpin calc(10s * var(--card-speed)) linear infinite;
}
.chooser-list .chooser-row.effect-neon,.showcase-slide.effect-neon{
  border-color:var(--ac);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 40%,transparent),0 0 18px -6px var(--ac);
}
.chooser-row.effect-neon .cr-fx::after,.showcase-slide.effect-neon .cr-fx::after{
  inset:0;border-radius:inherit;
  box-shadow:inset 0 0 22px -4px color-mix(in srgb,var(--ac) 80%,transparent);
  animation:crBreathe calc(3.6s * var(--card-speed)) ease-in-out infinite;
}
.chooser-row.effect-sparkle .cr-fx::before,.chooser-row.effect-sparkle .cr-fx::after,
.showcase-slide.effect-sparkle .cr-fx::before,.showcase-slide.effect-sparkle .cr-fx::after{
  inset:0;
  background:
    radial-gradient(circle at 9% 24%,#fff 0 1.3px,color-mix(in srgb,var(--ac) 85%,transparent) 2.3px,transparent 6px),
    radial-gradient(circle at 60% 16%,#fff 0 1.1px,color-mix(in srgb,var(--ac) 85%,transparent) 2px,transparent 5px),
    radial-gradient(circle at 86% 76%,#fff 0 1.2px,color-mix(in srgb,var(--ac) 85%,transparent) 2.1px,transparent 5.5px);
  animation:crTwinkle calc(2.4s * var(--card-speed)) ease-in-out infinite;
}
.chooser-row.effect-sparkle .cr-fx::after,.showcase-slide.effect-sparkle .cr-fx::after{
  background:
    radial-gradient(circle at 34% 80%,#fff 0 1.1px,color-mix(in srgb,var(--ac) 85%,transparent) 2px,transparent 5px),
    radial-gradient(circle at 76% 28%,#fff 0 1.3px,color-mix(in srgb,var(--ac) 85%,transparent) 2.3px,transparent 6px),
    radial-gradient(circle at 95% 44%,#fff 0 1px,color-mix(in srgb,var(--ac) 85%,transparent) 1.9px,transparent 4.5px);
  animation-delay:calc(-1.2s * var(--card-speed));
}
.chooser-row.effect-holo .cr-fx::before,.showcase-slide.effect-holo .cr-fx::before{
  inset:-10% -50%;
  background:linear-gradient(115deg,transparent 30%,rgba(255,0,153,.26) 42%,rgba(0,255,234,.26) 50%,rgba(255,238,0,.22) 58%,transparent 70%);
  translate:-60% 0;animation:crHolo calc(4.6s * var(--card-speed)) ease-in-out infinite;
}
.chooser-row.effect-holo .cr-fx::after,.showcase-slide.effect-holo .cr-fx::after{
  inset:0;background:linear-gradient(120deg,rgba(255,0,153,.1),rgba(0,255,234,.1) 50%,rgba(255,238,0,.08));
}
.chooser-list .chooser-row.effect-rainbow,.showcase-slide.effect-rainbow{border-color:transparent;background-clip:padding-box}
.chooser-row.effect-rainbow .cr-fx::after,.showcase-slide.effect-rainbow .cr-fx::after{
  inset:0;border-radius:inherit;padding:2px;
  background:linear-gradient(120deg,#ff5f6d,#ffc371,#47e891,#3ecbff,#a26bff,#ff5f6d);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:crHue calc(6s * var(--card-speed)) linear infinite;
}
.chooser-row.effect-rainbow .cr-fx::before,.showcase-slide.effect-rainbow .cr-fx::before{
  inset:0;background:linear-gradient(120deg,rgba(255,95,109,.13),rgba(71,232,145,.06) 50%,rgba(162,107,255,.13));
}
.chooser-row.effect-orbit .cr-fx::before,.showcase-slide.effect-orbit .cr-fx::before{
  width:72px;height:72px;border-radius:50%;left:-36px;top:-36px;
  background:radial-gradient(circle,#fff 0 4%,color-mix(in srgb,var(--ac) 90%,#fff) 10%,color-mix(in srgb,var(--ac) 50%,transparent) 34%,transparent 68%);
  animation:crOrbit calc(5s * var(--card-speed)) linear infinite;
}
.chooser-row.effect-orbit .cr-fx::after,.showcase-slide.effect-orbit .cr-fx::after{
  inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 45%,transparent);
}
.chooser-row.effect-shimmer::after{animation-duration:calc(5s * var(--card-speed))}
.chooser-row.effect-pulse{animation-duration:calc(3s * var(--card-speed))}
@keyframes crSpin{to{rotate:360deg}}
@keyframes crBreathe{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes crTwinkle{0%,100%{opacity:.08}50%{opacity:1}}
@keyframes crHolo{0%,30%{translate:-70% 0}70%,100%{translate:70% 0}}
@keyframes crHue{to{filter:hue-rotate(360deg)}}
@keyframes crOrbit{0%{left:-36px;top:-36px}25%{left:calc(100% - 36px);top:-36px}50%{left:calc(100% - 36px);top:calc(100% - 36px)}75%{left:-36px;top:calc(100% - 36px)}100%{left:-36px;top:-36px}}
/* -- entrance: rows arrive when the chooser opens, staggered ------------------ */
dialog[open] .chooser-row.enter-rise{animation:crRise .42s cubic-bezier(.22,.8,.22,1) calc(var(--i,0) * 55ms) backwards}
dialog[open] .chooser-row.enter-fade{animation:crFade .42s ease calc(var(--i,0) * 55ms) backwards}
dialog[open] .chooser-row.enter-zoom{animation:crZoom .42s cubic-bezier(.22,.8,.22,1) calc(var(--i,0) * 55ms) backwards}
dialog[open] .chooser-row.enter-slide{animation:crSlide .45s cubic-bezier(.22,.8,.22,1) calc(var(--i,0) * 55ms) backwards}
dialog[open] .chooser-row.enter-flip{animation:crFlip .5s cubic-bezier(.22,.8,.22,1) calc(var(--i,0) * 55ms) backwards}
dialog[open] .chooser-row.enter-bounce{animation:crBounce .6s cubic-bezier(.22,.8,.22,1) calc(var(--i,0) * 55ms) backwards}
/* An effect that animates the row itself (pulse, glow) keeps its loop after the entrance. */
dialog[open] .chooser-row.effect-pulse:not(.enter-none){animation:crRise .42s cubic-bezier(.22,.8,.22,1) calc(var(--i,0) * 55ms) backwards,card-pulse calc(3s * var(--card-speed)) ease-in-out .5s infinite}
@keyframes crRise{from{opacity:0;translate:0 10px;scale:.98}}
@keyframes crFade{from{opacity:0}}
@keyframes crZoom{from{opacity:0;scale:.85}}
@keyframes crSlide{from{opacity:0;translate:-18px 0}}
@keyframes crFlip{from{opacity:0;rotate:x 70deg}}
@keyframes crBounce{0%{opacity:0;translate:0 -16px}60%{opacity:1;translate:0 4px}100%{translate:0 0}}

/* -- hover -------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .chooser-row.hover-lift:not([aria-disabled="true"]):hover{transform:translateY(-3px)}
  .chooser-row.hover-scale:not([aria-disabled="true"]):hover{transform:scale(1.025)}
  .chooser-row.hover-glow:not([aria-disabled="true"]):hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 60%,transparent),0 14px 30px -14px var(--ac)}
  .chooser-row.hover-none:hover{transform:none}
  .chooser-row.hover-tilt{transition:transform .12s linear,border-color var(--t-fast) var(--ease)}
  .chooser-row.hover-tilt:not([aria-disabled="true"]):hover .cr-fx{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.08),transparent 55%)}
}

/* -- badge style -------------------------------------------------------------- */
.chooser-row.badge-glow .chooser-effect,.showcase-slide.badge-glow .showcase-effect{box-shadow:0 0 12px -1px var(--ac)}
.chooser-row.badge-ribbon .chooser-effect,.showcase-slide.badge-ribbon .showcase-effect{
  position:absolute;top:9px;right:-30px;margin:0;padding:3px 32px;border-radius:0;rotate:38deg;
  background:var(--ac);color:#08060F;border:0;z-index:2;
}
.chooser-row.badge-corner .chooser-effect,.showcase-slide.badge-corner .showcase-effect{
  position:absolute;top:0;right:16px;margin:0;padding:3px 8px 4px;border-radius:0 0 9px 9px;
  background:var(--ac);color:#08060F;border:0;z-index:2;
}

/* -- motion ------------------------------------------------------------------- */
.chooser-list[data-motion="off"] .chooser-row,
.chooser-list[data-motion="off"] .chooser-row::after,
.chooser-list[data-motion="off"] .cr-fx::before,
.chooser-list[data-motion="off"] .cr-fx::after{animation:none!important}
.chooser-list[data-motion="subtle"] .chooser-row{animation-delay:0s!important}
@media (prefers-reduced-motion:reduce){
  :where(html:not([data-preview-motion])) .chooser-row,
  :where(html:not([data-preview-motion])) .cr-fx::before,
  :where(html:not([data-preview-motion])) .cr-fx::after{animation:none!important}
  :where(html:not([data-preview-motion])) .chooser-row{transform:none!important}
}
html[data-motion="reduced"] .chooser-row,
html[data-motion="reduced"] .cr-fx::before,
html[data-motion="reduced"] .cr-fx::after{animation:none!important}
html[data-motion="reduced"] .chooser-row{transform:none!important}
/* Locked app rows: the status, and when the app comes back (shared countdown). */
.chooser-row .cr-status{display:grid;justify-items:end;gap:3px}
.cr-countdown{
  padding:2px 7px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ac) 40%,var(--line));
  background:color-mix(in srgb,var(--ac) 10%,transparent);
  color:var(--text-2);font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.chooser-row[aria-disabled="true"]{opacity:.78}
.chooser-row[aria-disabled="true"] img{filter:grayscale(.65) brightness(.85)}
.chooser-row[aria-disabled="true"] b::after{
  content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;
  background:var(--warn,#F2BD55);vertical-align:middle;
}
/* A scheduled app in the showcase: still on the page, plainly not open yet. */
.showcase-slide.is-locked{border-style:dashed}
.showcase-slide.is-locked img{filter:grayscale(.55) brightness(.92)}
.showcase-slide[data-status="maintenance"]{border-color:color-mix(in srgb,var(--warn,#F2BD55) 42%,var(--line))}
.showcase-slide[data-status="maintenance"].is-active{box-shadow:0 14px 28px -22px color-mix(in srgb,var(--warn,#F2BD55) 80%,transparent)}
.showcase-status{display:grid;justify-items:end;gap:3px}
.showcase-countdown{
  padding:2px 7px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ac) 40%,var(--line));
  background:color-mix(in srgb,var(--ac) 10%,transparent);
  color:var(--text-2);font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.showcase-countdown.is-quiet{color:var(--subtle);font-weight:700;border-color:var(--line);background:transparent}
/* Locked slide, narrow card: the countdown is what a member needs, so the status
   badge steps aside rather than squeezing the name and tagline. */
.showcase-slide .showcase-status{gap:2px;justify-items:end;align-content:center}
.showcase-slide.is-locked .showcase-copy{min-width:0}
.showcase-slide.is-locked .badge{display:none}
.showcase-slide.is-locked .showcase-countdown{font-size:10.5px;padding:3px 8px}
@media (min-width:760px){
  .showcase-slide.is-locked .badge{display:inline-flex}
}
/* A locked slide is tight: the countdown takes its own row, so it can never sit on
   the app name or tagline. */
.showcase-slide.is-locked{grid-template-columns:48px minmax(0,1fr);row-gap:6px}
.showcase-slide.is-locked .showcase-copy{grid-column:2;min-width:0}
.showcase-slide.is-locked .showcase-status{grid-column:1 / -1;justify-self:end;justify-items:end}
.showcase-slide.is-locked .app-go{display:none}

/* --------------------------------------------------------------------------
   WAIZ EARN PROMOTERS — creator programme section (includes/waiz/partials/
   promoters.php). A separate programme, deliberately styled apart from the
   app cards so it never reads as another earning app.
   -------------------------------------------------------------------------- */
.prom {
  display: grid; gap: clamp(20px, 3vw, 40px); align-items: center;
  padding: clamp(20px, 3.4vw, 40px);
  background:
    radial-gradient(70% 90% at 0% 0%, var(--brand-soft), transparent 62%),
    radial-gradient(50% 70% at 100% 100%, var(--ok-soft), transparent 60%),
    var(--surface);
}
@media (min-width: 900px) { .prom { grid-template-columns: 1.2fr .8fr; } }
.prom-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
  color: var(--text-2); font-size: calc(13px * var(--text-scale)); font-weight: 800; letter-spacing: .02em;
}
.prom-eyebrow svg { color: var(--brand-3); }
.prom h2 { font-size: var(--fs-h2); line-height: 1.15; text-wrap: balance; margin-bottom: 10px; }
.prom-lede { color: var(--muted); max-width: 58ch; margin-bottom: 14px; }
.prom-offer {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  padding: 9px 13px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.prom-offer svg { color: var(--ok); flex: none; }
.prom-points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.prom-points li { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: calc(14px * var(--text-scale)); }
.prom-points svg { color: var(--ok); flex: none; }
.prom-cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 520px) { .prom-cta .btn { flex: 1 1 100%; } }

.prom-ladder { padding: 16px; border-radius: var(--r-lg); background: var(--surface-sunk); border: 1px solid var(--line); }
.prom-ladder-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; color: var(--muted); font-size: calc(12.5px * var(--text-scale)); font-weight: 600; }
.prom-tt { padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-weight: 700; }
.prom-ladder ol { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.prom-ladder li {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px;
  padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
}
.prom-ladder li:last-child { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.prom-step { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--text); font-weight: 800; font-size: 13px; }
.prom-views { color: var(--muted); font-variant-numeric: tabular-nums; }
.prom-views b { color: var(--text); }
.prom-amt { font-weight: 800; font-size: calc(19px * var(--text-scale)); color: var(--ok); font-variant-numeric: tabular-nums; }
.prom-note { color: var(--muted); font-size: calc(12.5px * var(--text-scale)); margin: 0; }