/* ═══════════════════════════════════════════════════════════════════════════
   YOUR FILE, IN FOUR READS — styles for the personalised dashboard opening
   ═══════════════════════════════════════════════════════════════════════════

   Three tones carry meaning here and nothing else does: good, warn, bad.
   They are the only colour decisions on the page, which is what lets a
   reader scan four cards and know instantly which one needs them. An empty
   card is deliberately colourless — "we don't know this yet" is not a
   warning, and dressing it as one would be dishonest.
   ═══════════════════════════════════════════════════════════════════════════ */

.dfx{
  --dfx-good:#0E7C4A;
  --dfx-warn:#B4530A;
  --dfx-bad:#B3261E;
  --dfx-ink:var(--text-color,#13251d);
  --dfx-muted:var(--text-muted,#5b6b63);
  --dfx-card:var(--card-bg,#fff);
  --dfx-line:rgba(8,92,58,.14);
  display:block;
  margin:4px 0 22px;
}

/* ── Head ────────────────────────────────────────────────────────────── */

.dfx-head{margin:0 0 18px;}
.dfx-eyebrow{
  font:700 11px/1.5 var(--font-sans),sans-serif;
  letter-spacing:1.8px;color:var(--dfx-good);margin:0 0 8px;
}
.dfx-head h2{
  font:400 clamp(26px,5.2vw,38px)/1.12 Georgia,"Times New Roman",serif;
  letter-spacing:-1.2px;margin:0 0 8px;color:var(--dfx-ink);text-wrap:balance;
}
.dfx-lede{font-size:14px;line-height:1.6;color:var(--dfx-muted);margin:0 0 14px;max-width:52ch;}

.dfx-rail{height:2px;border-radius:2px;background:rgba(8,92,58,.12);overflow:hidden;}
.dfx-rail i{
  display:block;height:100%;width:100%;border-radius:2px;
  background:linear-gradient(90deg,#085C3A,#18C979);
  transform:scaleX(var(--p,0));transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

/* ── Cards ───────────────────────────────────────────────────────────── */

.dfx-grid{display:grid;gap:14px;}
@media (min-width:900px){ .dfx-grid{grid-template-columns:1fr 1fr;} }

.dfx-card{
  position:relative;
  background:var(--dfx-card);
  border:1px solid var(--dfx-line);
  border-radius:18px;
  padding:20px 20px 20px 22px;
  box-shadow:0 4px 18px rgba(8,92,58,.07);
  opacity:1;
  translate:0 0;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1), translate .5s cubic-bezier(.2,.7,.2,1);
  overflow:hidden;
}
/* Not yet reached. 0.72, not lower: at 0.42 the body text on these cards
   measured under 2:1 against the card, which is unreadable for anyone who
   stops mid-scroll. The reveal is a cue, not a curtain. */
.dfx-card.dfx-pending{opacity:.72;translate:0 14px;}

/* The tone stripe. One element, one meaning, down the leading edge. */
.dfx-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--dfx-good);
}
.dfx-card[data-tone="warn"]::before{background:var(--dfx-warn);}
.dfx-card[data-tone="bad"]::before{background:var(--dfx-bad);}
.dfx-card[data-tone="empty"]::before{background:rgba(8,92,58,.18);}

.dfx-tag{
  font:700 10px/1.4 var(--font-sans),sans-serif;
  letter-spacing:1.6px;color:var(--dfx-muted);margin:0 0 12px;
}
.dfx-title{
  font:400 clamp(19px,3.4vw,25px)/1.25 Georgia,"Times New Roman",serif;
  letter-spacing:-.6px;margin:0 0 7px;color:var(--dfx-ink);text-wrap:balance;
}
.dfx-sub{font-size:11.5px;line-height:1.5;color:var(--dfx-muted);margin:0 0 10px;}
.dfx-body{font-size:13.5px;line-height:1.65;color:var(--dfx-muted);margin:0;max-width:46ch;}

.dfx-list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:11px;}
.dfx-list li{display:grid;gap:3px;}
.dfx-list strong{font-size:13.5px;font-weight:700;color:var(--dfx-ink);line-height:1.35;}
.dfx-list span{font-size:12.5px;line-height:1.55;color:var(--dfx-muted);}

.dfx-cta{
  appearance:none;border:0;cursor:pointer;
  margin-top:16px;min-height:44px;padding:0 18px;
  border-radius:11px;
  background:rgba(31,164,99,.12);
  color:var(--dfx-good);
  font:700 13px/1 var(--font-sans),sans-serif;
  display:inline-flex;align-items:center;gap:8px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background .2s ease;
}
.dfx-cta:active{background:rgba(31,164,99,.2);}
.dfx-cta:focus-visible{outline:3px solid var(--dfx-good);outline-offset:3px;}

/* ── Figures ─────────────────────────────────────────────────────────── */

.dfx-figure{margin:0 0 14px;}
.dfx-art{width:100%;height:auto;max-width:260px;display:block;}

.dfx-gauge-track{fill:none;stroke:rgba(8,92,58,.13);stroke-width:13;stroke-linecap:round;}
.dfx-gauge-fill{
  fill:none;stroke-width:13;stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:calc(100 - var(--p,0) * 100);
  stroke:var(--dfx-good);
  transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1);
}
.dfx-card[data-tone="warn"] .dfx-gauge-fill{stroke:var(--dfx-warn);}
.dfx-card[data-tone="bad"]  .dfx-gauge-fill{stroke:var(--dfx-bad);}
.dfx-card.dfx-pending .dfx-gauge-fill{stroke-dashoffset:100;}
.dfx-gauge-num{
  font:700 30px/1 var(--font-sans),sans-serif;
  fill:var(--dfx-ink);font-variant-numeric:tabular-nums;
}

.dfx-bar-track{fill:rgba(8,92,58,.11);}
.dfx-bar-fill{
  fill:var(--dfx-good);
  transform:scaleX(var(--p,0));transform-origin:left center;transform-box:fill-box;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.dfx-card[data-tone="warn"] .dfx-bar-fill{fill:var(--dfx-warn);}
.dfx-card[data-tone="bad"]  .dfx-bar-fill{fill:var(--dfx-bad);}
.dfx-card.dfx-pending .dfx-bar-fill{transform:scaleX(0);}
.dfx-bar-cap{stroke:var(--dfx-ink);stroke-width:1.5;stroke-dasharray:3 3;opacity:.55;}
.dfx-bar-caplabel{font:600 8px/1 var(--font-sans),sans-serif;fill:var(--dfx-muted);}

/* The old generic opener. Kept in the DOM, out of the page. */
.dfx-superseded{display:none !important;}

/* ── Dark ────────────────────────────────────────────────────────────── */

[data-theme="dark"] .dfx{
  --dfx-good:#5FD9A0;
  --dfx-warn:#E8B04B;
  --dfx-bad:#F0776B;
  --dfx-card:rgba(255,255,255,.045);
  --dfx-line:rgba(255,255,255,.1);
}
[data-theme="dark"] .dfx-rail{background:rgba(255,255,255,.12);}
[data-theme="dark"] .dfx-gauge-track{stroke:rgba(255,255,255,.12);}
[data-theme="dark"] .dfx-bar-track{fill:rgba(255,255,255,.1);}
[data-theme="dark"] .dfx-cta{background:rgba(24,201,121,.16);}

@media (prefers-reduced-motion:reduce){
  .dfx-card,.dfx-card.dfx-pending{opacity:1;translate:none;transition:none;}
  .dfx-gauge-fill,.dfx-bar-fill,.dfx-rail i{transition:none;}
  .dfx-card.dfx-pending .dfx-gauge-fill{stroke-dashoffset:calc(100 - var(--p,0) * 100);}
  .dfx-card.dfx-pending .dfx-bar-fill{transform:scaleX(var(--p,0));}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SETUP FILM — what a signed-in customer sees before they have told us
   anything at all
   ═══════════════════════════════════════════════════════════════════════════

   Deliberately the same dark theatre as the four pillars on the way in. A
   customer who has just crossed from the marketing site into the workspace
   should not feel they have arrived at a different product, and the empty
   state is the one screen where that risk is highest — it is the screen with
   the least of their own content to hold it together.

   The figures here are the real components with nothing in them: the same
   gauge, the same FOIR bar with the same lender-ceiling marker, the same
   three-row ledger. Dashed, hollow, waiting. When the data lands these are
   literally the pictures that fill, so the empty state is a promise the
   filled state keeps rather than a placeholder it replaces.
   ═══════════════════════════════════════════════════════════════════════════ */

.dsx{
  --dsx-ground:#082C24;
  --dsx-ink:#F3FBF6;
  --dsx-muted:#9FC2B1;
  --dsx-mint:#9EE6BF;
  --dsx-line:#9ee6bf2e;
  background:var(--dsx-ground);
  color:var(--dsx-ink);
  border-radius:20px;
  padding:26px 20px 24px;
  position:relative;
  overflow:clip;
  isolation:isolate;
}
.dsx::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 60% at 78% 8%, #1fa46330 0%, #1fa46300 62%);
}
.dsx > *{position:relative;z-index:1;}

.dsx-head{margin:0 0 26px;}
.dsx-eyebrow{
  font:700 10px/1.5 var(--font-sans),sans-serif;
  letter-spacing:2px;color:var(--dsx-mint);margin:0 0 10px;
}
.dsx-head h2{
  font:400 clamp(27px,6.4vw,40px)/1.1 Georgia,"Times New Roman",serif;
  letter-spacing:-1.4px;margin:0 0 12px;color:var(--dsx-ink);text-wrap:balance;
}
.dsx-head h2 em{font-style:normal;color:var(--dsx-mint);}
.dsx-lede{font-size:13.5px;line-height:1.65;color:var(--dsx-muted);margin:0 0 18px;max-width:48ch;}

.dsx-progress{display:grid;gap:7px;}
.dsx-progress span{
  font:700 10px/1 var(--font-sans),sans-serif;letter-spacing:1.4px;color:var(--dsx-muted);
}
.dsx-progress i{
  display:block;height:3px;border-radius:3px;background:#9ee6bf26;position:relative;overflow:hidden;
}
.dsx-progress i::after{
  content:"";position:absolute;inset:0;border-radius:3px;
  background:linear-gradient(90deg,#1FA463,#9EE6BF);
  transform:scaleX(var(--p,0));transform-origin:left center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}

/* ── Steps ───────────────────────────────────────────────────────────── */

.dsx-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
@media (min-width:900px){ .dsx-steps{grid-template-columns:repeat(3,1fr);} }

.dsx-step{
  border:1px solid var(--dsx-line);
  border-radius:16px;
  padding:18px 18px 20px;
  background:linear-gradient(152deg,#0f4b3714,#09302510);
  opacity:1;translate:0 0;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1), translate .5s cubic-bezier(.2,.7,.2,1);
}
/* Same 0.72 floor as everywhere else on this site: low enough to read as
   "not yet", high enough that the text is still legible if someone stops. */
.dsx-step.dsx-pending{opacity:.72;translate:0 14px;}
.dsx-step.is-final{background:linear-gradient(152deg,#1fa46326,#09302510);}

.dsx-num{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid #9ee6bf59;
  font:700 11px/1 var(--font-sans),sans-serif;color:var(--dsx-mint);
  margin:0 0 14px;
}
.dsx-step.is-done .dsx-num{background:#18C979;border-color:#18C979;color:#06281f;font-size:13px;}

.dsx-fig{margin:0 0 16px;}
.dsx-art{width:100%;height:auto;max-width:230px;display:block;}

/* Hollow versions of the real figures. */
.dsx-ghost-stroke{
  fill:none;stroke:#9ee6bf3d;stroke-width:13;stroke-linecap:round;
  stroke-dasharray:4 5;
}
.dsx-ghost-num{
  font:700 26px/1 var(--font-sans),sans-serif;fill:#9ee6bf40;letter-spacing:2px;
}
.dsx-ghost-fill{fill:#9ee6bf1f;stroke:#9ee6bf33;stroke-width:1;stroke-dasharray:4 4;}
.dsx-ghost-cap{stroke:#9ee6bf59;stroke-width:1.5;stroke-dasharray:3 3;}
.dsx-ghost-cap-l{font:600 8px/1 var(--font-sans),sans-serif;fill:#86ad99;}

.dsx-give{font-size:14px;font-weight:700;color:var(--dsx-ink);margin:0 0 3px;line-height:1.35;}
.dsx-cost{font-size:11px;color:#86ad99;margin:0 0 14px;letter-spacing:.2px;}
.dsx-get{
  font:400 clamp(17px,3.6vw,21px)/1.3 Georgia,"Times New Roman",serif;
  letter-spacing:-.5px;color:var(--dsx-mint);margin:0 0 9px;text-wrap:balance;
}
.dsx-body{font-size:12.8px;line-height:1.65;color:var(--dsx-muted);margin:0;}

.dsx-cta{
  appearance:none;border:0;cursor:pointer;
  margin-top:16px;min-height:44px;padding:0 18px;border-radius:11px;
  background:var(--dsx-mint);color:#06281f;
  font:700 13px/1 var(--font-sans),sans-serif;
  display:inline-flex;align-items:center;gap:8px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.dsx-cta:active{background:#8ad9ae;}
.dsx-cta:focus-visible{outline:3px solid var(--dsx-mint);outline-offset:3px;}
.dsx-step.is-done .dsx-cta{
  background:transparent;color:var(--dsx-mint);border:1px solid #9ee6bf4d;
}

@media (prefers-reduced-motion:reduce){
  .dsx-step,.dsx-step.dsx-pending{opacity:1;translate:none;transition:none;}
  .dsx-progress i::after{transition:none;}
}