/* GivingForce brand layer.
   Ported from the signed off website design (Claude Design project
   "GivingForce website redesign", Home.dc.html) so the dashboard reads as the
   same product rather than a tool bolted on beside it.

   Four moves carry the identity, and they are all from that page:
     1. the eyebrow  - a 26x2px orange bar beside a tracked uppercase label
     2. the accent   - one italic phrase per headline, in orange on light and
                       gold on dark. Never two in the same headline.
     3. the dark band with a white panel overlapping it by -44px, on a deep
        shadow. On the website that is the hero and the stat strip. Here it is
        the answer to "how are we doing" and the numbers behind it.
     4. display numerals at 44-56px, weight 800, tracked in to -0.03em.

   Two contrast rules from styles.css still bind, and the website breaks one of
   them: brand orange #F16824 is 2.81:1 on sand, so display numerals on light
   use --orange-dark and the full saturation orange stays a fill. On the dark
   ground the accent is --gold, which clears 5.6:1. */

:root {
  --ink: #3D3D3D;          /* the website's dark ground, warmer than --dark */
  --ink-deep: #2A2522;
  --shadow-lift: 0 18px 40px rgba(20, 14, 8, 0.09);
  --shadow-float: 0 26px 60px rgba(20, 14, 8, 0.15);
}

/* ---------- logo ---------- */
.logo { display: block; height: 26px; width: auto; }
.logo-lg { height: 34px; }

/* ---------- eyebrow ---------- */
.eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--orange); flex: none; }
.eyebrow span {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--orange-ink);
}
.eyebrow.on-dark::before { background: var(--gold); }
.eyebrow.on-dark span { color: var(--gold); }

/* ---------- the accent phrase ---------- */
.em { font-style: italic; color: var(--orange-dark); font-weight: 800; }
.on-dark .em, .hero .em, .split-brand .em { color: var(--gold); }

/* ---------- display type ---------- */
.display {
  font-size: clamp(26px, 3.1vw, 38px); line-height: 1.1; font-weight: 800;
  letter-spacing: -0.025em; color: var(--dark); margin: 0; text-wrap: balance;
}
.hero .display { color: var(--white); }

.bignum {
  font-size: clamp(34px, 4vw, 52px); font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; color: var(--orange-dark); font-variant-numeric: tabular-nums;
}
.on-dark .bignum { color: var(--gold); }

/* ---------- hero band, and the panel that overlaps it ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--ink);
  border-radius: var(--radius); padding: 40px 40px 74px; color: rgba(255, 255, 255, 0.85);
}
/* A single warm light source, top right, so the ground is not a flat rectangle. */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(78% 120% at 88% -18%, rgba(241, 104, 36, 0.34), transparent 62%);
}
.hero > * { position: relative; z-index: 1; }
.hero p { margin: 14px 0 0; font-size: 1.02rem; line-height: 1.6; max-width: 60ch; color: rgba(255, 255, 255, 0.82); }
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px; padding: 7px 15px; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9);
}
.hero-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }

/* The website floats its stat strip over the hero on a deep shadow. Same move. */
.floatband {
  position: relative; z-index: 5; margin: -44px 22px 30px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-float); display: grid; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
}
.fb-cell { padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 5px; border-left: 1px solid var(--border-soft); }
.fb-cell:first-child { border-left: 0; }
.fb-l { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.fb-n { font-size: 2.35rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--orange-dark); font-variant-numeric: tabular-nums; }
.fb-s { font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
.fb-cell.ok .fb-n { color: var(--ok); }
.fb-cell.warn .fb-n { color: var(--warn); }
.fb-foot {
  grid-column: 1 / -1; border-top: 2px solid var(--orange); background: var(--tint);
  padding: 11px 24px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--orange-ink);
}

/* ---------- cards that lift, and the one dark card ---------- */
.lift { transition: box-shadow 0.22s ease, transform 0.22s ease; }
.lift:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }

.card.on-dark { background: var(--ink); border-color: var(--ink); color: rgba(255, 255, 255, 0.78); }
.card.on-dark .chead h3, .card.on-dark h3 { color: var(--white); }
.card.on-dark .chead .sub { color: rgba(255, 255, 255, 0.6); }
.card.tinted { background: var(--tint); border-color: var(--orange-dark); }

/* ---------- section head ---------- */
.shead { margin: 0 0 18px; }
.shead h2 { font-size: 1.28rem; font-weight: 800; letter-spacing: -0.02em; }
.shead p { margin: 7px 0 0; color: var(--muted); max-width: 74ch; font-size: 0.94rem; }

/* ---------- the ladder: now, ramp, target band ---------- */
.ladder { display: flex; flex-direction: column; }
.rung {
  display: grid; grid-template-columns: minmax(0, 1.5fr) 82px minmax(150px, 2fr) 108px;
  align-items: center; gap: 18px; padding: 24px 0; border-top: 1px solid var(--border-soft);
}
.rung:first-child { border-top: 0; padding-top: 0; }
.rung-l { min-width: 0; }
.rung-l b { display: block; font-size: 0.92rem; font-weight: 700; color: var(--dark); }
.rung-l span { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--orange-ink); margin-top: 3px; }
.rung-now { text-align: right; font-variant-numeric: tabular-nums; font-size: 1.02rem; font-weight: 700; color: var(--dark); }
.rung-now em { display: block; font-style: normal; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.rung-now.none { color: var(--muted); font-weight: 600; font-size: 0.84rem; }
.rung-goal { text-align: right; font-variant-numeric: tabular-nums; font-size: 1.02rem; font-weight: 800; color: var(--ok); white-space: nowrap; }
.rung-goal em { display: block; font-style: normal; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }

/* three steps, month one to month three, drawn as a rising ramp */
.ramp3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: end; height: 54px; }
.ramp3 div { position: relative; border-radius: 5px 5px 0 0; background: var(--o2); min-height: 6px; }
.ramp3 div:nth-child(2) { background: var(--o3); }
.ramp3 div:nth-child(3) { background: var(--o4); }
.ramp3 b {
  position: absolute; left: 0; right: 0; top: -16px; text-align: center;
  font-size: 0.72rem; font-weight: 700; color: var(--dark); font-variant-numeric: tabular-nums;
}
.ramp3 i {
  position: absolute; left: 0; right: 0; bottom: -15px; text-align: center; font-style: normal;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}

/* ---------- benchmark gauge: us against the market on one track ---------- */
.gauge { display: flex; flex-direction: column; gap: 8px; padding: 15px 0; border-top: 1px solid var(--border-soft); }
.gauge:first-child { border-top: 0; padding-top: 0; }
.gauge-head { display: flex; align-items: baseline; gap: 10px; }
.gauge-head b { font-size: 0.92rem; font-weight: 700; color: var(--dark); }
.gauge-head span { font-size: 0.76rem; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.gauge-track { position: relative; height: 10px; border-radius: 5px; background: var(--track); margin-bottom: 15px; }
.gauge-fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--o3); }
.gauge-mark { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--dark); }
.gauge-mark::after {
  content: attr(data-l); position: absolute; left: 50%; transform: translateX(-50%);
  top: 13px; white-space: nowrap; font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--dark);
}
.gauge-note { font-size: 0.84rem; color: var(--muted); line-height: 1.55; max-width: 72ch; }

/* ---------- move cards, the "what changes first" list ---------- */
.moves { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.move { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; gap: 9px; }
.move-n { font-size: 0.76rem; font-weight: 800; color: var(--orange-dark); font-variant-numeric: tabular-nums; }
.move h4 { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.012em; color: var(--dark); }
.move p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--muted); }

/* ---------- login ---------- */
.split { min-height: 100vh; display: grid; grid-template-columns: 1.08fr 1fr; }

.split-brand {
  position: relative; overflow: hidden; background: var(--ink);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 52px; color: rgba(255, 255, 255, 0.84);
}
.split-brand::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 95% at 82% -12%, rgba(241, 104, 36, 0.42), transparent 60%),
              radial-gradient(58% 80% at 6% 108%, rgba(241, 104, 36, 0.2), transparent 62%);
}
.split-brand > * { position: relative; z-index: 1; }
.split-brand > img { align-self: flex-start; }
.split-brand h1 {
  font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; font-weight: 800;
  letter-spacing: -0.028em; color: var(--white); margin: 0 0 20px; text-wrap: balance;
}
.split-brand p { margin: 0; font-size: 1.02rem; line-height: 1.6; max-width: 44ch; }

.split-stats { display: flex; gap: 40px; flex-wrap: wrap; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.split-stat b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.split-stat span { display: block; margin-top: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); }

.split-form { display: grid; place-items: center; padding: 40px 32px; background: var(--sand); }
.split-form-inner { width: 100%; max-width: 372px; }
.split-form h2 { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.022em; margin: 0 0 6px; }
.split-form .lede { margin: 0 0 26px; color: var(--muted); font-size: 0.95rem; }

.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%;
  padding: 14px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--white); color: var(--dark); font-family: var(--font);
  font-size: 0.98rem; font-weight: 700; cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 6px rgba(20, 14, 8, 0.05);
  transition: box-shadow 0.16s, border-color 0.16s, transform 0.16s;
}
.google-btn:hover { border-color: var(--orange-dark); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.google-btn svg { flex: none; }
.login-note { font-size: 0.82rem; color: var(--muted); line-height: 1.6; margin-top: 20px; }
.login-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 0.76rem; color: var(--light-grey); }

@media (max-width: 920px) {
  .split { grid-template-columns: 1fr; }
  .split-brand { padding: 40px 28px; gap: 30px; }
  .split-form { padding: 36px 24px 60px; }
  .rung { grid-template-columns: 1fr auto; gap: 10px 14px; }
  .rung .ramp3 { grid-column: 1 / -1; }
  .rung-goal { grid-column: 1 / -1; text-align: left; }
  .hero { padding: 30px 24px 66px; }
  .floatband { margin: -44px 10px 24px; }
}