/* ============================================================
   VERSED STUDIO · Accelerator skin
   A re-skin of site/index.html in the versedaccelerator.com
   design language. Content is unchanged; only the design system
   moves. Nothing here touches the live page.

   Spec pulled from projects/versed-accelerator/site (Framer
   build + the #va-overrides block Joey hand-wrote on it):

     type      Helvetica Neue. Headers -4% tracking, body -1%.
               Hero h1 uppercase medium; section h2 regular.
     accent    #023aff, square buttons, 11px/22px, caps.
     surface   #fdfdfd canvas, #dedede hairlines, no radius.
     layout    1300px main, 12px gutter, every section carries
               left/right rails and draws its own top hairline.
   ============================================================ */

:root {
  --ink: #000;
  --paper: #fdfdfd;
  --surface: #f5f5f5;
  --chip: #e9eaec;
  --line: #dedede;
  --line-soft: #ececec;
  --grey: #545454;
  --grey-2: #636363;
  --grey-3: #787878;
  --grey-4: #a1a1a1;
  --accent: #023aff;
  --accent-hover: #0231d9;
  --accent-soft: #5b9cfc33;

  --face: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --rail-max: 1300px;
  --gutter: 12px;
  --pad-x: 28px;
  --section-py: 50px;
  --nav-h: 70px;
}

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

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

body {
  margin: 0;
  padding-top: var(--nav-h);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

p { margin: 0; }

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

/* ---------- rails -------------------------------------------------
   main holds the 1300px column; every section paints its own left
   and right hairline, so the rails read as one continuous pair of
   lines running the height of the page. */

main {
  max-width: var(--rail-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  position: relative;
  padding: var(--section-py) var(--pad-x);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.section:first-child { border-top: 0; }

/* ---------- shared type -------------------------------------------- */

.label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--grey);
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 44px;
}

.section-head h2 {
  font-size: 44px;
  font-weight: 400;
  text-wrap: balance;
}

.section-head h2 em { font-style: italic; }

.section-sub {
  max-width: 600px;
  font-size: 14px;
  color: var(--grey);
  text-wrap: balance;
}

/* ---------- buttons ------------------------------------------------
   square, caps, 11px/22px. Same component everywhere on the site. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: #fff;
  font-family: var(--face);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.4;
  text-transform: uppercase;
  transition: background 0.15s ease;
}

.btn:hover { background: var(--accent-hover); }

.btn--secondary { background: var(--chip); color: var(--ink); }
.btn--secondary:hover { background: #dcdee1; }

/* ---------- nav ----------------------------------------------------
   logo left, links centred, no button. The links sit centred against
   the row itself, so the wordmark is taken out of the flex flow. */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  background: var(--paper);
}

.nav-rail {
  max-width: var(--rail-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.nav-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);
  padding: 0 var(--pad-x);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.wordmark {
  position: absolute;
  left: var(--pad-x);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}

.wordmark-glyph { font-size: 22px; line-height: 1; }

.wordmark-name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* bracket links: [ Label ]. The brackets are their own spans so they
   can sit a shade lighter than the label. */
.blink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--grey);
  transition: color 0.15s ease;
}

.blink b {
  font-weight: 400;
  color: var(--grey-4);
  transition: color 0.15s ease;
}

.blink:hover, .blink:hover b { color: var(--ink); }

/* ---------- hero ---------------------------------------------------- */

/* copy left, visual right. Below 1200 the hero stacks and centres,
   the same breakpoint the Accelerator uses. */
.hero {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 110px var(--pad-x) 90px;
}

.hero-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.hero h1 {
  font-size: 46px;
  font-weight: 500;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero-sub {
  max-width: 460px;
  font-size: 14px;
  color: var(--grey);
}

/* corner brackets: four L-shaped marks pushed 14px off the media */

.crop {
  position: relative;
  flex: none;
  padding: 14px;
}

.crop::before, .crop::after,
.crop > .crop-b::before, .crop > .crop-b::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--grey-4);
}

.crop::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.crop::after { top: 0; right: 0; border-width: 1px 1px 0 0; }
.crop > .crop-b::before { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.crop > .crop-b::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

.hero-visual { flex: none; display: flex; justify-content: flex-start; }

.hero-media {
  width: 270px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface);
}

/* ---------- stats ---------------------------------------------------
   three cells split by hairlines, the first grid on the page. */

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

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 36px var(--pad-x);
  border-left: 1px solid var(--line);
}

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

.stat-num {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.stat-label {
  font-size: 13px;
  color: var(--grey);
}

/* ---------- clients -------------------------------------------------- */

.clients { padding: 44px 0; overflow: hidden; }

.clients-label {
  display: block;
  margin-bottom: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--grey);
}

.marquee { overflow: hidden; }

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 52s linear infinite;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: 72px;
  padding-right: 72px;
}

/* greyscale, knocked back: same treatment the Accelerator ticker uses */
.marquee-group img {
  height: 28px;
  width: auto;
  filter: grayscale(1) brightness(0);
  opacity: 0.72;
}

.marquee-group img[alt="Hyro"], .marquee-group img[src*="hyro"] { height: 32px; }
.marquee-group img[src*="heybud"] { height: 26px; }
.marquee-group img[src*="restnest"] { height: 36px; }
.marquee-group img[src*="adobe"] { height: 26px; }
.marquee-group img[src*="unilever"] { height: 24px; }
.marquee-group img[src*="figma"] { height: 42px; }
.marquee-group img[src*="sentinel"] { height: 34px; }
.marquee-group img[src*="tequila"] { height: 52px; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- mission control ----------------------------------------- */

.mc { padding-bottom: 0; }

.mc-hud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  border-bottom: 0;
}

.mc-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-left: 1px solid var(--line);
}

.mc-stat:first-child { border-left: 0; }

.mc-stat-val {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.mc-stat-val.flash { animation: flash 0.5s ease; }

@keyframes flash {
  from { color: var(--accent); }
  to { color: var(--ink); }
}

.mc-stat-delta { font-size: 12px; color: var(--grey-3); }

.mc-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.mc-status .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.mc-status .sep { color: var(--grey-4); }
.mc-status .uptime { margin-left: auto; }

/* the wall runs itself: one row, two copies of the list, one keyframe.
   -50% lands mid-gap between the copies, the half-gap takes it to the
   seam, so the loop never jumps. Duration is set from the measured track
   (see the pace() call in index.html) so the speed stays constant in px/s
   across breakpoints. Same mechanism as the Accelerator's creative
   slider; the edge fade is the live Versed wall's. */

.mc-wall {
  --wall-gap: 16px;
  margin: 0 calc(var(--pad-x) * -1);
  padding: 32px 0 50px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.mc-wall-inner {
  display: flex;
  gap: var(--wall-gap);
  width: max-content;
  padding-left: var(--wall-gap);
  will-change: transform;
  animation: wall-flow var(--wall-duration, 60s) linear infinite;
}

.mc-wall:hover .mc-wall-inner { animation-play-state: paused; }

@keyframes wall-flow {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--wall-gap) / 2), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .mc-wall-inner { animation: none; }
  .mc-wall { overflow-x: auto; }
}

.mc-card { width: 190px; flex: none; }

.vid {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.vid-media { width: 100%; height: 100%; object-fit: cover; }

.vid-top, .vid-meta {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.vid-top { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent); }
.vid-meta { bottom: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); }

.vid .live { color: var(--accent); }
.vid .live::before { content: "● "; }

.vid .pill {
  padding: 2px 5px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
}

.mc-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.mc-card-meta .perf { color: var(--accent); }

/* ---------- loop ------------------------------------------------------
   four numbered cells on one hairline grid. */

.loop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
}

.loop-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-left: 1px solid var(--line);
}

.loop-box-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.loop-box:first-child { border-left: 0; }

.loop-num {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--grey);
}

.loop-box h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.loop-box p { font-size: 13px; color: var(--grey); }

/* ---------- closing cta ------------------------------------------------ */

.cta { padding: 90px var(--pad-x); }

.cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.cta-content h2 {
  font-size: 44px;
  font-weight: 400;
  text-wrap: balance;
}

/* :not(.label) so this does not outrank .label on the section eyebrow.
   Without it the CTA's "// LET'S TALK" set at 14px while every other
   // label on the page sat at 10px. */
.cta-content p:not(.label) { font-size: 14px; color: var(--grey); }
.cta-content .btn { margin-top: 8px; }

/* ---------- footer ------------------------------------------------------ */

.footer-rail {
  max-width: var(--rail-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 60px;
}

.footer-box {
  border: 1px solid var(--line);
  padding: 44px var(--pad-x);
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 56px;
  flex-wrap: wrap;
}

.footer-company { display: flex; flex-direction: column; gap: 12px; }

.footer-company .wordmark { position: static; transform: none; }

.footer-company .wordmark-glyph { font-size: 17px; }
.footer-company .wordmark-name { font-size: 14px; }

.footer-copy { font-size: 13px; color: var(--grey-2); }

.footer-cols { display: flex; gap: 72px; flex-wrap: wrap; }

.footer-col { display: flex; flex-direction: column; gap: 10px; }

.footer-col-head {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.footer-social a { color: var(--grey); transition: color 0.15s ease; }
.footer-social a:hover { color: var(--ink); }
.footer-social svg { width: 18px; height: 18px; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--grey-2);
}

/* ---------- breakpoints --------------------------------------------------
   The Accelerator breaks at 1200 (hero stacks), 810 (tablet) and
   below. Same points here. */

@media (max-width: 1199px) {
  .hero { flex-flow: column; align-items: center; text-align: center; padding: 90px var(--pad-x) 70px; gap: 40px; }
  .hero-copy { align-items: center; }
  .hero-sub { max-width: 540px; }
  .section-head h2, .cta-content h2 { font-size: 38px; }
  .loop-grid { grid-template-columns: repeat(2, 1fr); }
  .loop-box:nth-child(3) { border-left: 0; }
  .loop-box:nth-child(n+3) { border-top: 1px solid var(--line); }
  .mc-hud { grid-template-columns: repeat(3, 1fr); }
  .mc-stat:nth-child(4) { border-left: 0; }
  .mc-stat:nth-child(n+4) { border-top: 1px solid var(--line); }
}

@media (max-width: 809px) {
  :root { --pad-x: 20px; --section-py: 40px; }
  .nav-links { display: none; }
  .hero h1 { font-size: 34px; }
  .section-head h2, .cta-content h2 { font-size: 32px; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: 0; }
  .stat-num { font-size: 34px; }
  .loop-grid { grid-template-columns: 1fr; }
  .loop-box { border-left: 0; border-top: 1px solid var(--line); }
  .loop-box:first-child { border-top: 0; }
  .mc-hud { grid-template-columns: repeat(2, 1fr); }
  .mc-stat:nth-child(odd) { border-left: 0; }
  .mc-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .mc-hide-mobile { display: none; }
  .footer-top { gap: 32px; }
  .footer-cols { gap: 40px; }
  .cta { padding: 64px var(--pad-x); }
}

/* ---------- legal pages -------------------------------------------------
   Same face and same rails as the rest of the site. The live page set the
   legal type in IBM Plex Mono; nothing here is mono. */

.legal { padding: 90px var(--pad-x) 100px; }

.legal-head, .legal-body { max-width: 720px; margin: 0 auto; }

.legal-head { margin-bottom: 44px; }

.legal-head h1 {
  margin: 14px 0 8px;
  font-size: 46px;
  font-weight: 500;
  line-height: 1.08;
  text-transform: uppercase;
}

.legal-updated { font-size: 13px; color: var(--grey-2); }

.legal-body p, .legal-body li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--grey);
}

.legal-body > p { margin-bottom: 14px; }

.legal-body h2 {
  margin: 44px 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 20px;
  font-weight: 500;
}

.legal-body ul { margin: 12px 0 14px; padding-left: 20px; }
.legal-body li { margin-bottom: 8px; }

.legal-body strong { font-weight: 500; color: var(--ink); }

.legal-body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-body a:hover { color: var(--grey); }

.legal-back { margin-top: 48px; text-decoration: none; }

@media (max-width: 809px) {
  .legal { padding: 56px var(--pad-x) 72px; }
  .legal-head h1 { font-size: 34px; }
}