/* Valerio's Bulls - members' site shell (login, forgot password, member area,
   saved-companies view). Light theme. The three tools keep their own styles
   and their own dark/light switch; this file is not loaded inside them. */

:root {
  --bg: #f4f6fa;
  --bg-2: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #0e1526;
  --ink-2: #2e3748;
  --muted: #66707f;
  --line: #e4e8f0;
  --line-strong: #cfd6e2;

  --gold: #c9a227;
  --gold-deep: #9f7f16;
  --gold-text: #7a6110; /* small gold TEXT only (labels, chips, hover links): 5.2:1+ on every site background; gold-deep (3.45-3.80:1) stays for icons, borders, gradients */
  --gold-soft: #fbf4dc;
  --bull: #149c64;
  --bull-deep: #0e7a4e;
  --bull-soft: #e3f6ec;
  --blue: #2f5bea;
  --blue-deep: #2346bd;
  --blue-soft: #e8eeff;
  --bad: #c2410c;
  --bad-soft: #fff1ea;

  --radius: 20px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(14, 21, 38, .05), 0 2px 10px rgba(14, 21, 38, .05);
  --shadow-md: 0 10px 28px -10px rgba(14, 21, 38, .18), 0 2px 6px rgba(14, 21, 38, .06);
  --shadow-lg: 0 30px 60px -24px rgba(14, 21, 38, .32), 0 8px 20px -10px rgba(14, 21, 38, .12);

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, "SFMono-Regular", monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* soft paper texture: faint grid + gold and green glows */
.vb-page {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}
.vb-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(201, 162, 39, .16), transparent 60%),
    radial-gradient(700px 420px at -10% 100%, rgba(20, 156, 100, .10), transparent 60%),
    linear-gradient(var(--bg), var(--bg));
}
.vb-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(14, 21, 38, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 21, 38, .045) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25) 60%, transparent);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25) 60%, transparent);
}

a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.15; }
p { margin: 0; }

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 20px;
}
@media (min-width: 720px) { .container { padding-inline: 32px; } }

/* ---------- brand ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
/* The logo is Alberto's whole lockup - the bull, "Valerio's Bulls" and "Options &
   Stock Trading" - transparent and drawn for a light background: no dark chip, no
   ring, and no wordmark set in text beside it, because the picture carries the
   words. It takes whatever width the header has spare, up to 385px, and keeps its
   own 1200 x 344 shape, so it is never stretched. The bigger it is the more legible
   "Options & Stock Trading" is, which is why it is capped rather than fixed. */
.brand-lockup {
  display: block;
  width: 100%;
  max-width: 385px;
  min-width: 140px;
  line-height: 0;
  flex: 1 1 auto;
}
.brand-lockup img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.brand-sub {
  flex: none;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
  white-space: nowrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: var(--gold-soft);
  border: 1px solid rgba(201, 162, 39, .35);
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .2);
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 10px;
}
.lead { color: var(--muted); font-size: 16px; }

/* ---------- buttons ---------- */
.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .18s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:focus-visible { outline: 3px solid rgba(201, 162, 39, .55); outline-offset: 2px; }
/* Hover rule for the whole site: a hovered or pressed element never gets
   transform, filter or any other property that moves it or turns it into a
   containing block. A transform moves it out from under the pointer at its
   edge; inside a card, transform or filter on the button would make it the
   containing block of the card-wide .btn::after overlay, which then shrinks
   to the button, hover ends, the overlay expands, hover starts again - the
   card and the cursor flicker. Lift and press are shown with box-shadow,
   colour and inner elements only. */
.btn:active, .btn-primary:active:hover, .tool-card .btn-primary:active:hover {
  box-shadow: inset 0 0 0 999px rgba(14, 21, 38, .10);
}

.btn-primary {
  background: linear-gradient(180deg, #1b2440, var(--ink));
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(14, 21, 38, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.btn-primary:hover {
  box-shadow: 0 12px 24px -10px rgba(14, 21, 38, .6), 0 0 0 1px rgba(201, 162, 39, .6),
              inset 0 0 0 999px rgba(255, 255, 255, .07);
}
.btn-primary .arrow { transition: transform .18s var(--ease); }
.btn-primary:hover .arrow { transform: translateX(3px); }

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, .15), var(--shadow-sm); }

.btn-buy {
  width: 100%;
  background: var(--bull-soft);
  color: var(--bull-deep);
  border-color: rgba(20, 156, 100, .35);
}
.btn-buy:hover { background: #d6f1e3; border-color: var(--bull); box-shadow: 0 0 0 3px rgba(20, 156, 100, .12); }

.btn-block { width: 100%; }

/* ---------- forms ---------- */
.field { display: block; margin-top: 16px; }
.field > span {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .01em;
}
.input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.input::placeholder { color: #9aa3b2; }
.input:hover { border-color: #b9c2d1; }
.input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .18);
}

.form-actions { margin-top: 22px; display: grid; gap: 10px; }
.form-row { margin-top: 14px; display: flex; justify-content: flex-end; }

.link {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.link:hover { color: var(--gold-text); border-bottom-color: var(--gold); }

.msg {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.msg::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: currentColor; }
.msg.err { color: var(--bad); background: var(--bad-soft); border: 1px solid rgba(194, 65, 12, .25); }
.msg.ok { color: var(--bull-deep); background: var(--bull-soft); border: 1px solid rgba(20, 156, 100, .3); }

.hint { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ---------- motion ---------- */
@keyframes vb-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes vb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.reveal {
  opacity: 0;
  animation: vb-rise .7s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 60ms);
}
.fade { opacity: 0; animation: vb-fade .9s var(--ease) forwards; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .fade { opacity: 1; animation: none; }
  .btn, .tool-card, .tool-card-body, .input, .link { transition: none; }
}

/* =====================================================================
   AUTH pages (login, forgot password)
   ===================================================================== */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .auth { grid-template-columns: minmax(420px, 46%) 1fr; }
}

.auth-panel {
  display: flex;
  flex-direction: column;
  padding: 28px 20px 28px;
}
@media (min-width: 720px) { .auth-panel { padding: 36px 48px; } }
@media (min-width: 900px) { .auth-panel { padding: 40px 56px; min-height: 100vh; } }

.auth-panel .brand { align-self: stretch; }
.auth-panel .brand-lockup { max-width: 340px; }
.topbar .brand { flex: 1 1 auto; }
.topbar-right { flex: none; }

.auth-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 0;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 34px 30px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.auth-card::before {
  /* thin gold top rule */
  content: "";
  position: absolute;
  top: -1px; left: 28px; right: 28px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
@media (max-width: 420px) { .auth-card { padding: 28px 20px 24px; } }

.auth-card h1 { font-size: 30px; font-weight: 800; }
.auth-card .lead { margin-top: 8px; }
.auth-card form { margin-top: 12px; }

.auth-foot {
  color: var(--muted);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

/* the visual side */
.auth-visual {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  order: -1;
}
@media (min-width: 900px) { .auth-visual { order: 0; min-height: 100vh; } }

.auth-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  transform: scale(1.04);
  animation: vb-kenburns 18s var(--ease) forwards;
}
@keyframes vb-kenburns {
  from { transform: scale(1.08); }
  to   { transform: scale(1.0); }
}
@media (prefers-reduced-motion: reduce) { .auth-visual img { animation: none; transform: none; } }

.auth-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 21, 38, .25), rgba(14, 21, 38, .72) 70%, rgba(14, 21, 38, .9)),
    linear-gradient(90deg, rgba(14, 21, 38, .55), transparent 40%);
}

.visual-copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px 24px 36px;
  z-index: 1;
}
@media (min-width: 900px) { .visual-copy { padding: 56px 56px 44px; max-width: 640px; } }

.visual-copy h2 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}
@media (min-width: 900px) { .visual-copy h2 { font-size: 40px; } }
.visual-copy .sub { margin-top: 10px; color: rgba(255, 255, 255, .78); font-size: 15px; max-width: 46ch; }

.ticker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: #fff;
  margin-bottom: 16px;
}
.ticker-chip b { color: #6ee7b7; font-weight: 500; }

.tool-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
@media (max-width: 899px) { .tool-list { display: none; } }
.tool-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .2s var(--ease);
}
.tool-list li > * { transition: transform .2s var(--ease); }
.tool-list li:hover { background: rgba(255, 255, 255, .14); }
.tool-list li:hover > * { transform: translateX(4px); }
.tool-list .mini {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .14);
  --icon-paper: rgba(255, 255, 255, .92);
}
.tool-list .mini svg { width: 32px; height: 32px; }
.tool-list b { display: block; font-size: 15px; }
.tool-list span { display: block; color: rgba(255, 255, 255, .72); font-size: 13px; }

.photo-credit {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 1;
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
}
.photo-credit:hover { color: rgba(255, 255, 255, .9); }

/* =====================================================================
   MEMBER area
   ===================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(244, 246, 250, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  padding-block: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}
.topbar .pill { margin-left: 12px; }
@media (max-width: 900px) { .topbar .pill { display: none; } }
/* On a phone the member topbar cannot hold the whole lockup and the user chip on one
   row without squeezing "Options & Stock Trading" away, so the chip drops to a second
   row and the logo gets the full width. */
@media (max-width: 520px) {
  .topbar-inner { flex-wrap: wrap; row-gap: 10px; }
  .topbar-right { width: 100%; justify-content: flex-end; }
}
/* below 640 the lockup needs every pixel of the row for "Options & Stock Trading" */
@media (max-width: 640px) { .brand-sub { display: none; } }

.topbar-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  color: var(--ink-2);
  min-width: 0;
}
.user-chip .avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  text-transform: uppercase;
}
.user-chip .who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}
.user-chip .who small { display: block; font-size: 11px; color: var(--muted); line-height: 1.1; }
@media (max-width: 640px) { .user-chip .who { display: none; } .user-chip { padding: 4px; } }

.topbar .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* hero banner */
.hero {
  position: relative;
  margin: 24px auto 0;
  max-width: 1140px;
  padding-inline: 20px;
}
@media (min-width: 720px) { .hero { padding-inline: 32px; margin-top: 32px; } }
.hero-inner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--ink);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 900px) { .hero-inner { min-height: 320px; } }
.hero-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.hero-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 21, 38, .92) 0%, rgba(14, 21, 38, .72) 45%, rgba(14, 21, 38, .25) 100%),
    linear-gradient(0deg, rgba(14, 21, 38, .55), transparent 60%);
}
.hero-copy {
  position: relative;
  z-index: 1;
  padding: 36px 28px;
  max-width: 620px;
}
@media (min-width: 900px) { .hero-copy { padding: 48px 44px; } }
.hero-copy .eyebrow { color: var(--gold); }
.hero-copy h1 { font-size: 34px; font-weight: 800; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
@media (min-width: 900px) { .hero-copy h1 { font-size: 44px; } }
.hero-copy p { margin-top: 12px; color: rgba(255, 255, 255, .8); font-size: 16px; max-width: 52ch; }

.hero-chip {
  position: absolute;
  right: 28px;
  top: 28px;
  z-index: 1;
  margin: 0;
}
@media (max-width: 899px) { .hero-chip { display: none; } }

/* tool cards */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 40px 0 18px;
}
.section-head h2 { font-size: 22px; font-weight: 800; }
.section-head p { color: var(--muted); font-size: 14px; }

.tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) { .tool-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .tool-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.tool-card {
  --accent: var(--gold);
  --accent-deep: var(--gold-deep);
  --accent-soft: var(--gold-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
  overflow: hidden;
}
/* The card itself never moves (it is the hover target); the body inside it
   lifts 6px, so the hovered area always contains the resting area. */
.tool-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  transform: translateY(0);
  transition: transform .25s var(--ease);
}
.tool-card:hover .tool-card-body, .tool-card:focus-within .tool-card-body { transform: translateY(-6px); }
.tool-card::before {
  /* soft accent glow in the corner */
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -90px;
  top: -110px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-soft), transparent);
  opacity: .9;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.tool-card:hover, .tool-card:focus-within {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent);
  border-color: var(--accent);
}
.tool-card:hover::before { transform: scale(1.35); opacity: 1; }

.tool-card--tracker { --accent: var(--bull); --accent-deep: var(--bull-deep); --accent-soft: var(--bull-soft); }
.tool-card--intrinsic { --accent: var(--gold); --accent-deep: var(--gold-deep); --accent-soft: var(--gold-soft); }
.tool-card--intrinsic .tool-tag { color: var(--gold-text); } /* text only; the icon keeps --accent-deep */
.tool-card--journal { --accent: var(--blue); --accent-deep: var(--blue-deep); --accent-soft: var(--blue-soft); }

.tool-icon {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: var(--accent-deep);
  background: linear-gradient(160deg, #fff 20%, var(--accent-soft));
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px -12px rgba(14, 21, 38, .35), inset 0 1px 0 #fff;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
  --icon-fill: var(--accent-soft);
  --icon-paper: #fff;
  --icon-accent: var(--accent);
}
.tool-icon svg { width: 58px; height: 58px; transition: transform .3s var(--ease); filter: drop-shadow(0 2px 2px rgba(14, 21, 38, .08)); }
.tool-card:hover .tool-icon, .tool-card:focus-within .tool-icon {
  transform: translateY(-4px) rotate(-4deg);
  border-color: var(--accent);
  box-shadow: 0 18px 30px -14px rgba(14, 21, 38, .4), 0 0 0 5px var(--accent-soft);
}
.tool-card:hover .tool-icon svg { transform: scale(1.08); }
.tool-card:active .tool-icon { transform: translateY(-1px) scale(.97); }

.tool-num {
  position: absolute;
  top: -4px;   /* 22px from the card's top edge (body starts 26px in) */
  right: -2px; /* 22px from the card's right edge (body starts 24px in) */
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--muted);
}
.tool-card h3 { margin-top: 20px; font-size: 20px; font-weight: 800; }
.tool-card p { margin-top: 8px; color: var(--muted); font-size: 14.5px; line-height: 1.55; flex: 1; }
.tool-card .btnWrap { margin-top: 20px; display: flex; }
.tool-card .btn { width: 100%; }
.tool-card .btn::after {
  /* make the whole card clickable through the single "Enter" link: covers the
     card's padding box (the body is inset 26px 24px 24px) plus the 6px the body
     lifts by; the card's overflow:hidden clips it to the card */
  content: "";
  position: absolute;
  top: -26px;
  right: -24px;
  bottom: -30px;
  left: -24px;
}
.tool-card .btn-primary:hover { box-shadow: 0 12px 24px -10px rgba(14, 21, 38, .6), 0 0 0 1px var(--accent), inset 0 0 0 999px rgba(255, 255, 255, .07); }

.tool-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border: 1px solid transparent;
}

/* footer */
.site-foot {
  margin: 56px 0 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  color: var(--muted);
  font-size: 13px;
}
.site-foot a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.site-foot a:hover { color: var(--gold-text); }

/* =====================================================================
   Saved companies (intrinsic-library-view)
   ===================================================================== */
.lib-wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 40px; }
.lib-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 26px 26px 18px;
}
.lib-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lib-head h2 { font-size: 24px; font-weight: 800; }
.lib-head p { margin-top: 6px; color: var(--muted); font-size: 14px; max-width: 60ch; }
.lib-table-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.lib-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.lib-table th {
  text-align: left;
  padding: 12px 14px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.lib-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lib-table tr:last-child td { border-bottom: 0; }
.lib-table tbody tr { transition: background-color .15s var(--ease); }
.lib-table tbody tr:hover { background: var(--surface-2); }
.lib-table .ticker {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  background: var(--gold-soft);
  color: var(--gold-text);
  border: 1px solid rgba(201, 162, 39, .3);
}
.lib-table .num { font-family: var(--mono); font-size: 13px; }
.lib-table .dim { color: var(--muted); font-size: 13px; }
.lib-empty { padding: 28px; text-align: center; color: var(--muted); }