/* Page-specific styles lifted from the static track-money.html.
   These lived in a <style> block in <head>. The first port only
   extracted the page BODY, so this CSS was dropped entirely and
   the page rendered unstyled. Enqueued for this template only. */

/* Track Money — bespoke tracker widget only.
   Page chrome (nav, footer, buttons, hero, type) comes from the shared sheets so
   this page matches every other one; it previously redefined all of that inline,
   which is why its header and footer drifted. */
h1.track-h {
    font-size:clamp(38px,6vw,68px); font-weight:700; line-height:1.08;
    letter-spacing:-0.035em; color:white; margin-bottom:18px; text-wrap:balance;
  }

  h1.track-h .accent {
    background:none;   color:var(--nc-magenta,#F64477);
    font-style:normal; line-height:1.18; padding-bottom:0.16em; display:inline-block;
  }

  .track-sub { font-size:18px; color:var(--ink-soft); max-width:520px; margin:0 auto 50px; line-height:1.6; }


  /* Track form card */
  .track-card {
    background:rgba(40,18,58,0.7); border:1px solid rgba(255,255,255,0.1);
    border-radius:24px; -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); padding:40px;
    box-shadow:0 40px 80px rgba(0,0,0,0.5); max-width:620px; margin:0 auto;
  }

  .track-card .field { margin-bottom:18px; text-align:left; }

  .track-card .field label {
    display:block; font-size:11px; font-weight:700; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;
  }

  .track-card .field input {
    width:100%; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.12);
    border-radius:12px; padding:15px 16px; font-size:15px; color:white;
    font-family:inherit; outline:none; transition:border-color .2s;
  }

  .track-card .field input::placeholder { color:rgba(255,255,255,0.35); }

  .track-card .field input:focus { border-color:var(--orange); }

  /* Solid brand fill — the flattening pass left this button with no background and
     a white label, i.e. invisible. */
  .track-card .submit {
    width:100%; padding:16px; background:#8D2341; border-radius:12px;
    color:white; font-size:15px; font-weight:700; letter-spacing:0.02em;
    margin-top:8px; box-shadow:0 10px 24px rgba(246,68,119,0.3);
    transition:box-shadow .2s, transform .15s;
  }

  .track-card .submit:hover { box-shadow:0 16px 36px rgba(246,68,119,0.45); transform:translateY(-1px); }


  /* Result timeline (hidden until track) */
  .track-result { max-width:620px; margin:40px auto 0; display:none; }

  .track-result.show { display:block; }

  .result-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 28px; background:rgba(255,255,255,0.04);
    border:1px solid var(--line); border-radius:18px; margin-bottom:24px;
  }

  .result-head .ref { font-size:12px; color:var(--ink-soft); letter-spacing:0.04em; font-family:'Space Grotesk',monospace; }

  .result-head .amt { font-size:28px; font-weight:800; background:none;   color:var(--nc-magenta,#F64477); letter-spacing:-0.03em; }

  .result-head .status { font-size:11px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:#4ade80; display:flex; align-items:center; gap:8px; }

  .result-head .status .dot { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 10px #4ade80; animation:pulse 1.5s ease-in-out infinite; }

  @keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.3);} }


  .timeline { display:grid; gap:0; }

  .tl-step {
    display:grid; grid-template-columns:40px 1fr auto; gap:18px; align-items:start;
    padding:0 0 4px;
  }

  .tl-step .marker { display:flex; flex-direction:column; align-items:center; }

  .tl-step .circle {
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--line); background:var(--bg-2); color:var(--ink-soft);
  }

  .tl-step.done .circle { background:#8D2341; border-color:#8D2341; color:white; box-shadow:0 4px 14px rgba(246,68,119,0.35); }

  .tl-step .circle svg { width:16px; height:16px; }

  .tl-step .bar { width:2px; flex:1; min-height:28px; background:var(--line); margin:4px 0; }

  .tl-step.done .bar { background:linear-gradient(180deg,var(--orange),var(--pink)); }

  .tl-step:last-child .bar { display:none; }

  .tl-step .body { padding:6px 0 26px; }

  .tl-step .ttl { font-size:15px; font-weight:700; color:white; margin-bottom:4px; }

  .tl-step .desc { font-size:13px; color:var(--ink-soft); line-height:1.5; }

  .tl-step .time { font-size:12px; color:var(--ink-soft); white-space:nowrap; padding-top:8px; font-family:'Space Grotesk',monospace; }


  .help { text-align:center; margin:50px auto 80px; font-size:13px; color:var(--ink-soft); }

  .help a { color:var(--orange); }
@media (max-width:560px){ .track-card{padding:28px;}}

  /* This page's hero is .track-hero, not .page-hero — the clearance rule below
     was targeting a class that does not exist here, so the position:absolute nav
     overlapped the heading. */