/* KNGX Wallet — the amazon.kngx.ca look: near-black sky, teal → mint → cyan light, dotted glowing outlines, Outfit titles. */
:root { --bg: #030608; --ink: #eafff9; --muted: rgba(234,255,249,.6); --teal: #00c9a7; --mint: #7ff3dd; --ice: #b6fff1; --cyan: #22d3ee; --gold: #f5b301;
  --line: rgba(127,243,221,.7); --glow: 0 0 16px rgba(0,201,167,.22); --ease: cubic-bezier(.22,1,.36,1); }
* { box-sizing: border-box; }
html { min-height: 100%; background: #070d0a; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 500 15px/1.5 "Inter Tight", Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .btn, .nav { font-family: Outfit, system-ui, sans-serif; }
::selection { background: rgba(127,243,221,.28); }
.kx-field { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; display: block; }
#app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* header: floating glass pill like amazon.kngx.ca */
.nav { position: sticky; top: 0; z-index: 20; margin: max(12px, env(safe-area-inset-top)) clamp(10px, 3vw, 28px) 0; display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: 22px; background: rgba(6,14,18,.72); border: 1.4px dotted rgba(127,243,221,.4); box-shadow: 0 0 30px rgba(0,201,167,.12), 0 20px 50px -30px #000; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }
.kx-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.kx-logo-stage { position: relative; display: inline-block; width: 118px; height: 30px; }
.kx-word { font: 800 22px/30px Outfit, system-ui, sans-serif; letter-spacing: .12em; color: var(--mint); }
.kx-word-wallet { position: absolute; left: 0; top: 0; opacity: 0; }
.nav .sp { flex: 1; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 99px; border: 1.4px dotted transparent; transition: color .2s, border-color .2s, background .2s; }
.nav-links a:hover, .nav-links a.on { color: var(--ink); border-color: rgba(127,243,221,.45); background: rgba(0,201,167,.08); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 99px; font-weight: 700; font-size: 15px; cursor: pointer; border: 1.6px dotted var(--line); background: transparent; color: var(--ink); transition: background .25s, color .25s, box-shadow .25s, transform .25s; text-decoration: none; }
.btn:hover, .btn.primary { background: linear-gradient(135deg, var(--teal), var(--cyan)); color: #04201a; border-color: transparent; box-shadow: 0 10px 28px rgba(34,211,238,.4); }
.btn:hover { transform: translateY(-2px); }
.card { background: transparent; border: 1.6px dotted var(--line); border-radius: 22px; box-shadow: var(--glow); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* crown + dot logo (copied from amazon.kngx.ca) */
.nav .kx-logo { position: relative; }
.nav .kx-crown { position: relative; display: inline-block; color: #f5b301; animation: kxCrownGlow 2.6s ease-in-out infinite; }
.nav .kx-crown::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #b6fff1;
  box-shadow: 0 0 6px 2px rgba(0,201,167,.8); animation: kxCrownOrbit 2.2s linear infinite; }
@keyframes kxCrownGlow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(245,179,1,.5)); transform: translateY(0); } 50% { filter: drop-shadow(0 0 9px rgba(245,179,1,.95)); transform: translateY(-1px) scale(1.06); } }
@keyframes kxCrownOrbit { from { transform: rotate(0deg) translateX(13px) rotate(0deg); } to { transform: rotate(360deg) translateX(13px) rotate(-360deg); } }
.nav .kx-word b { animation: kxLetter 3s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes kxLetter { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 10px rgba(0,201,167,.9); } }
@media (prefers-reduced-motion: reduce) { .nav .kx-crown, .nav .kx-crown::after, .nav .kx-word b { animation: none !important; } }
/* dot logo (top left): canvas replaces the CSS word swap */
.kx-logo-stage.kx-logo-canvas { width: 118px !important; height: 30px !important; overflow: visible !important; }
.kx-logo-stage.kx-logo-canvas::after { display: none !important; }
.kx-logo-stage.kx-logo-canvas .kx-word { visibility: hidden; animation: none !important; }
.kx-logo-dots { position: absolute; left: 0; top: 50%; transform: translateY(-50%); filter: drop-shadow(0 0 4px rgba(127,243,221,.55)); pointer-events: none; }
/* premium SVG crown */
.nav .kx-crown.kx-crown-svg { color: inherit; font-size: 0; line-height: 0; display: inline-grid; place-items: center; width: 30px; height: 30px; animation: kxCrownFloat 3.4s ease-in-out infinite !important; filter: drop-shadow(0 0 5px rgba(255,200,60,.7)) drop-shadow(0 0 14px rgba(255,160,0,.35)) !important; transform-origin: 50% 80%; }
.nav .kx-crown.kx-crown-svg::after { display: none !important; }
.kx-crown-svg svg { overflow: visible; }
.kx-crown-shine { animation: kxCrownShine 3.4s cubic-bezier(.6,0,.3,1) infinite; }
.kx-gem { transform-box: fill-box; transform-origin: center; animation: kxGem 2.2s ease-in-out infinite; filter: drop-shadow(0 0 2px currentColor); }
.kx-gem.g2 { animation-delay: .4s } .kx-gem.g3 { animation-delay: .8s } .kx-gem.g4 { animation-delay: 1.2s }
@keyframes kxCrownFloat { 0%,100% { transform: translateY(0) rotate(-4deg) } 50% { transform: translateY(-2px) rotate(4deg) } }
@keyframes kxCrownShine { 0%,55% { transform: skewX(-20deg) translateX(0) } 100% { transform: skewX(-20deg) translateX(58px) } }
@keyframes kxGem { 0%,100% { transform: scale(1); opacity: .85 } 50% { transform: scale(1.35); opacity: 1 } }
.kx-logo.kx-tap .kx-crown.kx-crown-svg { animation: kxCrownTap .7s cubic-bezier(.2,1.45,.3,1) both !important; }

/* ================= app ================= */
.num { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
#main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 26px clamp(14px, 3vw, 28px) 120px; transition: opacity .55s var(--ease), transform .55s var(--ease); }
#main.out { opacity: 0; transform: translateY(10px) scale(.99); transition: none; }
#main.in { opacity: 1; transform: none; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font: 500 11px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .22em; color: var(--mint); text-shadow: 0 0 12px rgba(127,243,221,.55); }
.kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--teal); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.5); opacity: .5; } }
.test-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; font: 600 12px Outfit, system-ui, sans-serif; color: #ffd36b; border: 1.4px dotted rgba(255,211,107,.6); background: rgba(245,179,1,.06); }
.test-pill i { width: 7px; height: 7px; border-radius: 50%; background: #ffd36b; box-shadow: 0 0 8px #f5b301; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { margin: 8px 0 0; font: 800 clamp(34px, 5vw, 54px)/1.05 Outfit, system-ui, sans-serif; letter-spacing: -.02em; background: linear-gradient(100deg, var(--ink) 20%, var(--mint) 55%, var(--cyan) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page.narrow { max-width: 560px; margin: 0 auto; }
.card { padding: 20px; background: rgba(6,14,18,.5); backdrop-filter: blur(6px); transition: border-color .3s, box-shadow .3s; }
.card:hover { border-color: var(--mint); box-shadow: 0 0 30px rgba(127,243,221,.25); }
.lab { display: block; font: 700 11px Outfit, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); text-shadow: 0 0 10px rgba(127,243,221,.4); margin-bottom: 8px; }

/* balance */
.balance { position: relative; overflow: hidden; padding: 26px 24px 0; }
.balance .big { display: block; font-size: clamp(40px, 7vw, 64px); font-weight: 500; line-height: 1.05; color: #fff; text-shadow: 0 0 24px rgba(127,243,221,.35); }
.balance .sub { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.spark { display: block; width: calc(100% + 48px); height: 90px; margin: 12px -24px 0; }
.spark-line { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 1.6s var(--ease) .4s forwards; filter: drop-shadow(0 0 6px rgba(127,243,221,.6)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.balance::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(182,255,241,.12) 48%, rgba(167,139,250,.08) 52%, transparent 65%); background-size: 260% 100%; animation: sheen 5s linear infinite; }
@keyframes sheen { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* quick actions */
.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.act { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 20px; border: 1.6px dotted rgba(127,243,221,.45); background: rgba(6,14,18,.45); color: var(--ink); text-decoration: none; font: 600 13px Outfit, system-ui, sans-serif; transition: transform .3s cubic-bezier(.2,1.4,.3,1), box-shadow .25s, border-color .25s; }
.act span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #04201a; background: linear-gradient(135deg, var(--teal), var(--cyan)); box-shadow: 0 0 18px rgba(0,201,167,.45); }
.act:hover { transform: translateY(-4px); border-color: var(--mint); box-shadow: 0 14px 30px -14px rgba(0,201,167,.7); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* activity list */
.list { padding: 8px 8px 6px; }
.list-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px; }
.list-head h2 { margin: 0; font-size: 18px; }
.list-head a { color: var(--mint); text-decoration: none; font: 600 13px Outfit, system-ui, sans-serif; }
.txs { list-style: none; margin: 0; padding: 0; }
.tx { display: flex; align-items: center; gap: 12px; padding: 12px; border-top: 1px dotted rgba(127,243,221,.16); border-radius: 14px; transition: background .2s; }
.tx:first-child { border-top: 0; }
.tx:hover { background: rgba(0,201,167,.07); }
.tx-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.tx-ic svg { width: 18px; height: 18px; }
.tx-ic.in { color: var(--mint); background: rgba(0,201,167,.12); box-shadow: inset 0 0 0 1px rgba(127,243,221,.3); }
.tx-ic.out { color: #ffb4c0; background: rgba(255,90,120,.1); box-shadow: inset 0 0 0 1px rgba(255,140,160,.28); }
.tx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tx-main b { font: 600 14.5px Outfit, system-ui, sans-serif; }
.tx-main small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-amt { font: 500 14.5px "JetBrains Mono", ui-monospace, monospace; }
.tx-amt.in { color: var(--mint); } .tx-amt.out { color: #ffb4c0; }
.empty { padding: 24px; text-align: center; color: var(--muted); }

/* deposit / withdraw */
.pay { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.amt { display: flex; align-items: baseline; gap: 8px; padding: 12px 18px; border-radius: 20px; border: 1.6px dotted var(--line); background: rgba(3,6,8,.6); transition: box-shadow .3s, border-color .3s; }
.amt:focus-within { border-color: transparent; box-shadow: 0 0 0 1px rgba(127,243,221,.3), 0 0 50px rgba(0,201,167,.3); }
.amt span { font: 600 22px Outfit, system-ui, sans-serif; color: var(--mint); }
.amt input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 40px; caret-color: var(--mint); }
.amt input::placeholder { color: rgba(234,255,249,.25); }
.presets { display: flex; gap: 8px; flex-wrap: wrap; }
.presets button { height: 36px; padding: 0 16px; border-radius: 99px; border: 1.4px dotted rgba(127,243,221,.5); background: transparent; color: var(--ink); font: 600 13px "JetBrains Mono", ui-monospace, monospace; cursor: pointer; transition: transform .25s cubic-bezier(.2,1.4,.3,1), background .2s, color .2s; }
.presets button:hover { background: linear-gradient(135deg, var(--teal), var(--cyan)); color: #04201a; border-color: transparent; transform: translateY(-2px); }
.methods { display: grid; gap: 10px; }
.method input { position: absolute; opacity: 0; pointer-events: none; }
.method span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; border: 1.6px dotted rgba(127,243,221,.4); cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.method span svg { grid-row: span 2; color: var(--mint); width: 26px; height: 26px; }
.method b { font: 600 15px Outfit, system-ui, sans-serif; } .method small { color: var(--muted); font-size: 12px; }
.method input:checked + span { border: 1.6px solid var(--mint); background: rgba(0,201,167,.1); box-shadow: 0 0 24px rgba(0,201,167,.3); }
.avail { margin: 0; color: var(--muted); font-size: 13px; } .avail b { color: var(--mint); }
.btn.wide { width: 100%; height: 54px; font-size: 16px; }
.btn.small { height: 34px; padding: 0 14px; font-size: 13px; }
.fine { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: rgba(234,255,249,.5); font-size: 12px; line-height: 1.45; }
.fine svg { width: 16px; height: 16px; flex: none; color: #ffd36b; margin-top: 1px; }

/* settings */
.rows { padding: 6px 18px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; border-top: 1px dotted rgba(127,243,221,.16); }
.row:first-child { border-top: 0; }
.row > span { font: 600 14.5px Outfit, system-ui, sans-serif; }
.row input { width: min(240px, 55%); height: 40px; padding: 0 12px; border-radius: 12px; border: 1.6px dotted var(--line); background: transparent; color: var(--ink); font: inherit; outline: 0; }
.row input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0,201,167,.18); }
.soon { font-weight: 500; color: var(--muted); font-size: 13px; text-align: right; }

/* welcome */
body[data-page="home"] #main { display: flex; align-items: flex-end; justify-content: center; min-height: calc(100vh - 90px); padding-bottom: 12vh; }
.hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero-copy p { margin: 0; max-width: 420px; color: var(--muted); font-size: 16px; animation: kxUp .9s var(--ease) 1.4s both; }
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; animation: kxUp .9s var(--ease) 1.7s both; }
.hero-copy .test-pill { animation: kxUp .9s var(--ease) 2s both; }
@keyframes kxUp { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }

/* boxes print in from the centre line as the dots land (amazon.kngx.ca) */
.build { animation: kxBuild .75s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0ms); }
@keyframes kxBuild { 0% { clip-path: inset(50% 0 50% 0 round 20px); opacity: 0; filter: brightness(2.2) saturate(1.4); } 45% { clip-path: inset(0 0 0 0 round 20px); opacity: 1; box-shadow: 0 0 34px rgba(127,243,221,.55); filter: brightness(1.5); } 100% { clip-path: inset(-40px); opacity: 1; filter: none; } }

/* toast */
.toast { position: fixed; left: 50%; top: 90px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 99px; background: rgba(3,6,8,.9); border: 1.4px dotted rgba(127,243,221,.6); box-shadow: 0 0 30px rgba(0,201,167,.3); font: 600 14px Outfit, system-ui, sans-serif; animation: toastIn .45s cubic-bezier(.2,1.3,.3,1); transition: opacity .4s, transform .4s; }
.toast svg { width: 20px; height: 20px; color: #04201a; background: var(--mint); border-radius: 50%; padding: 3px; }
.toast.gone { opacity: 0; transform: translateX(-50%) translateY(-10px); }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.9); } }

/* phone: bottom tab bar like amazon.kngx.ca */
.tabbar { display: none; }
@media (max-width: 760px) {
  .nav-links, .nav-cta { display: none; }
  /* The shell itself reaches both physical edges; controls stay inside the safe area. */
  .nav { position: relative; top: auto; margin: 0; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-top: 0; border-radius: 0 0 22px 22px; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px 16px calc(12px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; isolation: isolate; }
  .tabbar::before { content: ""; position: absolute; z-index: -1; left: 10px; right: 10px; top: 4px; bottom: calc(8px + env(safe-area-inset-bottom)); border-radius: 26px; background: rgba(6,14,18,.82); border: 1.4px dotted rgba(127,243,221,.4); box-shadow: 0 0 30px rgba(0,201,167,.15), 0 20px 40px -20px #000; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }
  .tabbar a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0; border-radius: 18px; color: var(--muted); text-decoration: none; font: 600 10.5px Outfit, system-ui, sans-serif; transition: color .2s, background .2s; }
  .tabbar a svg { width: 21px; height: 21px; }
  .tabbar a.on { color: var(--mint); background: rgba(0,201,167,.12); box-shadow: inset 0 0 0 1px rgba(127,243,221,.35), 0 0 18px rgba(0,201,167,.25); }
  .actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .act { padding: 12px 4px; font-size: 12px; } .act span { width: 40px; height: 40px; }
  .page-head .test-pill { order: -1; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .spark-line { stroke-dashoffset: 0; } }

/* sign in */
.login { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 34px 26px; text-align: center; }
.login h1 { margin: 4px 0 0; font: 800 clamp(30px, 5vw, 42px)/1.1 Outfit, system-ui, sans-serif; background: linear-gradient(100deg, var(--ink) 20%, var(--mint) 60%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login > p { margin: 0; color: var(--muted); }
.btn.google { height: 54px; background: #fff; color: #1f2937; border: 0; font-size: 16px; box-shadow: 0 0 30px rgba(127,243,221,.25); }
.btn.google:hover { background: #fff; color: #111; box-shadow: 0 0 40px rgba(127,243,221,.45); }
.btn.google .g { width: 20px; height: 20px; stroke: none; }
.btn:disabled { opacity: .6; pointer-events: none; }

/* copy-trading programs */
.programs-home { width: 100%; margin-top: 40px; }
.programs-home .list-head { padding: 0 4px 12px; }
body[data-page="home"] #main { flex-direction: column; align-items: stretch; justify-content: flex-end; }
body[data-page="home"] .hero { display: flex; justify-content: center; min-height: calc(78vh - 90px); align-items: flex-end; }
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.prog { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.prog.skel { min-height: 220px; border: 1.6px dotted rgba(127,243,221,.3); border-radius: 22px; background: linear-gradient(115deg, transparent 30%, rgba(127,243,221,.1) 50%, transparent 70%); background-size: 260% 100%; animation: sheen 1.6s linear infinite; }
.prog-top { display: flex; align-items: center; gap: 12px; }
.prog-top > div { flex: 1; min-width: 0; }
.prog-top h3 { margin: 0; font-size: 17px; }
.prog-top small { color: var(--muted); font-size: 12px; }
.prog-ic { width: 42px; height: 42px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #04201a; background: linear-gradient(135deg, var(--teal), var(--cyan)); box-shadow: 0 0 18px rgba(0,201,167,.45); }
.risk-pill { font: 600 11px Outfit, system-ui, sans-serif; padding: 4px 10px; border-radius: 99px; border: 1.2px dotted; white-space: nowrap; }
.risk-pill.low { color: var(--mint); border-color: rgba(127,243,221,.6); }
.risk-pill.medium { color: #ffd36b; border-color: rgba(255,211,107,.6); }
.risk-pill.high { color: #ffb4c0; border-color: rgba(255,140,160,.6); }
.prog-style { margin: 0; color: var(--muted); font-size: 13px; } .prog-style b { color: var(--ink); }
.prog-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; padding: 12px 0; border-top: 1px dotted rgba(127,243,221,.18); border-bottom: 1px dotted rgba(127,243,221,.18); }
.prog-stats span { display: flex; flex-direction: column; }
.prog-stats b { font-size: 15px; } .prog-stats b.up { color: var(--mint); } .prog-stats b.down { color: #ffb4c0; }
.prog-stats small { color: var(--muted); font-size: 11px; }
.prog-lock { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; border: 1.4px dotted rgba(255,211,107,.5); color: #ffd36b; text-decoration: none; font: 600 13px Outfit, system-ui, sans-serif; }
.prog-lock svg { width: 18px; height: 18px; }
.prog .btn { margin-top: auto; }
.fine.risk { margin-top: 18px; }

/* Phones: the header scrolls away and the page canvas keeps flowing under
   Safari's translucent top and bottom controls, matching kngx.ca. */
@media (max-width: 760px) {
  body[data-page="home"] .hero { min-height: calc(100svh - 70px); padding-bottom: 96px; }
  body[data-page="home"] .hero-copy { gap: 12px; }
  body[data-page="home"] .hero-copy p { font-size: 14.5px; max-width: 300px; }
  #main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* smoothness: no blur behind every card (very heavy on iPhone); phones get a light fade-up instead of the clip-path print-in */
.card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(6,14,18,.62); }
@media (max-width: 760px), (pointer: coarse) {
  .build { animation: kxFade .45s var(--ease) both; animation-delay: var(--d, 0ms); }
  @keyframes kxFade { from { opacity: 0; transform: translateY(10px); } }
  .balance::after { animation: none; }
  .nav, .tabbar::before { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  #main.out { opacity: 1; transform: none; }
  .act:hover, .btn:hover { transform: none; }
}
/* Easypaisa */
.ep-logo { grid-row: span 2; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 800 11px Outfit, system-ui, sans-serif; font-style: normal; color: #fff; background: linear-gradient(135deg, #3cb64a, #138a36); }
.ep-box { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 18px; border: 1.6px dotted rgba(60,182,74,.6); background: rgba(19,138,54,.08); }
.ep-box[hidden] { display: none; }
.ep-box p { margin: 0; font-size: 13.5px; } .ep-box b { color: #7ef08a; }
.ep-box input { height: 46px; padding: 0 14px; border-radius: 14px; border: 1.6px dotted rgba(60,182,74,.6); background: rgba(3,6,8,.6); color: #fff; font-size: 18px; outline: 0; }
.ep-box input:focus { border-color: #3cb64a; box-shadow: 0 0 0 4px rgba(60,182,74,.2); }
.ep-box small { color: var(--muted); font-size: 12px; }
.tx-ic.pend { color: #ffd36b; background: rgba(245,179,1,.1); box-shadow: inset 0 0 0 1px rgba(255,211,107,.35); }
.tx-amt.pend { color: #ffd36b; font-family: Outfit, system-ui, sans-serif; font-weight: 600; font-size: 13px; }

/* landing page: no navigation — just the sky, the welcome and the programs */
body[data-page="home"] .nav-links, body[data-page="home"] .nav-cta, body[data-page="home"] .tabbar { display: none !important; }
body[data-page="home"] .nav { justify-content: center; }
.prog-pic { width: 52px; height: 52px; flex: none; border-radius: 16px; object-fit: cover; border: 1.6px solid rgba(127,243,221,.55); box-shadow: 0 0 18px rgba(0,201,167,.35); }
.prog-stats b.num { font-size: 13.5px; }
.prog-total { margin: -4px 4px 14px; color: var(--muted); font-size: 14px; } .prog-total b { color: var(--mint); font-size: 18px; text-shadow: 0 0 12px rgba(127,243,221,.5); }
.field { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; }
.field span { font: 700 11px Outfit, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); }
.field input { height: 50px; padding: 0 16px; border-radius: 16px; border: 1.6px dotted var(--line); background: rgba(3,6,8,.6); color: var(--ink); font: 500 16px "Inter Tight", system-ui, sans-serif; outline: 0; }
.field input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0,201,167,.18); }
.lg-err { margin: 0; color: #ffb4c0; font-size: 13.5px; }
/* titles drawn by dots: the real text turns invisible, the canvas sits exactly on it */
h1.dotted { color: transparent !important; -webkit-text-fill-color: transparent !important; background: none !important; }
.title-dots { position: absolute; left: 0; top: -5px; pointer-events: none; filter: drop-shadow(0 0 6px rgba(127,243,221,.45)); }

/* phones: the tab bar is see-through glass so the page shows under it (no solid box cutting the content) */
@media (max-width: 760px), (pointer: coarse) {
  .tabbar { background: rgba(6,14,18,.28) !important; border-color: rgba(127,243,221,.28) !important; box-shadow: 0 8px 30px -12px rgba(0,0,0,.6) !important;
    backdrop-filter: blur(16px) saturate(170%) !important; -webkit-backdrop-filter: blur(16px) saturate(170%) !important; }
  .tabbar a.on { background: rgba(0,201,167,.18); }
  #main { padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important; } /* the last item can still scroll clear of the bar */
}

/* phones: the exact kngx.ca bottom bar — frosted light glass pill, page visible behind it and under Safari's bar */
@media (max-width: 760px), (pointer: coarse) {
  .tabbar { left: 12px !important; right: 12px !important; transform: none !important; width: auto !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.18)) !important; border: 1px solid rgba(255,255,255,.55) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%) !important; backdrop-filter: blur(24px) saturate(190%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(0,0,0,.25) !important; border-radius: 26px !important; }
  .tabbar a { color: rgba(255,255,255,.85) !important; }
  .tabbar a.on { color: #fff !important; background: rgba(255,255,255,.22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important; }
  html, body { background-color: #030608 !important; }
}
.switch-auth { margin: 0; color: var(--muted); font-size: 14px; } .switch-auth a { color: var(--mint); font-weight: 700; text-decoration: none; }
/* away from the welcome page the sky stays faint, so no half-formed logo sits behind the content */
.kx-field { transition: opacity .8s ease; }
body:not([data-page="home"]) .kx-field { opacity: .3; }
/* logged-out screens: no tab bar or menu */
body[data-page="login"] .tabbar, body[data-page="signup"] .tabbar,
body[data-page="login"] .nav-links, body[data-page="signup"] .nav-links,
body[data-page="login"] .nav-cta, body[data-page="signup"] .nav-cta { display: none !important; }
/* the sky is not pinned (see app.js): absolute at the top of the page, moved along with the scroll */
html body canvas.kx-field { position: absolute !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 100vh !important; height: 100lvh !important; will-change: transform; }
.apay { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; color: #fff; }
.apay svg { width: 24px; height: 24px; }
.conv { margin: -4px 2px 0; color: var(--muted); font-size: 13px; } .conv b { color: var(--mint); } .conv .low { color: #ffb4c0; }
.kx-field { transition: opacity .5s ease; }
.about-home { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.about-home h2 { margin: 0; font-size: clamp(24px, 4vw, 34px); line-height: 1.15; }
.about-home > p { margin: 0; color: var(--muted); max-width: 640px; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.about-stats > div { padding: 14px 10px; border: 1.6px dotted var(--line); border-radius: 18px; text-align: center; background: rgba(6,14,18,.6); }
.about-stats b { display: block; font-size: 22px; color: var(--mint); } .about-stats small { color: var(--muted); font-size: 12px; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 12px 14px; border: 1.6px dotted rgba(127,243,221,.35); border-radius: 16px; background: rgba(6,14,18,.6); }
.steps li::before { content: counter(s); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #04201a; background: linear-gradient(135deg, var(--teal), var(--cyan)); }
.steps b { font-family: Outfit, system-ui, sans-serif; } .steps span { color: var(--muted); font-size: 13px; }
.risk-note { margin: 0; color: rgba(234,255,249,.45); font-size: 12px; }

/* program detail */
.prog[data-prog] { cursor: pointer; }
#prog-detail { display: flex; flex-direction: column; gap: 14px; }
.back { color: var(--mint); text-decoration: none; font: 600 14px Outfit, system-ui, sans-serif; }
.pd-head { display: flex; align-items: center; gap: 16px; }
.pd-head h1 { margin: 6px 0 4px; font: 800 clamp(26px, 5vw, 40px)/1.1 Outfit, system-ui, sans-serif; }
.pd-head p { margin: 0; color: var(--muted); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pd-pic { width: 84px; height: 84px; border-radius: 22px; object-fit: cover; border: 2px solid rgba(127,243,221,.6); box-shadow: 0 0 26px rgba(0,201,167,.45); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-4px); } }
.pd-users { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.big-users { display: block; font-size: clamp(38px, 9vw, 56px); color: #fff; text-shadow: 0 0 22px rgba(127,243,221,.45); }
.pulse-dots { width: 130px; height: 44px; } .pulse-dots circle { fill: var(--mint); opacity: .25; animation: blink 1.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes blink { 50% { opacity: 1; transform: translateY(-3px); } }
.pd-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ring { position: relative; display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border: 1.6px dotted var(--line); border-radius: 20px; background: rgba(6,14,18,.6); }
.ring svg { width: 100%; max-width: 110px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; } .ring .rb { stroke: rgba(127,243,221,.12); }
.ring .rf { stroke: var(--mint); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.4s cubic-bezier(.22,1,.36,1); filter: drop-shadow(0 0 6px rgba(127,243,221,.6)); }
#prog-detail.go .ring .rf { stroke-dasharray: var(--f) 100; }
.ring.win .rf { stroke: var(--cyan); } .ring.dd .rf { stroke: #ffb4c0; filter: drop-shadow(0 0 6px rgba(255,140,160,.5)); }
.ring b { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -78%); font-size: clamp(15px, 4vw, 20px); }
.ring small { margin-top: 6px; color: var(--muted); font-size: 12px; text-align: center; }
.pd-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.pd-facts b { display: block; font-size: 18px; color: var(--mint); } .pd-facts small { color: var(--muted); font-size: 11.5px; }
.pd-bars .bar { display: grid; grid-template-columns: 1fr 64px; grid-template-rows: auto 10px; column-gap: 10px; padding: 8px 4px; }
.pd-bars .bl { font: 600 13px Outfit, system-ui, sans-serif; color: var(--muted); } .pd-bars .bar.me .bl { color: #fff; }
.pd-bars .bar i { grid-column: 1; grid-row: 2; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--teal), var(--cyan)); width: 0; transition: width 1.3s cubic-bezier(.22,1,.36,1); box-shadow: 0 0 12px rgba(0,201,167,.4); }
#prog-detail.go .pd-bars .bar i { width: var(--w); }
.pd-bars .bar:not(.me) i { opacity: .45; }
.pd-bars .bar b { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; color: var(--mint); }
.wd-to { margin-top: 4px; } .wd-note { color: var(--muted); font-size: 12.5px; }

.cp-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.cp-box{width:min(420px,100%);display:grid;gap:12px;padding:20px}
.cp-box h3{margin:0}.cp-row{display:flex;gap:10px}.cp-row .btn{flex:1}

.seg{display:flex;gap:6px;padding:5px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);margin:16px 0 4px}
.seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:0;border-radius:12px;background:none;color:inherit;font:inherit;font-weight:700;opacity:.65;cursor:pointer}
.seg button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.seg button.on{opacity:1;background:linear-gradient(135deg,#19e3c1,#1fb8e0);color:#04121a}
.in-wallet>.page{padding:0;margin:0;max-width:none}.in-wallet .page-head{display:none}
.trust{margin:28px 0 18px}.trust h2{margin:6px 0 14px}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.trust-grid>div{display:grid;gap:6px;padding:16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(25,227,193,.18)}
.trust-grid span{opacity:.75;font-size:.92em;line-height:1.45}.trust-grid a{color:#19e3c1}

.kx-field{transform:none!important}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;max-width:460px}
.qk{display:flex;align-items:center;gap:10px;padding:14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(25,227,193,.3);color:inherit;text-decoration:none;backdrop-filter:blur(8px)}
.qk svg{width:26px;height:26px;fill:none;stroke:#19e3c1;stroke-width:2;flex:none}.qk span{display:grid}.qk small{opacity:.7}
.kxl2{margin-top:10px}
.kxl2{width:100%;min-width:0;max-width:min(1280px,100%);box-sizing:border-box}
.kxl2 *{min-width:0}.kxl2-calc{flex-wrap:wrap}

.ep-qr{margin:0 0 12px;display:grid;justify-items:center;gap:8px;text-align:center}
.ep-qr img{width:min(240px,70vw);aspect-ratio:1;object-fit:contain;background:#fff;border-radius:16px;padding:10px}
.ep-qr figcaption{font-size:.9em;opacity:.8}.ep-copy{width:100%;margin-bottom:10px}

/* home redesign */
.h-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:22px 0 8px;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,rgba(25,227,193,.12),rgba(167,139,250,.1));border:1px solid rgba(25,227,193,.25)}
.h-stats>div{display:grid;justify-items:center;padding:16px 6px;gap:2px}.h-stats>div+div{border-left:1px solid rgba(255,255,255,.08)}
.h-stats b{font-size:1.6em;color:#5ff5dc}.h-stats small{opacity:.7;font-size:.8em}
.programs-home .list-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px}
.h-rail{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;margin:0 -16px;padding-inline:16px;scrollbar-width:none}
.h-rail::-webkit-scrollbar{display:none}.h-rail>*{flex:0 0 min(84%,340px);scroll-snap-align:start}
.h-trust{margin:30px 0 6px}.h-trust h2{margin:8px 0 14px;font-size:1.6em;line-height:1.15}
.grad{background:linear-gradient(90deg,#19e3c1,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-tgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:860px){.h-tgrid{grid-template-columns:repeat(3,1fr)}}
.h-tgrid>div{display:grid;gap:4px;padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.h-tgrid i{font-style:normal;font-size:1.5em}.h-tgrid b{font-size:.98em}.h-tgrid small{opacity:.7;line-height:1.35}.h-tgrid a{color:#19e3c1}
.h-risk{opacity:.55;font-size:.82em;text-align:center;margin:10px 0 30px}
.kxl2-sec:first-of-type{padding-top:30px}
.h-rail{margin:0!important;padding-inline:0!important}html,body{overflow-x:clip}

/* wallet redesign */
body[data-page="wallet"] .balance{background:radial-gradient(120% 140% at 0% 0%,rgba(25,227,193,.22),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(167,139,250,.2),transparent 55%),rgba(10,20,24,.7);border:1px solid rgba(25,227,193,.3);border-radius:24px}
.pkr-eq{display:block;margin-top:4px;color:#5ff5dc;font-size:15px}
.w-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 4px}
.w-quick a{display:grid;justify-items:center;gap:6px;padding:14px 6px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:inherit;text-decoration:none;font-size:.88em;font-weight:600}
.w-quick svg{width:22px;height:22px;fill:none;stroke:#19e3c1;stroke-width:2}
.w-copying{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0}.w-copying .lab{width:100%;opacity:.7;font-size:.85em}
.chip{padding:7px 12px;border-radius:999px;background:rgba(25,227,193,.12);border:1px solid rgba(25,227,193,.35);color:#bffbef;text-decoration:none;font-size:.88em}

.me-pic{flex:none;width:38px;height:38px;border-radius:50%;margin-left:10px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#19e3c1,#a78bfa);color:#04121a;text-decoration:none;box-shadow:0 0 0 2px rgba(255,255,255,.15),0 0 18px rgba(25,227,193,.35)}
.me-pic[hidden]{display:none}.me-pic img{width:100%;height:100%;object-fit:cover}.me-pic b{font-size:17px;font-weight:800}

/* logged-in home */
body[data-page="dash"] .dash .balance{background:radial-gradient(120% 140% at 0% 0%,rgba(25,227,193,.22),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(167,139,250,.2),transparent 55%),rgba(10,20,24,.7);border:1px solid rgba(25,227,193,.3);border-radius:24px}
.d-moves{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.d-moves .btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px}.d-moves svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
.dash>.card{margin-top:14px}
.d-fast{display:grid;gap:10px}.d-amts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.d-amts a{text-align:center;padding:11px 4px;border-radius:12px;background:rgba(25,227,193,.1);border:1px solid rgba(25,227,193,.35);color:#bffbef;text-decoration:none;font-weight:700;font-size:.85em}
.d-fast small{opacity:.65}
.d-grow{display:grid;gap:10px}.d-slab b{color:#5ff5dc;font-size:1.2em}
.d-grow input[type=range]{width:100%;accent-color:#19e3c1}
.d-out{display:grid;gap:8px}.d-out a{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:14px;background:rgba(255,255,255,.04);color:inherit;text-decoration:none}
.d-out span{display:grid}.d-out small{opacity:.6;font-size:.8em}.d-out b{font-size:1.15em;color:#5ff5dc}
.d-bonus ul{margin:8px 0 0;padding-left:18px;line-height:1.7;opacity:.85}.d-bonus a{color:#19e3c1}

/* animated one-card tutorial: 12s loop, 3s per step */
.tut{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center;margin-top:14px;padding:16px}
.h-tut .tut{margin-top:22px}
.tut-phone{position:relative;height:200px;border-radius:22px;border:2px solid rgba(255,255,255,.18);background:linear-gradient(180deg,#0b1a1f,#071014);overflow:hidden;box-shadow:0 0 24px rgba(25,227,193,.18)}
.tut-phone::before{content:"";position:absolute;top:7px;left:50%;width:36px;height:5px;border-radius:9px;background:rgba(255,255,255,.18);transform:translateX(-50%)}
.tut-s{position:absolute;inset:22px 10px 12px;display:grid;align-content:center;gap:8px;text-align:center;opacity:0;animation:tutS 12s infinite}
.tut-s small{opacity:.65;font-size:11px}.tut-s b{font-size:15px}.tut-s .up{color:#5ff5dc}
.tut-btn{font-style:normal;font-size:10.5px;font-weight:800;padding:8px 4px;border-radius:10px;background:linear-gradient(135deg,#19e3c1,#1fb8e0);color:#04121a}
.tut-s svg{width:100%;height:34px}.tut-s path{fill:none;stroke:#19e3c1;stroke-width:2.5;stroke-dasharray:140;stroke-dashoffset:140;animation:tutL 12s infinite}
.s2{animation-delay:3s}.s3{animation-delay:6s}.s4{animation-delay:9s}
@keyframes tutS{0%{opacity:0;transform:translateY(10px)}4%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes tutL{0%,50%{stroke-dashoffset:140}68%,100%{stroke-dashoffset:0}}
.tut-tap{position:absolute;left:50%;bottom:44px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:rgba(255,255,255,.35);opacity:0;animation:tutT 3s infinite}
@keyframes tutT{0%,40%{opacity:0;transform:scale(1.6)}55%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(.8)}}
.tut-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tut-steps li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95em;opacity:.45;animation:tutH 12s infinite}
.tut-steps li:nth-child(2){animation-delay:3s}.tut-steps li:nth-child(3){animation-delay:6s}.tut-steps li:nth-child(4){animation-delay:9s}
.tut-steps b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.85em;background:rgba(25,227,193,.15);color:#5ff5dc;border:1px solid rgba(25,227,193,.4)}
@keyframes tutH{0%{opacity:.45}4%,22%{opacity:1;transform:translateX(4px)}26%,100%{opacity:.45;transform:none}}
@media(prefers-reduced-motion:reduce){.tut-s,.tut-steps li,.tut-tap,.tut-s path{animation:none}.s1{opacity:1}.tut-steps li{opacity:1}}

.impact{margin-top:18px;padding:20px;display:grid;gap:10px;background:radial-gradient(120% 120% at 100% 0%,rgba(217,178,90,.18),transparent 60%),rgba(10,20,24,.7);border:1px solid rgba(217,178,90,.35)}
.impact h2{margin:0;font-size:1.45em;line-height:1.2}.impact h2 b{color:#f3cf7a}.impact p{margin:0;opacity:.8;line-height:1.5}
.story{margin:0;display:grid;gap:8px;padding:12px;border-radius:16px;background:rgba(255,255,255,.04)}
.story img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}.story blockquote{margin:0;font-size:.95em}.story figcaption{opacity:.6;font-size:.85em}
.impact-link{color:#f3cf7a;font-weight:700;text-decoration:none}.impact small{opacity:.55;font-size:.78em}