/* ==========================================================================
   Voryn Group Ltd. — Global Stylesheet
   ========================================================================== */

:root {
  /* Brand palette */
  --navy-950: #04070f;
  --navy-900: #060b1a;
  --navy-850: #081226;
  --navy-800: #0a1b38;
  --navy-750: #0c2247;
  --navy-700: #0e2a5c;
  --blue-600: #1668fc;
  --blue-700: #125ae0;
  --blue-500: #2b7bff;
  --blue-400: #4d9aff;
  --blue-300: #7ab5ff;
  --blue-100: #e6efff;
  --ink-900: #0e1b33;
  --ink-600: #45536b;
  --ink-400: #636e80;
  --mist-100: #f2f5fa;
  --mist-50: #f7f9fc;
  --line-200: #e2e8f2;
  --line-dark: rgba(122, 165, 255, 0.14);
  --white: #ffffff;
  --text-dark-body: #b9c5da;
  --text-dark-dim: #8b99b5;

  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(14, 27, 51, 0.05), 0 4px 14px rgba(14, 27, 51, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(14, 27, 51, 0.06), 0 10px 28px rgba(14, 27, 51, 0.12);
  --container: 1180px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--mist-100);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--blue-600);
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
}

p {
  margin: 0 0 1em;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    transform 0.18s ease;
  white-space: nowrap;
}

.btn .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.btn-primary {
  background: var(--blue-600);
  color: var(--white);
}

.btn-primary:hover {
  background: #0f57df;
}

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(185, 197, 218, 0.55);
}

.btn-outline-light:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.06);
}

.btn-outline-blue {
  background: var(--white);
  color: var(--blue-600);
  border-color: rgba(22, 104, 252, 0.45);
}

.btn-outline-blue:hover {
  border-color: var(--blue-600);
  background: var(--blue-100);
}

.btn-sm {
  padding: 9px 16px;
  font-size: 14px;
}

/* A long label in a fixed-width column would otherwise spill outside the
   border, since .btn sets white-space: nowrap. */
.btn-wrap {
  white-space: normal;
  text-align: center;
}

/* ---------- Text links ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--blue-600);
}

.link-arrow .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
  transition: transform 0.18s ease;
}

.link-arrow:hover .icon {
  transform: translateX(3px);
}

/* ---------- Eyebrow / headings ---------- */
/* --blue-700 rather than --blue-600: at 12.5px uppercase the lighter brand
   blue only reaches 4.35:1 on the --mist-100 section background. */
.eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin: 0 0 14px;
}

.eyebrow--light {
  color: var(--blue-400);
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.2;
  color: var(--ink-900);
  letter-spacing: 0.01em;
}

.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}

.section-head .sub {
  color: var(--ink-600);
  margin-top: 12px;
  font-size: 16px;
}

.section-head--rule .section-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--blue-600);
  margin: 14px auto 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(4, 7, 15, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(122, 165, 255, 0.1);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 19px;
  letter-spacing: 0.34em;
  color: var(--white);
}

.brand-sub {
  font-family: var(--font-serif);
  font-size: 10.5px;
  letter-spacing: 0.42em;
  color: #c0cbde;
  margin-top: 3px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.site-nav a {
  position: relative;
  color: #d4dcea;
  font-size: 14.5px;
  font-weight: 500;
  padding: 6px 0;
  transition: color 0.15s ease;
}

.site-nav a:hover {
  color: var(--white);
}

.site-nav a.active {
  color: var(--white);
}

.site-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--blue-600);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--white);
  padding: 8px;
  cursor: pointer;
}

.nav-toggle .icon {
  width: 26px;
  height: 26px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(105deg, #050b18 0%, #071226 45%, #0a1f44 100%);
  color: var(--white);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56%;
  background-size: cover;
  background-position: center;
}

.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #071226 0%,
    rgba(7, 18, 38, 0.55) 28%,
    rgba(7, 18, 38, 0.08) 70%
  );
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: 84px 0 92px;
  max-width: 560px;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 54px);
  line-height: 1.14;
  letter-spacing: 0.005em;
  margin: 0 0 26px;
}

.hero h1 .accent {
  color: var(--blue-500);
}

.hero p {
  color: var(--text-dark-body);
  font-size: 16px;
  max-width: 520px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 30px;
  color: var(--text-dark-dim);
  font-size: 13.5px;
  line-height: 1.55;
}

.hero-note .icon {
  width: 18px;
  height: 18px;
  color: var(--blue-400);
  margin-top: 2px;
}

.hero-note a {
  color: var(--blue-400);
  font-weight: 600;
}

/* ---------- Sections ---------- */
.section {
  padding: 84px 0;
}

.section--tight {
  padding: 64px 0;
}

.section--white {
  background: var(--white);
}

.section--dark {
  background: linear-gradient(100deg, #050b18 0%, #081428 55%, #0a1f44 100%);
  color: var(--white);
}

/* ---------- Icon badges ---------- */
.icon-badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-800);
  color: var(--blue-400);
  box-shadow: 0 0 0 4px rgba(22, 104, 252, 0.1);
}

.icon-badge .icon {
  width: 26px;
  height: 26px;
}

.icon-badge--light {
  background: var(--blue-100);
  color: var(--blue-600);
  box-shadow: none;
}

.icon-badge--outline {
  background: transparent;
  border: 1.6px solid var(--blue-500);
  color: var(--blue-500);
  box-shadow: none;
}

.icon-badge--solid {
  background: var(--blue-600);
  color: var(--white);
  box-shadow: none;
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 30px 26px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
}

.card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 10px;
}

.card p {
  color: var(--ink-600);
  font-size: 14.5px;
  margin: 0;
}

.card--center {
  text-align: center;
}

.card--center .icon-badge {
  margin: 0 auto 18px;
}

/* Grids */
.grid {
  display: grid;
  gap: 22px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* ---------- Value strip (icon + text inline features) ---------- */
.value-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.value-item {
  padding: 10px 18px;
  border-left: 1px solid var(--line-200);
}

.value-item:first-child {
  border-left: 0;
}

.value-item .icon {
  width: 30px;
  height: 30px;
  color: var(--blue-600);
  margin-bottom: 12px;
}

.value-item h3 {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
}

.value-item p {
  font-size: 13.5px;
  color: var(--ink-600);
  margin: 0;
}

/* ---------- Dark CTA band ---------- */
.cta-band {
  background: linear-gradient(100deg, #081428 0%, #0a1f44 100%);
  border-radius: var(--radius-lg);
  color: var(--white);
  padding: 40px 44px;
  display: flex;
  align-items: center;
  gap: 28px;
  box-shadow: 0 18px 44px rgba(8, 20, 40, 0.28);
}

.cta-band .icon-badge {
  width: 66px;
  height: 66px;
  background: var(--blue-600);
  color: var(--white);
  box-shadow: 0 0 0 8px rgba(22, 104, 252, 0.16);
}

.cta-band-text {
  flex: 1;
}

.cta-band h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  margin: 0 0 8px;
}

.cta-band p {
  color: var(--text-dark-body);
  margin: 0;
  font-size: 15px;
}

/* ---------- Badges / pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Tuned for the dark navy panels it was designed on. */
.pill--launched {
  background: rgba(24, 160, 88, 0.16);
  border: 1px solid rgba(48, 197, 120, 0.55);
  color: #43d183;
}

/* On a white card the light green falls to 1.97:1, so the same pill needs a
   darker ink when it sits on a light surface. */
.card .pill--launched,
.hiring-group .pill--launched,
.info-panel .pill--launched {
  background: #e8f7ef;
  border-color: rgba(17, 122, 69, 0.35);
  color: #116b3c;
}

.pill--soon {
  background: var(--mist-100);
  border: 1px solid var(--line-200);
  color: var(--ink-600);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12.5px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-950);
  color: #a9b6cc;
  padding: 56px 0 28px;
  border-top: 1px solid rgba(122, 165, 255, 0.08);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.4fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(122, 165, 255, 0.1);
}

.footer-brand p {
  font-size: 14px;
  color: #8b99b5;
  max-width: 260px;
  margin-top: 16px;
}

.footer-heading {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 18px;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a {
  display: inline-block;
  color: #a9b6cc;
  font-size: 14px;
  padding: 5px 0;
  transition: color 0.15s ease;
}

.footer-links a:hover {
  color: var(--white);
}

.social-row {
  display: flex;
  gap: 12px;
}

.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(122, 165, 255, 0.1);
  color: #c7d3e8;
  transition: background 0.15s ease, color 0.15s ease;
}

.social-row a:hover {
  background: var(--blue-600);
  color: var(--white);
}

.social-row .icon {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  font-size: 13.5px;
  color: #7b89a4;
}

.footer-bottom a {
  color: #a9b6cc;
}

.footer-bottom a:hover {
  color: var(--white);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---------- Forms ---------- */
.form-label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 7px;
}

.form-control {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink-900);
  background: var(--mist-50);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(22, 104, 252, 0.14);
  background: var(--white);
}

textarea.form-control {
  resize: vertical;
  min-height: 140px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-field {
  margin-bottom: 18px;
}

.form-optional {
  font-weight: 400;
  color: var(--ink-400);
}

/* File input: style the button half so it reads as part of the form. */
.form-control--file {
  padding: 9px 12px;
  cursor: pointer;
}

.form-control--file::file-selector-button {
  margin-right: 14px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--blue-100);
  color: var(--blue-600);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.form-control--file:hover::file-selector-button {
  background: var(--blue-600);
  color: var(--white);
}

.field-hint {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: var(--ink-400);
}

.form-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-400);
  margin-top: 14px;
}

.form-note .icon {
  width: 15px;
  height: 15px;
}

.form-status {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  display: none;
}

.form-status.ok {
  display: block;
  color: #14804a;
}

.form-status.err {
  display: block;
  color: #c0392b;
}

/* ---------- Page hero (inner pages share) ---------- */
.stat-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
}

.stat-card .icon-badge {
  background: var(--navy-800);
  color: var(--blue-400);
}

.stat-num {
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 1.1;
  color: var(--ink-900);
}

.stat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
}

.stat-sub {
  font-size: 12.5px;
  color: var(--ink-400);
}

/* ---------- Utility ---------- */
.text-center {
  text-align: center;
}

.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }

.muted {
  color: var(--ink-600);
}

.note-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--ink-600);
  font-size: 13.5px;
}

.note-line .icon {
  width: 17px;
  height: 17px;
  color: var(--blue-600);
}

/* ==========================================================================
   Page components
   ========================================================================== */

/* ----- Voryn Connect dark panel (Home / Companies) ----- */
.connect-panel {
  background: linear-gradient(100deg, #060d1c 0%, #0a1b38 60%, #0c2247 100%);
  border: 1px solid rgba(122, 165, 255, 0.16);
  border-radius: var(--radius-lg);
  color: var(--white);
  padding: 34px 36px;
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 34px;
  align-items: center;
  box-shadow: 0 18px 44px rgba(8, 20, 40, 0.25);
}

/* Column-count modifiers. Declared here rather than inline so the
   max-width:860px collapse further down the file can still override them. */
.connect-panel--pair {
  grid-template-columns: 250px 1fr;
}

.connect-panel--duo {
  grid-template-columns: 1fr 1fr;
  padding: 26px 30px;
  margin-bottom: 22px;
}

.connect-panel--stack {
  grid-template-columns: minmax(0, 1fr);
  padding: 28px 22px;
  gap: 0;
}

.vc-brand {
  text-align: center;
  border-right: 1px solid rgba(122, 165, 255, 0.14);
  padding-right: 30px;
}

.vc-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* Voryn Connect lockup. The reversed artwork (white "VORYN") is used because
   every placement sits on the dark .connect-panel / .featured-art gradient,
   where the stock navy wordmark falls to 1.19:1 contrast. */
.vc-logo-img {
  width: 200px;
  max-width: 100%;
  height: auto;
  flex: none;
}

.vc-tagline {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin: 12px 0 6px;
}

/* Supporting copy on the dark panel. Kept at --text-dark-body rather than the
   dimmer --text-dark-dim: at 13px on the navy gradient the dim tone reads as
   washed out even though it clears the contrast threshold. */
.vc-sub {
  font-size: 13px;
  color: var(--text-dark-body);
  margin: 0;
}

/* Grid, not flex-wrap: wrapped flex items centre the short final row and stop
   lining up with the row above. */
.service-icons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 8px;
  border-bottom: 1px solid rgba(122, 165, 255, 0.14);
  padding-bottom: 22px;
  margin-bottom: 20px;
}

.service-icons .service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #d7e0ee;
  text-align: center;
}

.service-icons .icon {
  width: 30px;
  height: 30px;
  color: var(--blue-400);
}

.connect-panel-desc {
  color: #d3dcec;
  font-size: 14.5px;
  margin: 0;
}

.connect-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.connect-panel-actions .btn {
  width: 100%;
}

.panel-note {
  display: flex;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-dark-body);
  line-height: 1.5;
  margin-top: 4px;
}

.panel-note .icon {
  width: 16px;
  height: 16px;
  color: var(--blue-400);
  margin-top: 2px;
}

/* ----- Future company cards ----- */
/* Cards share the parent grid's row tracks so the icon, title, pill and body
   of every card line up across the row regardless of how many lines the
   longest title wraps to. */
.future-card {
  text-align: center;
  padding: 28px 20px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  justify-items: center;
  align-content: start;
  gap: 0;
}

@supports (grid-template-rows: subgrid) {
  .grid-5 > .future-card,
  .grid-4 > .future-card,
  .grid-3 > .future-card {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }

  .grid-5:has(> .future-card),
  .grid-4:has(> .future-card),
  .grid-3:has(> .future-card) {
    grid-auto-rows: auto;
    grid-template-rows: repeat(4, auto);
  }
}

/* Only the standalone glyph gets the large treatment — an icon nested in an
   .icon-badge keeps the badge's own 26px sizing. */
.future-card > .icon {
  width: 42px;
  height: 42px;
  color: var(--blue-600);
  margin: 0 auto 14px;
  stroke-width: 1.5;
  align-self: start;
}

.future-card h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  margin: 0 0 10px;
  align-self: start;
}

.future-card .pill {
  margin-bottom: 12px;
  align-self: start;
}

.future-card p {
  font-size: 13px;
  margin: 0;
}

.future-card .btn {
  align-self: start;
}

/* ----- Split section (text + image) ----- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* Column-ratio modifiers. Declared here rather than inline so the
   max-width:860px collapse further down the file can still override them. */
.split--form,
.split--text-wide,
.split--media-wide {
  align-items: start;
}

.split--form {
  grid-template-columns: 1.15fr 0.85fr;
}

.split--media-wide {
  grid-template-columns: 0.75fr 1.25fr;
}

.split--text-wide {
  grid-template-columns: 0.8fr 1.2fr;
}

.split-media img {
  border-radius: var(--radius-lg);
  width: 100%;
  object-fit: cover;
}

.split h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.15;
  margin: 0 0 22px;
}

.section--dark .split p {
  color: var(--text-dark-body);
}

/* ----- Mission / vision dark duo band (About) ----- */
.duo-band {
  background: linear-gradient(100deg, #081428 0%, #0a1f44 100%);
  border-radius: var(--radius-lg);
  color: var(--white);
  padding: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  box-shadow: 0 18px 44px rgba(8, 20, 40, 0.28);
}

.duo-item {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.duo-item .icon-badge {
  flex: none;
  background: rgba(22, 104, 252, 0.14);
  color: var(--blue-400);
  box-shadow: none;
  border: 1px solid rgba(77, 154, 255, 0.35);
}

.duo-item + .duo-item {
  border-left: 1px solid rgba(122, 165, 255, 0.16);
  padding-left: 44px;
}

.duo-item h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-400);
  margin: 0 0 10px;
}

.duo-item p {
  color: var(--text-dark-body);
  font-size: 14.5px;
  margin: 0;
}

/* ----- Founder message (About) ----- */
.founder-figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.founder-figure img {
  width: 100%;
  object-fit: cover;
}

.founder-quote {
  border-left: 3px solid var(--blue-600);
  padding-left: 22px;
  margin: 22px 0;
}

.founder-quote p {
  font-size: 15.5px;
}

.signature-img {
  height: 58px;
  width: auto;
  margin: 10px 0 6px;
}

/* ----- Principles row (About values) ----- */
.principles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.principle {
  text-align: center;
  padding: 8px 16px;
  border-left: 1px solid var(--line-200);
}

.principle:first-child {
  border-left: 0;
}

.principle .icon-badge {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
}

.principle h3 {
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 8px;
}

.principle p {
  font-size: 13px;
  color: var(--ink-600);
  margin: 0;
}

/* ==========================================================================
   Shared component variants
   Extracted from repeated inline style attributes so every page renders these
   patterns identically and the responsive rules below can still override them.
   ========================================================================== */

/* Page hero artwork ----------------------------------------------------- */
.hero-media--home {
  background-image: url("/assets/img/home-banner.jpg");
}

.hero-media--about {
  background-image: url("/assets/img/founder-message.jpg");
}

.hero-media--companies {
  background-image: url("/assets/img/companies-banner.jpg");
}

.hero-media--careers {
  background-image: url("/assets/img/team.jpg");
}

.hero-media--contact {
  background-image: url("/assets/img/contact-banner.jpg");
}

.hero-media--media {
  background-image: url("/assets/img/media-banner.jpg");
}

/* Hero height variants -------------------------------------------------- */
.hero-inner--compact {
  padding: 64px 0 68px;
}

.hero-inner--legal {
  padding: 56px 0 60px;
  max-width: 100%;
}

.hero-inner--notice {
  padding: 110px 0 120px;
  max-width: 640px;
}

/* Cards ----------------------------------------------------------------- */
.card--pad-lg {
  padding: 34px;
}

.mini-card {
  padding: 22px 14px;
  background: var(--mist-50);
}

.mini-card .icon-badge {
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
}

.mini-card .icon-badge .icon {
  width: 20px;
  height: 20px;
}

.mini-card h3 {
  font-size: 14px;
  margin-bottom: 2px;
}

.mini-card p {
  font-size: 12px;
}

.stat-card--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* Check list ------------------------------------------------------------ */
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-600);
}

.check-list .icon {
  width: 17px;
  height: 17px;
  color: var(--blue-600);
}

/* Button rows ----------------------------------------------------------- */
.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-row--tight {
  margin-top: 22px;
}

.btn-row--loose {
  margin-top: 34px;
}

/* Panels ---------------------------------------------------------------- */
.vc-brand--flush {
  border: 0;
  padding: 0;
}

.panel-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 21px;
  margin: 0 0 10px;
}

.panel-title--sm {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-600);
  margin: 0 0 14px;
}

/* CTA band with a bleed image ------------------------------------------- */
.cta-band--media {
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}

.cta-band--media > img {
  width: 280px;
  object-fit: cover;
}

.cta-band--media .cta-band-text {
  padding: 40px 0;
}

.cta-band--media .btn {
  align-self: center;
  margin-right: 40px;
}

/* Short accent rule, matching .section-head--rule ------------------------ */
.rule {
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--blue-600);
  margin-bottom: 22px;
}

/* Attribution ----------------------------------------------------------- */
.signature-role {
  color: var(--text-dark-dim);
  font-size: 14px;
}

/* News ------------------------------------------------------------------ */
.news-date--inline {
  position: static;
}


/* ----- Open roles, grouped by company (Careers) ----- */
.hiring-groups {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hiring-group {
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 28px 22px;
}

.hiring-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line-200);
}

.hiring-company {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.hiring-company-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-800);
  color: var(--blue-400);
}

.hiring-company-icon .icon {
  width: 22px;
  height: 22px;
}

/* Company picture in the job-detail sidebar. */
.company-logo {
  width: 64px;
  height: 64px;
  border-radius: 13px;
  object-fit: contain;
  background: var(--white);
  border: 1px solid var(--line-200);
  padding: 6px;
  margin-bottom: 14px;
}

/* Uploaded company profile picture. White plate so logos drawn for light
   backgrounds (most brand marks) keep their intended contrast. */
.hiring-company-icon--photo {
  background: var(--white);
  border: 1px solid var(--line-200);
  overflow: hidden;
  padding: 4px;
}

.hiring-company-icon--photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hiring-company h3 {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 3px;
  color: var(--ink-900);
}

.hiring-company p {
  font-size: 13px;
  color: var(--ink-600);
  margin: 0 0 7px;
  max-width: 62ch;
}

.link-arrow--sm {
  font-size: 13px;
}

.link-arrow--sm .icon {
  width: 14px;
  height: 14px;
}

.position-grid {
  gap: 2px 20px;
}

.hiring-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.panel-note--light {
  color: var(--ink-600);
  margin-top: 0;
  max-width: 60ch;
}

.empty-note {
  text-align: center;
  padding: 44px 24px;
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
}

.empty-note p {
  color: var(--ink-600);
  max-width: 46ch;
  margin: 0 auto 20px;
}

/* ----- Position rows ----- */
.position-row {
  display: flex;
  gap: 14px;
  padding: 14px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.position-row:hover {
  background: var(--mist-50);
}

.position-row:hover h4 {
  color: var(--blue-700);
}

.position-meta {
  display: block;
  font-size: 12px;
  color: var(--ink-400);
  margin-top: 6px;
}

.position-row .pos-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--blue-100);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.position-row .pos-icon .icon {
  width: 20px;
  height: 20px;
}

.position-row h4 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0 0 3px;
  color: var(--ink-900);
}

.position-row p {
  font-size: 12.5px;
  color: var(--ink-600);
  margin: 0;
}

/* ----- Process steps (Careers) ----- */
.process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  position: relative;
}

.process-step {
  text-align: center;
  position: relative;
  padding: 0 8px;
}

.step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue-600);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.step-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--line-200);
  background: var(--white);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: var(--shadow-card);
}

.step-icon .icon {
  width: 26px;
  height: 26px;
}

.process-step h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}

.process-step p {
  font-size: 12.5px;
  color: var(--ink-600);
  margin: 0;
}

/* ----- Ecosystem items (Companies) ----- */
.eco-item {
  padding: 10px 18px;
  border-left: 1px solid var(--line-200);
}

.eco-item:first-child {
  border-left: 0;
}

.eco-item .icon-badge {
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
}

.eco-item h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}

.eco-item p {
  font-size: 13.5px;
  color: var(--ink-600);
  margin: 0;
}


/* ----- Contact info cards ----- */
.contact-card {
  text-align: center;
  padding: 26px 18px;
}

.contact-card .icon-badge {
  margin: 0 auto 16px;
  background: var(--blue-600);
  color: var(--white);
  box-shadow: 0 0 0 5px rgba(22, 104, 252, 0.12);
}

.contact-card h3 {
  font-size: 15.5px;
}

.contact-card .desc {
  font-size: 12.5px;
  min-height: 56px;
}

.contact-lines {
  border-top: 1px solid var(--line-200);
  margin-top: 16px;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.contact-lines span {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-600);
  /* The markup puts a <wbr> after the "@", so an address that will not fit
     breaks there rather than mid-domain. break-word is the safety net. */
  overflow-wrap: break-word;
}

.contact-lines .icon {
  width: 14px;
  height: 14px;
  color: var(--blue-600);
  margin-top: 3px;
}

/* ----- Info sidebar (Contact form) ----- */
.info-panel {
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 30px 28px;
}

.info-item {
  display: flex;
  gap: 16px;
  padding: 14px 0;
}

.info-item + .info-item {
  border-top: 1px solid var(--line-200);
}

.info-item .icon {
  width: 22px;
  height: 22px;
  color: var(--blue-600);
  margin-top: 2px;
}

.info-item h4 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0 0 4px;
}

.info-item p {
  font-size: 13.5px;
  color: var(--ink-600);
  margin: 0;
}

/* ----- News cards (Media) ----- */
.news-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.news-thumb {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-card:hover .news-thumb img {
  transform: scale(1.04);
}

.news-date {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--navy-800);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 6px;
}

.news-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-body h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  margin: 0 0 12px;
}

.news-body p {
  flex: 1;
  margin-bottom: 16px;
}

/* ----- Featured story (Media) ----- */
.featured {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 34px;
}

.featured-art {
  background: linear-gradient(120deg, #060d1c 0%, #0a1b38 60%, #0c2247 100%);
  border-radius: var(--radius-md);
  color: var(--white);
  text-align: center;
  padding: 48px 26px;
}

.featured-art .pill--launched {
  margin: 18px 0;
}

.featured-art .vc-logo {
  margin-bottom: 4px;
}

.featured-art .tagline {
  color: #c7d3e8;
  font-size: 14px;
  margin: 0;
}

/* ----- Press resource cards ----- */
.press-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
}

.press-card .icon-badge {
  margin-bottom: 16px;
  background: var(--navy-800);
  color: var(--blue-400);
  box-shadow: none;
}

.press-card p {
  font-size: 13px;
  flex: 1;
  margin-bottom: 16px;
}

/* ----- Row alignment for card grids -----
   Titles wrap to different line counts, which pushes each card's body copy and
   footer link to a different height. Letting the cards share the parent grid's
   row tracks lines every band up. Flex layout above stays as the fallback. */
@supports (grid-template-rows: subgrid) {
  .grid:has(> .contact-card),
  .grid:has(> .press-card),
  .grid:has(> .news-card) {
    grid-template-rows: repeat(4, auto);
  }

  /* Icon / title / body */
  .grid:has(> .card--center) {
    grid-template-rows: repeat(3, auto);
  }

  .grid > .card--center {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
    justify-items: center;
  }

  .grid > .card--center > * {
    align-self: start;
  }

  /* Title / summary / meta beside the fixed-width icon. Three rows, so a
     two-line title in one card still lines its summary up with the others. */
  .grid:has(> .position-row) {
    grid-template-rows: repeat(3, auto);
  }

  .position-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-row: span 3;
    grid-template-rows: subgrid;
  }

  .position-row .pos-icon {
    grid-row: span 3;
  }

  .position-row > span + span {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }

  .position-row .position-meta {
    align-self: end;
  }

  .contact-card,
  .press-card,
  .news-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    align-content: start;
  }

  .contact-card > *,
  .press-card > * {
    align-self: start;
  }

  .contact-card .contact-lines,
  .press-card .link-arrow {
    align-self: end;
  }

  /* The news card's text rows live one level down, so the body passes the
     shared tracks through to the title, excerpt and link. */
  .news-body {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }

  .news-body p {
    flex: none;
  }

  .news-body .link-arrow {
    align-self: end;
    justify-self: start;
  }
}

/* ----- Job detail page (/careers/<slug>) ----- */
.hero--compact .hero-inner {
  padding: 54px 0 60px;
}

.hero-inner--wide {
  max-width: 760px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue-300);
  margin-bottom: 20px;
}

.back-link:hover {
  color: var(--white);
}

.back-link .icon {
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
}

.job-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 48px;
  align-items: start;
}

.job-main > h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  margin: 34px 0 14px;
  color: var(--ink-900);
}

.job-main > p {
  color: var(--ink-600);
  font-size: 16px;
  line-height: 1.75;
}

.bullet-list {
  margin: 0 0 4px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bullet-list li {
  color: var(--ink-600);
  font-size: 15.5px;
  line-height: 1.6;
}

.bullet-list li::marker {
  color: var(--blue-600);
}

.job-aside {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.info-panel--tight {
  padding: 24px 26px;
}

.info-panel--tight .pill {
  margin: 4px 0 14px;
}

.info-panel--tight .muted {
  font-size: 14px;
  margin-bottom: 12px;
}

.pill--parent {
  background: var(--blue-100);
  border: 1px solid rgba(22, 104, 252, 0.3);
  color: var(--blue-700);
  text-transform: none;
  letter-spacing: 0.02em;
}

.pill--lg {
  padding: 10px 20px;
  font-size: 13.5px;
}

@media (max-width: 940px) {
  .job-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .job-aside {
    position: static;
  }
}

/* ----- Legal pages ----- */
.legal-body {
  max-width: 800px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 52px 56px;
}

.legal-body h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  margin: 34px 0 12px;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body p,
.legal-body li {
  color: var(--ink-600);
  font-size: 15px;
}

.legal-updated {
  font-size: 13.5px;
  color: var(--ink-400);
  margin-bottom: 28px;
}

/* ----- Article pages ----- */
.article-body {
  max-width: 780px;
  margin: 0 auto;
}

.article-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 36px;
}

.article-hero img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--ink-400);
  margin-bottom: 18px;
}

.article-body h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1.2;
  margin: 0 0 22px;
}

.article-body p {
  color: var(--ink-600);
  font-size: 16px;
  line-height: 1.75;
}

.article-body h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  margin: 34px 0 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {

  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .principle {
    border-left: 0;
  }


  .eco-item {
    border-left: 0;
  }

  .grid-4,
  .grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .value-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .value-item {
    border-left: 0;
  }

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

@media (max-width: 1024px) and (min-width: 861px) {
  .connect-panel {
    grid-template-columns: 220px 1fr;
  }

  .connect-panel-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 860px) {
  .connect-panel,
  .duo-band,
  .split,
  .featured {
    grid-template-columns: minmax(0, 1fr);
  }

  .position-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hiring-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .vc-brand {
    border-right: 0;
    border-bottom: 1px solid rgba(122, 165, 255, 0.14);
    padding-right: 0;
    padding-bottom: 24px;
  }

  .duo-item + .duo-item {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(122, 165, 255, 0.16);
    padding-top: 34px;
  }

  .service-icons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .process {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .legal-body {
    padding: 34px 26px;
  }

  .site-nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--navy-950);
    border-bottom: 1px solid rgba(122, 165, 255, 0.12);
    padding: 18px 24px 22px;
    display: none;
  }

  .site-nav.open {
    display: flex;
  }

  .site-nav a {
    padding: 10px 0;
    font-size: 16px;
    width: 100%;
  }

  .site-nav a.active::after {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .header-cta .btn {
    display: none;
  }

  .hero-media {
    position: relative;
    width: 100%;
    height: 300px;
  }

  .hero-media::before {
    background: linear-gradient(0deg, #071226 4%, rgba(7, 18, 38, 0.18) 60%);
  }

  .hero-inner {
    max-width: 100%;
    padding: 56px 0 64px;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta-band {
    flex-direction: column;
    text-align: center;
    padding: 36px 28px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 560px) {

  .principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid-4,
  .grid-5,
  .value-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .section {
    padding: 60px 0;
  }

  /* Long labels ("Learn More About Voryn Connect") cannot stay on one line
     on a 320px screen without pushing the layout wider than the viewport. */
  .btn {
    white-space: normal;
    text-align: center;
  }
}