/* The tokens & plans page, styled once for two very different surfaces.
 *
 * It renders inside the dashboard (dark, neon purple, `--bg2`/`--text`) and on
 * icarusuniverse.com (light, warm paper, `--fg`/`--line`). Those palettes use
 * different variable NAMES, so every colour here resolves through a chain:
 *
 *     var(--bg2,  var(--card, #fff))
 *          ^ dashboard   ^ website   ^ neither, e.g. an email preview
 *
 * The page therefore inherits whichever design system it lands in and never
 * carries its own opinion about colour. Nothing is hard-coded except the last
 * fallback, which exists so it is still readable with no theme at all.
 *
 * Everything is scoped under `.itk`. This file is loaded into the dashboard,
 * which has ~10,000 lines of CSS of its own, and an unscoped `.card` or
 * `.price` would collide with something.
 */

.itk {
  --itk-bg:      var(--bg2, var(--card, #ffffff));
  --itk-page:    var(--bg, #fbfaf7);
  --itk-text:    var(--text, var(--fg, #1a1917));
  --itk-muted:   var(--text2, var(--muted, #63605a));
  --itk-line:    var(--border, var(--line, #e2ded6));
  --itk-accent:  var(--accent, #b4622a);
  --itk-good:    var(--green, #66bb6a);
  --itk-radius:  var(--radius, 14px);

  color: var(--itk-text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.itk * { box-sizing: border-box; }

.itk-head { margin: 0 0 .25rem; font-size: 1.35rem; font-weight: 650; }
.itk-sub  { margin: 0 0 1.5rem; color: var(--itk-muted); font-size: .95rem; }

.itk-h2 {
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--itk-muted); font-weight: 600; margin: 2rem 0 .9rem;
}
.itk-h2:first-of-type { margin-top: 0; }

/* ── The balance strip ──────────────────────────────────────────────── */

.itk-balance {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.2rem;
  padding: 1.1rem 1.2rem; margin-bottom: 1.4rem;
  background: var(--itk-bg); border: 1px solid var(--itk-line);
  border-radius: var(--itk-radius);
}
.itk-amount { font-size: 2.1rem; font-weight: 700; line-height: 1; }
.itk-unit   { font-size: .95rem; font-weight: 500; color: var(--itk-muted); margin-left: .3rem; }
.itk-plan   { margin-left: auto; font-size: .85rem; color: var(--itk-muted); }
.itk-plan strong { color: var(--itk-text); font-weight: 600; }

/* ── Card grid ──────────────────────────────────────────────────────── */

.itk-grid {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.itk-card {
  position: relative; display: flex; flex-direction: column; gap: .55rem;
  padding: 1.15rem;
  background: var(--itk-bg); border: 1px solid var(--itk-line);
  border-radius: var(--itk-radius);
}
.itk-card.is-popular { border-color: var(--itk-accent); }
.itk-card.is-current { border-color: var(--itk-good); }

/* Pinned to the top edge rather than flowing, so it cannot push the card
   contents out of alignment with its neighbours. */
.itk-pill {
  position: absolute; top: -.6rem; right: .75rem;
  padding: .12rem .55rem; border-radius: 999px;
  font-size: .65rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--itk-accent); color: #fff;
}
.itk-card.is-current .itk-pill { background: var(--itk-good); }

.itk-name  { font-size: 1.02rem; font-weight: 650; }
.itk-price { display: flex; align-items: baseline; gap: .25rem; }
.itk-price b { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; }
.itk-per   { font-size: .78rem; color: var(--itk-muted); }
.itk-grant { font-size: .85rem; font-weight: 650; }
.itk-blurb { font-size: .78rem; color: var(--itk-muted); margin: 0; }

/* Pushes the button to the bottom so CTAs line up across cards of unequal
   height — the alternative is a grid of buttons at ragged heights. */
.itk-spacer { flex: 1 1 auto; min-height: .2rem; }

.itk-btn {
  width: 100%; padding: .6rem 1rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  font-size: .9rem; font-weight: 600; font-family: inherit;
  background: var(--itk-accent); color: #fff;
  transition: filter .15s ease, transform .15s ease;
}
.itk-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.itk-btn:active:not(:disabled) { transform: translateY(0); }
.itk-btn:disabled { opacity: .5; cursor: not-allowed; }
.itk-btn.is-ghost {
  background: transparent; color: var(--itk-text);
  border-color: var(--itk-line);
}

.itk-note {
  margin: 1.4rem 0 0; padding: .75rem .9rem;
  font-size: .82rem; color: var(--itk-muted);
  background: var(--itk-page); border: 1px solid var(--itk-line);
  border-radius: var(--itk-radius);
}
.itk-note strong { color: var(--itk-text); font-weight: 600; }

.itk-msg { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--itk-radius);
           font-size: .88rem; border: 1px solid var(--itk-line); }
.itk-msg.is-err { border-color: var(--red, #ef5350); color: var(--red, #ef5350); }

/* The standalone page only — the dashboard supplies its own panel chrome. */
.itk-page-wrap { max-width: 46rem; margin: 0 auto; padding: 3rem 1.4rem 4rem; }