/* ==========================================================================
   Free account signup (SITE-1466) — /AccountManagement/FreeAccountSignup.html.
   Daniel's locked mock (Oct 27, 2026, email signup, no SSO): the form column
   beside the four onboarding cards in a carousel, all on one screen on
   desktop. The column, badge, chips, card and fields are account-forms.css
   (load it first); this file is the two columns and the cards.
   ========================================================================== */

/* Form column | cards. The page grows (and scrolls) only when the screen
   is too short for the form; the cards shrink to fit the height first. */
.fs-main {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  align-content: center;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 18px;
}

/* The last card's "Sign up" points at the form */
.ac-card { transition: box-shadow var(--ti-dur); }
.ac-card.is-called { box-shadow: 0 0 0 2px var(--ti-orange), var(--ti-shadow-md); }

/* Onboarding cards: one at a time, scaled to fit the screen height */
.fs-cards { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
/* Full column width: a slide is a size container, so it can't size the track */
.fs-track { display: flex; justify-content: center; align-self: stretch; }
.fs-slide {
  width: min(420px, 100%, calc((100vh - 150px) * 420 / 528));
  width: min(420px, 100%, calc((100dvh - 150px) * 420 / 528));
  aspect-ratio: 420 / 528;
  margin: 0;
  container-type: inline-size;
}
.fs-slide[hidden] { display: none; }

/* --------------------------------------------------------------------------
   The cards (.fsc): live HTML pictures from Daniel's onboarding cards and
   the boss's animated versions (handoffs/animated-cards-for-web-dev,
   first-run-pictures.html), on the --ti-* colours. Each is drawn at
   420x528 and scales with the card's width: --u is 1px at 420 wide, so the
   sizes inside are illustration sizes written as calc(N * var(--u)).
   free-signup.js adds .is-on to play a card (and .is-held to pause it); its
   markup alone is the finished picture.
   -------------------------------------------------------------------------- */
.fsc {
  --u: calc(100cqw / 420);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: calc(28 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: 1.5;
  color: var(--ti-text);
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-lg);
  background:
    radial-gradient(130% 55% at 50% 0%, var(--ti-orange-wash), transparent 70%),
    var(--ti-card);
  box-shadow: var(--ti-shadow);
}
.fsc p,
.fsc ol,
.fsc ul,
.fsc dl,
.fsc dd { margin: 0; padding: 0; }
.fsc ol,
.fsc ul { list-style: none; }
.fsc svg { display: block; overflow: visible; }
/* The art is 264 tall when the copy fits and gives up its spare space
   (down to its own content) when a longer card's copy needs it */
.fsc-art { display: flex; flex-direction: column; justify-content: center; flex: 0 1 calc(264 * var(--u)); }
.fsc-txt { flex: none; margin-top: calc(22 * var(--u)); }
.fsc-prem {
  display: inline-block;
  margin: 0 0 calc(10 * var(--u));
  padding: calc(3 * var(--u)) calc(10 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: var(--ti-fw-bold);
  line-height: var(--ti-lh-snug);
  letter-spacing: var(--ti-track-caps-sm);
  color: var(--ti-amber);
  border: 1px solid var(--ti-orange-line);
  border-radius: var(--ti-radius-pill);
  background: var(--ti-orange-dim);
}
.fsc .fsc-eyebrow {
  margin: 0 0 calc(8 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: var(--ti-fw-bold);
  line-height: var(--ti-lh-snug);
  letter-spacing: var(--ti-track-caps);
  text-transform: uppercase;
  color: var(--ti-orange);
}
.fsc h2 {
  margin: 0 0 calc(10 * var(--u));
  font-size: calc(26 * var(--u));
  font-weight: var(--ti-fw-black);
  line-height: var(--ti-lh-tight);
  letter-spacing: var(--ti-track-tight);
}
.fsc-body { color: var(--ti-text-subtle); }
.fsc-caps {
  display: block;
  font-size: calc(10.5 * var(--u));
  font-weight: var(--ti-fw-bold);
  line-height: var(--ti-lh-snug);
  letter-spacing: var(--ti-track-caps);
  text-transform: uppercase;
  color: var(--ti-muted);
}
.fsc .is-down { --tone: var(--ti-red); }

/* 1: the radar sweeps once every 4 s; each ticker lights as the line
   passes it and its alert slides in at the top of the list. free-signup.js
   turns the sweep and lights the tickers from one clock with the list. */
.fsc-1 .fsc-art { flex-direction: row; align-items: center; justify-content: space-between; gap: calc(14 * var(--u)); }
.fsc-radar { position: relative; flex: 0 0 calc(152 * var(--u)); height: calc(152 * var(--u)); }
.fsc-radar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fsc-sweep {
  position: absolute;
  inset: calc(4 * var(--u));
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 300deg, var(--ti-orange-wash) 322deg, var(--ti-orange-dim) 352deg, var(--ti-orange-line) 359.5deg, transparent 360deg);
}
.fsc-sweep::after {   /* the line, at the sweep's leading edge */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(1.5 * var(--u));
  height: 50%;
  margin-left: calc(-0.75 * var(--u));
  border-radius: var(--ti-radius-pill);
  background: var(--ti-orange);
  box-shadow: 0 0 calc(6 * var(--u)) var(--ti-orange-glow);
  opacity: 0;
}
.fsc-ring { fill: none; stroke: var(--ti-orange-line); stroke-width: 1; }
.fsc-axis { stroke: var(--ti-orange-line); stroke-width: 1; opacity: 0.6; }
.fsc-hub { fill: var(--ti-orange); }
.fsc-blip { --tone: var(--ti-green); }
.fsc-halo { fill: var(--tone); fill-opacity: 0.14; stroke: var(--tone); stroke-opacity: 0.4; transform-box: fill-box; transform-origin: center; }
.fsc-pt { fill: var(--tone); }
.fsc-radar text { font-family: var(--ti-font); font-size: 10.5px; font-weight: var(--ti-fw-bold); fill: var(--ti-text-soft); }
.fsc-alerts {
  flex: 1 1 auto;
  min-width: 0;
  padding: calc(14 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u));
  border: 1px solid var(--ti-border-strong);
  border-radius: var(--ti-radius);
  background: var(--ti-card-elev);
  box-shadow: var(--ti-shadow-sm);
}
.fsc-alerts .fsc-caps { margin: 0 0 calc(8 * var(--u)); }
.fsc-feed li { --tone: var(--ti-green); position: relative; margin: 0 calc(-6 * var(--u)) calc(4 * var(--u)); padding: calc(5 * var(--u)) calc(6 * var(--u)) calc(5 * var(--u)) calc(22 * var(--u)); border-radius: calc(8 * var(--u)); }
.fsc-feed li::before {
  content: "";
  position: absolute;
  left: calc(7 * var(--u));
  top: calc(11 * var(--u));
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: var(--tone);
}
.fsc-feed b { display: block; font-size: calc(15 * var(--u)); font-weight: var(--ti-fw-black); line-height: 1.2; }
.fsc-feed span { display: block; min-height: 2.7em; font-size: calc(12.5 * var(--u)); line-height: 1.35; color: var(--ti-muted); text-wrap: balance; }
.fsc-1.is-on .fsc-sweep::after { opacity: 1; }
.fsc-feed li.is-new { animation: fsc-in 0.45s ease-out both, fsc-fresh 2.6s ease-out both; }
@keyframes fsc-in { from { opacity: 0; transform: translateX(calc(16 * var(--u))); } }
@keyframes fsc-fresh { from { background: var(--ti-orange-dim); } to { background: transparent; } }

/* 2: the screener's rows race and re-rank; the view turns from Race to Heat
   Map to Grid (free-signup.js). Grid View is the race without its bars. */
.fsc-tabs { display: flex; gap: calc(20 * var(--u)); border-bottom: 1px solid var(--ti-border-strong); }
.fsc-tabs span {
  padding: 0 0 calc(9 * var(--u));
  font-size: calc(13.5 * var(--u));
  font-weight: var(--ti-fw-semibold);
  line-height: var(--ti-lh-snug);
  color: var(--ti-muted);
  transition: color 0.3s, box-shadow 0.3s;
}
.fsc-tabs .on { color: var(--ti-orange); box-shadow: inset 0 -2px 0 var(--ti-orange); }
.fsc-views { position: relative; height: calc(204 * var(--u)); overflow: hidden; }
.fsc-rank { height: 100%; transition: opacity 0.35s; }
.fsc-rank li {
  display: grid;
  grid-template-columns: calc(20 * var(--u)) calc(58 * var(--u)) 1fr calc(62 * var(--u));
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(34 * var(--u));
  border-bottom: 1px solid var(--ti-border);
  font-variant-numeric: tabular-nums;
}
.fsc-rank .n { font-size: calc(12 * var(--u)); color: var(--ti-muted); }
.fsc-rank .t { font-size: calc(14.5 * var(--u)); font-weight: var(--ti-fw-black); }
.fsc-rank .bar { height: calc(6 * var(--u)); border-radius: var(--ti-radius-pill); background: var(--ti-green-dim); transition: opacity 0.35s; }
.fsc-rank .bar i { display: block; height: 100%; border-radius: inherit; background: var(--ti-green); opacity: 0.75; transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fsc-rank .p { font-size: calc(14 * var(--u)); font-weight: var(--ti-fw-bold); text-align: right; color: var(--ti-green); }
.fsc-rank.is-live li {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(calc(var(--r) * 34 * var(--u)));
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s;
}
.fsc-rank.is-live li.is-out { opacity: 0; }
.fsc-rank.is-grid .bar { opacity: 0; }
.fsc-heat {
  position: absolute;
  inset: calc(12 * var(--u)) 0 calc(6 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: calc(8 * var(--u));
  opacity: 0;
  transition: opacity 0.35s;
}
.fsc-views.is-heat .fsc-rank { opacity: 0; }
.fsc-views.is-heat .fsc-heat { opacity: 1; }
.fsc-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--u));
  border: 1px solid var(--ti-green-line);
  border-radius: calc(10 * var(--u));
  background: color-mix(in srgb, var(--ti-green) calc(var(--a, 0.5) * 55%), var(--ti-card-elev));
  transition: background 0.7s;
}
.fsc-tile b { font-size: calc(14 * var(--u)); font-weight: var(--ti-fw-black); }
.fsc-tile span { font-size: calc(12.5 * var(--u)); font-weight: var(--ti-fw-semibold); color: var(--ti-text-soft); font-variant-numeric: tabular-nums; }

/* 3: the steps light one at a time down the line (free-signup.js sets
   .is-dim / .is-now and the line's --p), then the tryout starts over */
.fsc-3 .fsc-art .fsc-caps { margin: 0 0 calc(14 * var(--u)); }
.fsc-steps { position: relative; }
.fsc-steps::before,
.fsc-steps::after {
  content: "";
  position: absolute;
  left: calc(13 * var(--u));
  top: calc(14 * var(--u));
  width: calc(2 * var(--u));
  background: var(--ti-border-strong);
}
.fsc-steps::before { bottom: calc(14 * var(--u)); }
.fsc-steps::after { height: calc((100% - 28 * var(--u)) * var(--p, 1)); background: var(--ti-orange-line); transition: height 0.5s ease-out; }
.fsc-steps li { position: relative; z-index: 1; display: flex; align-items: center; gap: calc(14 * var(--u)); height: calc(38 * var(--u)); }
.fsc-steps .k {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(28 * var(--u));
  height: calc(28 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: var(--ti-fw-black);
  color: var(--ti-on-accent);
  border-radius: 50%;
  background: var(--ti-orange);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--ti-card);
  transition: transform 0.25s ease-out, background 0.25s, color 0.25s;
}
.fsc-steps b { font-size: calc(15 * var(--u)); font-weight: var(--ti-fw-black); transition: color 0.25s; }
.fsc-steps span { font-size: calc(14 * var(--u)); color: var(--ti-muted); transition: color 0.25s; }
.fsc-steps li.is-dim .k { color: var(--ti-muted); background: var(--ti-border-strong); }
.fsc-steps li.is-dim b { color: var(--ti-muted); }
.fsc-steps li.is-dim span { color: var(--ti-muted-dim); }
.fsc-steps li.is-now .k { transform: scale(1.18); animation: fsc-glow 1.4s ease-in-out infinite; }
.fsc-again { margin-top: calc(12 * var(--u)); padding-left: calc(42 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.4; color: var(--ti-text-subtle); text-wrap: balance; }
.fsc-again.is-again { animation: fsc-again 1.4s ease-out; }
@keyframes fsc-glow {
  0%, 100% { box-shadow: 0 0 0 calc(2 * var(--u)) var(--ti-card), 0 0 calc(6 * var(--u)) var(--ti-orange-glow); }
  50% { box-shadow: 0 0 0 calc(2 * var(--u)) var(--ti-card), 0 0 calc(18 * var(--u)) var(--ti-orange-glow); }
}
@keyframes fsc-again { 0%, 40% { color: var(--ti-amber); } }

/* 4: the idea types itself out, then OddsMaker runs it: each alert fills a
   bar, the money line grows and the stats count (free-signup.js) */
.fsc-ask { font-size: calc(14.5 * var(--u)); line-height: 2.05; color: var(--ti-text-soft); }
.fsc-chip {
  display: inline-block;
  padding: 0 calc(9 * var(--u));
  line-height: calc(24 * var(--u));
  font-weight: var(--ti-fw-bold);
  color: var(--ti-amber);
  border: 1px solid var(--ti-orange-line);
  border-radius: var(--ti-radius-pill);
  background: var(--ti-orange-dim);
}
.fsc-ask.is-live .tok { opacity: 0; transition: opacity 0.2s; }
.fsc-ask.is-live .tok.is-on { opacity: 1; }
.fsc-ask.is-live .fsc-chip.is-on { animation: fsc-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fsc-result {
  margin-top: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  border: 1px solid var(--ti-border-strong);
  border-radius: var(--ti-radius);
  background: var(--ti-card-elev);
  box-shadow: var(--ti-shadow-sm);
}
.fsc-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 calc(8 * var(--u)); }
.fsc-ex {
  padding: calc(1 * var(--u)) calc(8 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: var(--ti-fw-semibold);
  line-height: var(--ti-lh-snug);
  letter-spacing: var(--ti-track-caps-sm);
  color: var(--ti-muted);
  border: 1px solid var(--ti-border-strong);
  border-radius: var(--ti-radius-pill);
}
.fsc-mid { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.fsc-mid svg { flex: 0 0 calc(176 * var(--u)); height: calc(86 * var(--u)); }
.fsc-line { fill: none; stroke: var(--ti-orange); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fsc-area { fill: var(--ti-orange-dim); }
.fsc-end { fill: var(--ti-orange); }
.fsc-end-halo { fill: var(--ti-orange-dim); transform-box: fill-box; transform-origin: center; }
.fsc-4.is-on .fsc-end-halo.is-done { animation: fsc-beat 1.6s ease-in-out infinite; }
.fsc-mid dl { display: grid; gap: calc(6 * var(--u)); font-variant-numeric: tabular-nums; }
.fsc-mid dl div { display: flex; flex-direction: column-reverse; }   /* each value above its label */
.fsc-mid dd { font-size: calc(15 * var(--u)); font-weight: var(--ti-fw-black); line-height: 1.1; }
.fsc-mid dd.fsc-win { color: var(--ti-green); }
.fsc-mid dt { font-size: calc(9.5 * var(--u)); font-weight: var(--ti-fw-semibold); line-height: var(--ti-lh-snug); letter-spacing: var(--ti-track-caps-sm); text-transform: uppercase; color: var(--ti-muted); }
.fsc-ticks { display: flex; gap: calc(3 * var(--u)); margin-top: calc(10 * var(--u)); }
.fsc-ticks i { flex: 1; height: calc(10 * var(--u)); border-radius: calc(3 * var(--u)); opacity: 0.8; transition: background 0.2s, opacity 0.2s; }
.fsc-ticks .w { background: var(--ti-green); }
.fsc-ticks .l { background: var(--ti-red); }
.fsc-ticks.is-live i:not(.is-on) { background: var(--ti-border-strong); opacity: 0.6; }
.fsc-ticks i.is-now { box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--ti-orange); }
.fsc-4 .fsc-art { transition: opacity 0.35s; }
.fsc-4 .fsc-art.is-gone { opacity: 0; }
@keyframes fsc-pop { from { transform: scale(0.6); opacity: 0; } }
@keyframes fsc-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }

/* Paused (the nav's button, or the card is off screen / the tab hidden) */
.fsc.is-held,
.fsc.is-held *,
.fsc.is-held *::after { animation-play-state: paused !important; }

.fs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}
.fs-back,
.fs-next {
  font: inherit;
  font-size: var(--ti-fs-sm);
  font-weight: var(--ti-fw-bold);
  cursor: pointer;
  border: 0;
  border-radius: var(--ti-radius-sm);
}
.fs-back { padding: 8px 10px; color: var(--ti-text-subtle); background: none; }
.fs-back:hover { color: var(--ti-text); }
.fs-next {
  min-width: 88px;
  padding: 9px 16px;
  color: var(--ti-on-accent);
  background: var(--ti-orange);
  transition: background var(--ti-dur-fast);
}
.fs-next:hover { background: var(--ti-orange-hot); }
.fs-back:focus-visible,
.fs-next:focus-visible,
.fs-dot:focus-visible { outline: 2px solid var(--ti-orange); outline-offset: 2px; }
.fs-dots { display: flex; align-items: center; gap: 2px; }
/* Each dot is a 22px tap target around the visible pill */
.fs-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  border: 0;
  border-radius: var(--ti-radius-pill);
  background: none;
}
.fs-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--ti-radius-pill);
  background: var(--ti-border-strong);
  transition: width var(--ti-dur), background var(--ti-dur);
}
.fs-dot[aria-current="true"]::before { width: 20px; background: var(--ti-orange); }
/* Pause/play for the card animations (free-signup.js), after the dots */
.fs-pause {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: 8px;
  padding: 0;
  color: var(--ti-text-subtle);
  cursor: pointer;
  border: 1px solid var(--ti-border-strong);
  border-radius: 50%;
  background: none;
}
.fs-pause:hover { color: var(--ti-text); border-color: var(--ti-orange); }
.fs-pause:focus-visible { outline: 2px solid var(--ti-orange); outline-offset: 2px; }
.fs-pause svg { width: 10px; height: 10px; fill: currentColor; }

/* Tablet and phone: one column (form, then cards), centred, scrolling */
@media (max-width: 900px) {
  .fs-main { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: center; gap: 36px; padding-top: 8px; }
  .fs-cards { width: 100%; max-width: 420px; }   /* centred, so it would shrink to the nav */
  .fs-slide { width: min(420px, 100%); }
}
@media (max-width: 560px) {
  .fs-main { padding: 0 16px 24px; }
}