:root {
  --blue: #325585;
  --blue-dark: #27436b;
  --ink: #0f172a;
  --muted: #334155;
  --line: #e2e8f0;
  --light-blue: #e0f2fe;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.split-site {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
}

.company {
  position: relative;
  display: flex;
  /* A zero basis leaves space for flex-grow, so the centre boundary can animate. */
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  padding: 60px 50px 100px;
  transition: flex-grow .55s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) and (min-width: 850px) {
  .company:hover { flex-grow: 1.22; }

  /* The active panel opens toward the centre; its content follows that motion. */
  .company--spendex:hover .company__brand,
  .company--spendex:hover .company__content { transform: translateX(2rem); }

  .company--distribution:hover .company__brand,
  .company--distribution:hover .company__content { transform: translateX(-2rem); }
}

.company--spendex { color: var(--ink); background: #fff; border-right: 2px solid var(--line); }
.company--distribution { color: #fff; background: var(--blue); }

.company__brand {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 219px;
  margin-bottom: 24px;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

.company__logo { display: block; max-width: 100%; object-fit: contain; }
.company__logo--distribution { width: auto; height: 166px; filter: brightness(0) invert(1); }

.company__logo--spendex { width: auto; height: 219px; }

.company__content {
  width: 100%;
  max-width: 607px;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

.tag {
  display: inline-block;
  margin: 0 0 20px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
}

.company--spendex .tag { color: var(--blue); background: rgb(50 85 133 / 15%); }
.company--distribution .tag { background: rgb(255 255 255 / 20%); }

.description { margin: 0 0 24px; }
.company--spendex .description { color: var(--muted); }
.company--distribution .description { color: var(--light-blue); }

.features { display: grid; gap: 10px; margin: 0 0 32px; padding: 0; list-style: none; font-size: 15px; font-weight: 500; }
.features li::before { content: "✓"; margin-right: .45rem; }
.company--spendex .features { color: #1e293b; }
.company--distribution .features { color: #f1f5f9; }

.button {
  display: inline-flex;
  gap: .65rem;
  align-items: center;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s, color .2s, transform .2s;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button:focus-visible, .company__footer a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.button--dark { color: #fff; background: var(--blue); }
.button--dark:hover { background: var(--blue-dark); }
.button--light { color: var(--blue); background: #fff; }
.button--light:hover { color: var(--blue-dark); background: var(--line); }

.company__footer {
  position: absolute;
  right: 0;
  bottom: 24px;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 0 1rem;
}
.company__footer a { font-size: 13px; font-weight: 600; text-decoration: none; }
.company--spendex .company__footer a { color: var(--blue); }
.company--distribution .company__footer a { color: #fff; }
.company__footer a:hover { text-decoration: underline; }

.legal-link {
  position: fixed;
  z-index: 10;
  right: 22px;
  bottom: 18px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  opacity: .72;
  transition: opacity .2s;
}
.legal-link:hover, .legal-link:focus-visible { color: #fff; opacity: 1; text-decoration: underline; }
.legal-link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.legal-page { color: var(--ink); background: #f8fafc; font-family: Montserrat, Arial, sans-serif; }
.legal-content { width: min(100% - 40px, 860px); margin: 0 auto; padding: 64px 0 80px; }
.legal-content h1 { margin: 0 0 2.5rem; color: var(--blue); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; }
.legal-content h2 { margin: 2.5rem 0 1rem; color: var(--blue); font-size: 1.3rem; }
.legal-content p { margin: 0 0 1rem; color: #334155; }
.legal-content a { color: var(--blue); overflow-wrap: anywhere; }
.back-link { display: inline-block; margin-bottom: 3.5rem; font-weight: 600; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

@media (max-width: 849px) {
  .split-site { display: block; overflow: visible; }
  .company { min-height: 760px; padding: 52px 28px 100px; }
  .company--spendex { border-right: 0; border-bottom: 2px solid var(--line); }
  .company__brand { min-height: auto; margin-bottom: 36px; }
  .company__logo--spendex { width: min(100%, 430px); height: auto; }
  .company__logo--distribution { width: min(100%, 400px); height: auto; }
  .legal-link { position: absolute; color: var(--blue); }
}

@media (max-width: 420px) {
  .company { min-height: 700px; padding: 40px 20px 96px; }
  .description { font-size: 14px; }
  .company__footer { gap: 12px; flex-wrap: wrap; }
}