/* Investor page. Same tokens, same rules, one extra layout.
   The gated block is rendered from /api/investor/brief and never exists in the
   markup, so "view source" on the public page shows no valuation. */

.inv__navlink { font-size: 0.86rem; color: var(--ink-muted); text-underline-offset: 3px; }
.inv__navlink:hover { color: var(--ink); }

.inv__hero { padding-block: var(--s-8) var(--s-7); max-width: 60rem; }

.inv__title {
  margin-top: var(--s-5);
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.inv__title em { font-style: normal; color: var(--accent); }

.inv__deck {
  margin-top: var(--s-5);
  max-width: 46rem;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.inv__cta { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; }

.btn--ghost {
  background: none;
  color: var(--ink);
  border: var(--rule-w) solid var(--rule-strong);
  text-decoration: none;
}
.btn--ghost:hover { background: var(--surface-sunk); }
a.btn { text-decoration: none; }

.inv__band { padding-block: var(--s-7); border-top: var(--rule-w) solid var(--rule); }

.inv__h2 {
  font-size: 0.78rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.inv__note {
  margin-top: var(--s-4);
  max-width: 48rem;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--ink-muted);
}

/* --- the market gap ------------------------------------------------------- */

.gap { margin: var(--s-5) 0 0; }
.gap__svg { display: block; width: 100%; height: auto; max-width: 70rem; }
.gap__name { font-family: var(--f-text); font-size: 17px; font-weight: 620; fill: var(--ink); }
.gap__name--own { fill: var(--accent); }
.gap__who { font-family: var(--f-text); font-size: 13.5px; fill: var(--ink-muted); }
.gap__who--own { fill: var(--ink-secondary); }
.gap__cost { font-family: var(--f-text); font-size: 13px; fill: var(--ink-faint); }
.gap__cost--own { fill: var(--accent); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .gap__layer, .gap__mid { opacity: 0; animation: rise 320ms var(--ease) both; }
  .gap__layer[data-step='1'] { animation-delay: 40ms; }
  .gap__mid { animation-delay: 340ms; }
  .gap__layer[data-step='3'] { animation-delay: 180ms; }
}
@media (prefers-reduced-motion: reduce) { .gap__layer, .gap__mid { opacity: 1; } }
/* The figure stays. Deleting it below 46rem also deleted the thesis it draws,
   on the one device an investor is most likely to open the link on, and the
   layout never needed deleting: the three layers are already full-width bands
   stacked vertically, so they survive the squeeze.

   Two things do not survive it. The right-aligned cost labels run into the
   layer names once the viewBox is under about half scale, and the type lands
   around 8px. So the costs drop and the remaining labels are set larger, which
   leaves a figure that says the same thing with two fewer numbers on it. */
@media (max-width: 46rem) {
  .gap__cost { display: none; }
  .gap__name { font-size: 26px; }
  .gap__who { font-size: 19px; }
}

/* --- people and offices --------------------------------------------------- */

.inv__people { margin-top: var(--s-5); display: grid; gap: var(--s-6); }
@media (min-width: 44rem) { .inv__people { grid-template-columns: 1fr 1fr; } }

.person { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.person__name {
  font-family: var(--f-display); font-weight: var(--w-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.15;
}
.person__title { margin-top: var(--s-2); font-size: 0.92rem; color: var(--ink-secondary); }
.person__meta { margin-top: var(--s-1); font-size: 0.84rem; color: var(--ink-faint); }

.inv__offices { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
@media (min-width: 44rem) { .inv__offices { grid-template-columns: 1fr 1fr; } }
.office { padding-top: var(--s-3); border-top: var(--rule-w) solid var(--rule); }
.office__city { font-weight: var(--w-strong); }
.office__role { font-size: 0.84rem; color: var(--ink-faint); margin-top: 0.1rem; }
.office__note { font-size: 0.88rem; color: var(--ink-muted); margin-top: var(--s-1); }

.inv__figures { margin-top: var(--s-6); max-width: 42rem; }

/* --- gate ----------------------------------------------------------------- */

.inv__login { margin-top: var(--s-5); display: grid; gap: var(--s-4); align-items: end; }
@media (min-width: 40rem) { .inv__login { grid-template-columns: minmax(0, 18rem) auto auto; } }
.inv__field { min-width: 0; }

.inv__status { margin-top: var(--s-4); font-size: 0.92rem; padding-left: var(--s-4);
               border-left: 2px solid var(--accent); }
.inv__status:empty { margin-top: 0; padding-left: 0; border-left-width: 0; }
.inv__status:focus { outline: none; }
.inv__status[data-tone='error'] { border-left-color: var(--error); color: var(--error); }

.inv__ask { margin-top: var(--s-4); font-size: 0.88rem; color: var(--ink-muted); }

.inv__brief { margin-top: var(--s-7); }
.inv__h3 {
  margin-top: var(--s-6); font-size: 0.72rem; font-weight: var(--w-strong);
  letter-spacing: 0.02em; color: var(--ink-muted);
}

.terms { margin-top: var(--s-4); display: grid; grid-template-columns: minmax(0, 1fr);
         gap: var(--s-1); font-size: 0.94rem; }
@media (min-width: 40rem) {
  .terms { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-2) var(--s-4); }
}
.terms dt { color: var(--ink-muted); font-size: 0.86rem; }
.terms dd { margin: 0; }
.terms dd strong { font-family: var(--f-display); font-size: 1.15rem; font-weight: var(--w-display); }

.cap { margin-top: var(--s-4); }
.cap__row { display: grid; grid-template-columns: minmax(0, 1fr);
            gap: var(--s-2); padding-block: var(--s-3);
            border-bottom: var(--rule-w) solid var(--rule); font-size: 0.92rem; }
@media (min-width: 40rem) {
  .cap__row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 4rem;
              align-items: center; gap: var(--s-3); }
}
.cap__bar { height: 0.75rem; background: var(--surface-sunk); border-radius: 1px; overflow: hidden; }
.cap__fill { height: 100%; background: var(--accent); }
.cap__fill--new { background: var(--mark); }
.cap__pct { text-align: left; font-variant-numeric: tabular-nums; color: var(--ink-secondary); }
@media (min-width: 40rem) { .cap__pct { text-align: right; } }
.cap__caveat { margin-top: var(--s-4); font-size: 0.86rem; color: var(--ink-muted);
               padding-left: var(--s-4); border-left: 2px solid var(--mark); max-width: 52rem; }

.flag { margin-top: var(--s-4); padding: var(--s-4);
        border: var(--rule-w) solid var(--mark); border-left-width: 3px;
        border-radius: var(--r-sm); background: var(--surface-sunk); }
.flag__title { font-weight: var(--w-strong); font-size: 0.92rem; }
.flag__body { margin-top: var(--s-2); font-size: 0.9rem; color: var(--ink-secondary); max-width: 58ch; }
.flag__owner { margin-top: var(--s-2); font-size: 0.78rem; color: var(--ink-faint); }

/* --- Rundan ------------------------------------------------------------- */
/*
 * Talen forst, figuren sedan. En investerare som oppnar sidan ska se beloppet
 * utan att rulla, och forst darefter hur det ar tankt att anvandas.
 */
.round__figures { display: grid; gap: var(--s-3); margin-top: var(--s-4);
                  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.round__fig { border-top: 3px solid var(--accent); padding-top: var(--s-2); }
.round__label { font-size: 0.8rem; color: var(--ink-secondary);
                text-transform: uppercase; letter-spacing: 0.06em; }
.round__value { font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.1;
                font-variant-numeric: tabular-nums; margin-top: 0.2rem; }

.round { margin-top: var(--s-6); }
.round__cap { font-size: 0.9rem; color: var(--ink-secondary);
              margin-bottom: var(--s-3); }
.round__svg { display: block; width: 100%; height: auto; max-width: 70rem; }
.round__name { font-size: 15px; fill: var(--ink-secondary); }
.round__num { font-size: 19px; fill: var(--ink); font-variant-numeric: tabular-nums; }

/*
 * Staplarna vaxer upp ur axeln nar figuren kommer in. transform-origin i botten
 * gor att de reser sig i stallet for att skalas fran mitten, vilket ar det enda
 * som laser som en stapel och inte som en zoomning.
 */
.round__fill { transform-origin: center bottom; transition: fill 160ms ease,
               transform 160ms ease; }
.illus--in .round__fill, .is-revealed .round__fill { animation: round-vax 620ms
               cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.round__bar:nth-child(1) .round__fill { animation-delay: 0ms; }
.round__bar:nth-child(2) .round__fill { animation-delay: 90ms; }
.round__bar:nth-child(3) .round__fill { animation-delay: 180ms; }
.round__bar:nth-child(4) .round__fill { animation-delay: 270ms; }

@keyframes round-vax {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Hovern lyfter stapeln nagra pixlar och tonar de ovriga tillbaka, sa att den
   man pekar pa blir den man laser. Traffytan ar en egen genomskinlig rekt som
   tacker hela kolumnen, annars maste man traffa sjalva stapeln. */
.round__bar:hover .round__fill { transform: translateY(-4px); }
.round__bars:hover .round__bar:not(:hover) .round__fill { fill: var(--rule-strong); }
.round__bars:hover .round__bar:not(:hover) .round__num { fill: var(--ink-faint); }
.round__num, .round__name { transition: fill 160ms ease; }

@media (prefers-reduced-motion: reduce) {
  .round__fill, .round__num, .round__name { transition: none; animation: none; }
  .round__bar:hover .round__fill { transform: none; }
}