/*
  PCOB Manager landing page.

  The palette comes from where the tool is used: a dark broadcast position, the
  PUBG amber that runs through the game's own esports overlays, and one red
  reserved for the live state so it never turns into decoration.

  The display face is Bahnschrift, which ships with Windows 10 and later. The
  audience for this page is sitting at a Windows machine, so the condensed
  grotesque they already have is both the right shape for scoreboard type and
  the one that needs no download.
*/

:root {
  --ink: #12151c;
  --panel: #191e27;
  --panel-lift: #1f2531;
  --line: #2a3140;
  --text: #e9ecf2;
  --dim: #838c9e;
  --amber: #f2a900;
  --live: #ff4438;

  --display: "Bahnschrift", "DIN Alternate", "Oswald", "Segoe UI Semibold", system-ui, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;

  --shell: 68rem;
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Masthead ------------------------------------------------------------ */

.masthead {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(18, 21, 28, 0.9);
  backdrop-filter: blur(8px);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}

.wordmark {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wordmark__thin {
  color: var(--dim);
  font-weight: 300;
  margin-left: 0.4em;
}

.masthead__get {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--amber);
  border: 1px solid rgba(242, 169, 0, 0.4);
  border-radius: 2px;
  padding: 0.45rem 0.9rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.masthead__get:hover {
  background: rgba(242, 169, 0, 0.12);
  border-color: var(--amber);
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  padding: 5rem 0 4.5rem;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 24rem;
  gap: 3.5rem;
  align-items: center;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin: 0 0 1.25rem;
}

.hero__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}

.hero__lede {
  color: var(--dim);
  max-width: 34rem;
  margin: 0 0 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* --- Buttons ------------------------------------------------------------- */

.button {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  padding: 0.8rem 1.5rem;
  transition: transform 0.12s ease, background 0.15s ease;
}

.button:active {
  transform: translateY(1px);
}

.button--primary {
  background: var(--amber);
  color: #17130a;
  font-weight: 600;
}

.button--primary:hover {
  background: #ffb919;
}

.button--wide {
  display: block;
  text-align: center;
}

/* --- Shots --------------------------------------------------------------- */
/*
   Photographs of the program rather than drawings of it. Both get a frame, for
   opposite reasons: the import panel is near-white and would otherwise read as
   a hole punched through a dark page, and the automation panel is dark enough
   to dissolve into it.

   No chrome is drawn around either. Both are shots of a region of the window,
   not of the window, and inventing a title bar for them would be a lie about
   what you are looking at.
*/

.hero__stage,
.shot__frame {
  margin: 0;
  padding: 0.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.45);
}

.hero__shot,
.shot__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.shot {
  padding: 0 0 5rem;
}

/* The panel is 493px wide as captured. The column is sized so it is never
   asked to stretch past that and go soft. */
.shot__inner {
  display: grid;
  grid-template-columns: 1fr 31rem;
  gap: 3.5rem;
  align-items: center;
}

.shot__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}

.shot__body {
  color: var(--dim);
  max-width: 30rem;
  margin: 0;
}

/* --- Features ------------------------------------------------------------ */

.features {
  padding: 1rem 0 5rem;
}

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.card {
  background: var(--ink);
  padding: 2rem 1.9rem 2.1rem;
}

.card__kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--amber);
  margin: 0 0 0.9rem;
}

.card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 0.7rem;
}

.card__body {
  color: var(--dim);
  font-size: 0.95rem;
  margin: 0;
}

/* --- Download ------------------------------------------------------------ */

.get {
  border-top: 1px solid var(--line);
  padding: 4rem 0 4.5rem;
}

.get__inner {
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: 3rem;
  align-items: center;
}

.get__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 0.6rem;
}

.get__body {
  color: var(--dim);
  margin: 0;
  max-width: 30rem;
}

.get__note {
  color: var(--dim);
  font-size: 0.85rem;
  margin: 0.9rem 0 0;
  text-align: center;
}

.get__note a {
  color: var(--amber);
}

/* --- Footer -------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 1.6rem 0;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--dim);
}

/* The name stays left, the links sit together on the right rather than being
   spread to opposite ends by the space-between above. */
.footer__links {
  display: flex;
  gap: 1.4rem;
}

.footer__inner a {
  color: var(--dim);
  text-decoration: none;
}

.footer__inner a:hover {
  color: var(--text);
}

/* --- Focus --------------------------------------------------------------- */

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

/* --- Narrow -------------------------------------------------------------- */

@media (max-width: 62rem) {
  .hero__inner,
  .shot__inner,
  .get__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero {
    padding: 3.5rem 0 3rem;
  }

  /* Stacked, the import panel would otherwise run the full column width and
     turn into a white wall that outweighs the headline above it. */
  .hero__stage {
    max-width: 22rem;
  }

  .grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}