/* AutoTrend System — the footer at the bottom of every member page except the charts (server/pages/footer.js).
   Design v3, approved 6 Oct 2026: design/platform-footer/footer.html. Full width, the members area's regular glass
   with a faint orange glow; the AutoTrend line and small triangles move behind it (site/footer.js).
   Light by default; dark with the dashboard's evening / night look (<html data-phase>). Colours live on .ft so
   they never change the page's own. */

.ft {
  --ft-bg: radial-gradient(900px 420px at 88% 125%, rgba(252,90,38,.10), transparent 65%), radial-gradient(800px 420px at 0% -25%, rgba(255,177,21,.12), transparent 70%), rgba(255,255,255,.44);
  --ft-border: rgba(255,255,255,.85);
  --ft-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 .5px rgba(20,30,50,.08), 0 -8px 40px rgba(30,40,70,.06);
  --ft-ink: #12141c; --ft-text: #2a2f3d; --ft-text-2: #5c6176; --ft-hot: #d9480f; --ft-focus: #0f5bb0;
  --ft-line: rgba(20,30,50,.10);
  --ft-chip: rgba(255,255,255,.50); --ft-chip-border: rgba(255,255,255,.85);
  --ft-buy: #1468c8; --ft-wait: #e0a100; --ft-sell: #df2f2a; /* the moving line: buy on blue, wait on yellow, sell on red */
  --ft-btn: rgba(255,255,255,.34); --ft-btn-border: rgba(255,255,255,.75); --ft-btn-hover: rgba(255,255,255,.55);
  --ft-open: #0a8f6c; --ft-pre: #c27a00; --ft-closed: #8d92aa;
  --ft-tile-border: rgba(20,30,50,.10);
}
html[data-phase="evening"] .ft, html[data-phase="night"] .ft {
  --ft-bg: radial-gradient(900px 420px at 88% 125%, rgba(252,90,38,.10), transparent 65%), radial-gradient(800px 420px at 0% -25%, rgba(255,150,21,.06), transparent 70%), rgba(24,27,38,.50);
  --ft-border: rgba(255,255,255,.10);
  --ft-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 -8px 40px rgba(0,0,0,.30);
  --ft-ink: #eef0f7; --ft-text: #d6d9e8; --ft-text-2: #9ea3bb; --ft-hot: #ffa45c; --ft-focus: #7cc6f0;
  --ft-line: rgba(255,255,255,.10);
  --ft-chip: rgba(255,255,255,.06); --ft-chip-border: rgba(255,255,255,.10);
  --ft-buy: #4fb3ec; --ft-wait: #ffc83d; --ft-sell: #ff5a4f;
  --ft-btn: rgba(255,255,255,.06); --ft-btn-border: rgba(255,255,255,.12); --ft-btn-hover: rgba(255,255,255,.12);
  --ft-open: #3fd3a4; --ft-pre: #ffc35c; --ft-closed: #8d92aa;
  --ft-tile-border: rgba(255,255,255,.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ft { --ft-bg: rgba(250,251,253,.96); }
  html[data-phase="evening"] .ft, html[data-phase="night"] .ft { --ft-bg: rgba(20,23,33,.96); }
}

/* the page ends with the footer: no space under it, and it reaches the screen edges */
body.ft-page { padding-bottom: 0; }
.ft-inset .ft { margin-left: -16px; margin-right: -16px; }

.ft {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 120px; border-radius: 44px 44px 0 0;
  background: var(--ft-bg); border: 1px solid var(--ft-border); border-bottom: 0; box-shadow: var(--ft-shadow);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  color: var(--ft-text-2);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased;
}
.ft *, .ft *::before { box-sizing: border-box; }
.ft a { text-decoration: none; }
.ft a:focus-visible, .ft button:focus-visible { outline: 3px solid var(--ft-focus); outline-offset: 3px; border-radius: 10px; }
.ft .ic { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ft-in { max-width: 1272px; margin: 0 auto; padding: 80px 32px calc(30px + env(safe-area-inset-bottom, 0px)); }
.ft-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.ft-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .3;
  background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ft-ink) 10%, transparent) 1px, transparent 1.2px) 0 0 / 22px 22px;
  -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%); }

/* logo, tagline, markets | link columns */
.ft-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.ft-intro { display: grid; gap: 22px; justify-items: start; min-width: 0; }

.ft .ft-logo { display: block; padding: 0; border: 0; background: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; border-radius: 18px; max-width: 100%; }
/* Dimitrios's logo files: dark text on the light looks, white text on the evening / night looks */
.ft-brand { display: block; transform-origin: 12% 50%; }
.ft-brand img { display: block; width: auto; height: 50px; max-width: 100%; }
.ft-brand .logo-on-dark, html[data-phase="evening"] .ft-brand .logo-on-light, html[data-phase="night"] .ft-brand .logo-on-light { display: none; }
html[data-phase="evening"] .ft-brand .logo-on-dark, html[data-phase="night"] .ft-brand .logo-on-dark { display: block; }
.ft-logo.jump .ft-brand { animation: ft-jump .7s cubic-bezier(.2,1.6,.4,1); }
@keyframes ft-jump { 0% { transform: none; } 35% { transform: translateY(-6px) scale(1.04); } 100% { transform: none; } }
.ft.in .ft-brand { animation: ft-pop 1s cubic-bezier(.25,1.6,.45,1) both; }
@keyframes ft-pop { from { transform: scale(.9); opacity: .4; } to { transform: none; opacity: 1; } }

.ft-tag { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ft-text-2); }

/* social icons, under the tagline */
.ft-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.ft-social a {
  width: 42px; height: 42px; border-radius: 21px; display: grid; place-items: center;
  color: var(--ft-text-2); background: var(--ft-btn); border: 1px solid var(--ft-btn-border);
  transition: color .2s, background .2s, transform .25s cubic-bezier(.3,1.6,.5,1);
}
.ft-social a:hover { color: var(--ft-hot); background: var(--ft-btn-hover); transform: translateY(-2px); }
.ft-social a:focus-visible { border-radius: 21px; }

/* markets right now (New York time, site/footer.js): centred at the bottom, above the fine print */
.ft-now { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 24px; text-align: center; }
.ft-markets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ft-mk { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px 0 11px; border-radius: 17px; background: var(--ft-chip); border: 1px solid var(--ft-chip-border); font-size: 13.5px; font-weight: 650; color: var(--ft-text); white-space: nowrap; }
.ft-mk small { font-size: 13px; font-weight: 600; color: var(--ft-text-2); }
.ft-mk i { width: 8px; height: 8px; border-radius: 4px; background: var(--ft-closed); flex: none; }
.ft-mk[data-s="open"] i { background: var(--ft-open); animation: ft-ping 2.4s ease-out infinite; }
.ft-mk[data-s="pre"] i { background: var(--ft-pre); }
@keyframes ft-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ft-open) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.ft-clock { font-size: 13px; color: var(--ft-text-2); font-variant-numeric: tabular-nums; min-height: 20px; }

.ft-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-top: 6px; }
.ft-col h2 { margin: 0 0 14px; font-size: 12px; line-height: 1.5; font-weight: 750; letter-spacing: .9px; text-transform: uppercase; color: var(--ft-text-2); }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ft-col a {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 2px;
  font-size: 16px; font-weight: 620; color: var(--ft-text);
  transition: color .2s, transform .25s cubic-bezier(.3,1.6,.5,1);
}
/* a small orange triangle slides in on hover */
.ft-col a::before {
  content: ''; width: 9px; height: 8px; margin-left: -17px; opacity: 0; transform: translateX(-6px) rotate(-90deg);
  background: linear-gradient(180deg, #ffb115, #fc4126); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1);
}
.ft-col a:hover { color: var(--ft-hot); transform: translateX(14px); text-decoration: none; }
.ft-col a:hover::before { opacity: 1; transform: rotate(-90deg); }

/* an open lane where the AutoTrend line runs */
.ft-stage { height: 150px; }

/* fine print */
.ft-bottom { padding-top: 22px; border-top: 1px solid var(--ft-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.ft-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: 14px; }
.ft-legal a { color: var(--ft-text); font-weight: 600; }
.ft-legal a:hover { color: var(--ft-hot); text-decoration: none; }
.ft-risk { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--ft-text-2); max-width: 92ch; }

/* back to top: quiet glass; the triangle launches */
.ft .ft-up {
  height: 42px; padding: 0 16px 0 6px; border-radius: 21px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; font: 600 14px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; color: var(--ft-text);
  background: var(--ft-btn); border: 1px solid var(--ft-btn-border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background .2s;
}
.ft .ft-up:hover { background: var(--ft-btn-hover); }
.ft-up .rk { width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; overflow: hidden; }
.ft-up .rk svg { display: block; }
.ft-up.go .rk svg { animation: ft-launch .8s cubic-bezier(.5,0,.7,.3); }
@keyframes ft-launch { 0% { transform: none; } 40% { transform: translateY(3px); } 70% { transform: translateY(-34px); } 71% { transform: translateY(34px); } 100% { transform: none; } }

@media (max-width: 980px) {
  .ft { border-radius: 36px 36px 0 0; }
  .ft-in { padding-top: 60px; }
  .ft-top { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}
@media (max-width: 640px) {
  .ft { margin-top: 80px; border-radius: 30px 30px 0 0; }
  .ft-in { padding: 44px 22px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .ft-brand img { height: 40px; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .ft-stage { height: 110px; }
  .ft-bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft *, .ft *::before { animation: none !important; transition: none !important; }
}