/* ==========================================================================
   Credis - investor teaser page
   Requires tokens.css and buttons.css.

   Carries the deck's cover slide onto the open web. It deliberately holds
   nothing beyond that slide: no market sizing, no traction, no product. The
   three credentials at the foot already appear on the public landing page.

   Unlike the deck this is a real responsive page rather than a fixed 16:9
   canvas, so it sizes from rem and clamp in the same way as styles.css.
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features);
  font-optical-sizing: auto;
  color: var(--text-inverse-body);
  background: var(--navy-950);
  -webkit-font-smoothing: antialiased;
}

h1 {
  margin: 0;
  color: var(--text-inverse);
  font-size: clamp(2.125rem, 6.2vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

h1 span {
  color: var(--teal-300);
}

p {
  margin: 0;
  text-wrap: pretty;
}

dl,
dt,
dd {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--teal-300);
  outline-offset: 3px;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.teaser {
  display: grid;
  min-height: 100dvh;
  padding: clamp(1.5rem, 4vw, 3.5rem) 0;
  background: var(--gradient-navy);
}

/* A single soft teal light source, so the panel has depth without artwork
   that would need maintaining. */
.teaser::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% 18%, rgb(0 179 157 / 0.16), transparent 70%),
    radial-gradient(48rem 34rem at 88% 88%, rgb(18 59 101 / 0.5), transparent 68%);
}

/* The block frames itself against the top and bottom of a normal window, but
   stops spreading on very tall viewports so the content is never stranded in
   the middle. Expressed as a floor rather than a ceiling so a short window
   still grows the block instead of clipping it. */
.teaser-inner {
  position: relative;
  z-index: 1;
  align-self: center;
  min-height: min(50rem, 100%);
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: clamp(2rem, 5vw, 3.5rem);
  width: min(980px, 100% - clamp(2.5rem, 8vw, 5rem));
  margin-inline: auto;
}

.teaser-mark {
  width: clamp(7.5rem, 12vw, 9.5rem);
}

/* Measures are in rem, not ch. The heading is far larger than this element's
   own font size, so a ch measure here would resolve against 16px and wrap the
   heading's hand-set lines a second time. */
.teaser-body {
  align-self: center;
  max-width: 46rem;
}

.teaser-lead {
  max-width: 31rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.55;
}

.teaser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* Hierarchy below the lead comes from size, not colour: --text-inverse-muted
   drops under 4.5:1 against the lighter end of the gradient at these sizes. */
.teaser-note {
  max-width: 34rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--text-inverse-body);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ==========================================================================
   Foot
   ========================================================================== */

.teaser-foot {
  display: grid;
  row-gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Divider separated row, matching the landing page hero stats: the first item
   loses its left padding, the last its right. */
.teaser-credentials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line-inverse);
}

.teaser-credentials > div {
  padding-inline: clamp(1rem, 2.5vw, 1.75rem);
}

.teaser-credentials > div:first-child {
  padding-left: 0;
}

.teaser-credentials > div:last-child {
  padding-right: 0;
}

.teaser-credentials > div + div {
  border-left: 1px solid var(--line-inverse);
}

.teaser-credentials dt {
  color: var(--text-inverse);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.teaser-credentials dd {
  max-width: 22rem;
  margin-top: 0.375rem;
  font-size: clamp(0.875rem, 1.3vw, 0.9375rem);
  line-height: 1.45;
}

.teaser-legal {
  color: var(--text-inverse-body);
  font-size: 0.875rem;
}

/* Phones and small tablets in portrait. The three column credential row needs
   roughly 700px of container before its labels stop wrapping, so it hands over
   to the single column prose treatment well above phone widths. */
@media (max-width: 48rem) {
  .teaser {
    padding: 2.25rem 0 2.75rem;
  }

  /* The glow is sized in rem for the desktop composition, which on a phone is
     wider than the screen, so only a flat corner of it was visible. Resizing
     against the viewport keeps the same lighting at phone scale. */
  .teaser::before {
    background:
      radial-gradient(115vw 55vh at 12% 14%, rgb(0 179 157 / 0.18), transparent 72%),
      radial-gradient(100vw 45vh at 92% 94%, rgb(18 59 101 / 0.55), transparent 70%);
  }

  /* Dropping the 50rem floor is the important one. On a phone that floor is
     taller than the viewport, so the block was stretched: every gap sat at its
     minimum while all the leftover slack collected in the single flexible row
     between the note and the credentials. Without it the block is its natural
     height, stays centred while there is room, and the row gaps below do the
     spacing on their own. */
  .teaser-inner {
    min-height: 0;
    row-gap: 2.5rem;
  }

  .teaser-foot {
    row-gap: 1.75rem;
  }

  /* Three stacked value-and-label pairs separated by rules read as a table and
     ate a third of the screen. The copy was written to work as prose, so on a
     phone each pair collapses onto one line and the rules between them go: it
     becomes a light credibility strip instead. */
  .teaser-credentials {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.75rem;
    padding-top: 1.5rem;
  }

  .teaser-credentials > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.4375rem;
    padding-inline: 0;
  }

  /* Matches the base selector's specificity, which a plain `> div` rule cannot. */
  .teaser-credentials > div + div {
    border-left: 0;
  }

  .teaser-credentials dt {
    font-size: 1rem;
    letter-spacing: -0.01em;
  }

  .teaser-credentials dd {
    margin-top: 0;
  }
}

/* Only on a phone does a full width action beat a button at its natural size. */
@media (max-width: 30rem) {
  .teaser-actions .button {
    flex: 1 1 100%;
  }
}