/* Motive, copied from the front page: a white pill nav floating on black, a
   two-column hero with the copy left and a bracketed product card right, blue
   gradient primary pill and an outlined secondary, then the white
   "integrated operations platform" band.
   MaisonNeue is licensed, so this uses Inter. The gradient is Motive's real
   primary button, not decoration. */

body{
  background:#000; color:#B9BEC4;
  font-family:"Inter", -apple-system, system-ui, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:1280px; margin:0 auto; padding:0 28px; }

/* the nav is a white pill on the black, not a bar across it */
.navbar{ padding:14px 0 0; }
.nav{
  background:#fff; border-radius:9999px; height:56px;
  padding:0 8px 0 26px; gap:30px;
}
.nav-co{ color:#0A0A0A; font-size:21px; font-style:italic; font-weight:700; letter-spacing:-.03em; }
.nav-links{ gap:24px; }
.nav-links a{ color:#1C1C1C; font-size:14px; font-weight:500; }
.nav-links a:hover{ color:#1A5FD0; }
.nav-r{ gap:20px; }
.nav-r a{ color:#1C1C1C; font-size:14px; font-weight:500; }
.nav-r .pill{
  background:linear-gradient(90deg,#1A5FD0 0%,#4AA3F0 100%);
  color:#fff; border-radius:9999px; padding:11px 22px; font-weight:600; font-size:13.5px;
}

.hero{ padding:76px 0 96px; }
.split{ display:grid; grid-template-columns:1fr 1.06fr; gap:56px; align-items:center; }
.eyebrow{ color:#4AA3F0; margin-bottom:18px; }
h1{ color:#fff; font-size:clamp(34px,3.9vw,52px); font-weight:500; line-height:1.06; letter-spacing:-.035em; margin-bottom:22px; }
.sub{ color:#B9BEC4; font-size:18px; max-width:44ch; margin-bottom:14px; }
/* their subhead underlines the three words it wants you to read */
.sub u{ text-decoration:none; border-bottom:2px solid #4AA3F0; color:#fff; }
.meta{ color:#70777E; font-size:13px; margin-bottom:32px; }
.btn.primary{
  background:linear-gradient(90deg,#1A5FD0 0%,#4AA3F0 100%);
  color:#fff; border-radius:9999px; padding:15px 32px; font-size:15px;
}
.btn.ghost{ border:1px solid #fff; color:#fff; border-radius:9999px; padding:15px 32px; font-size:15px; }
.btn.ghost:hover{ background:rgba(255,255,255,.08); }

/* their product screenshot sits in a bracketed frame. The frame is theirs, the
   contents are his: the photo cannot be used, so the numbers fill it. */
.shot{
  position:relative; border-radius:14px; padding:30px 28px;
  background:linear-gradient(160deg,#0C1119 0%,#0A0D12 60%,#0B1017 100%);
  border:1px solid #171C24;
}
.shot::before, .shot::after{
  content:""; position:absolute; width:26px; height:26px; pointer-events:none;
}
.shot::before{ top:-1px; left:-1px; border-top:2px solid #2F7DE0; border-left:2px solid #2F7DE0; border-radius:14px 0 0 0; }
.shot::after{ bottom:-1px; right:-1px; border-bottom:2px solid #2F7DE0; border-right:2px solid #2F7DE0; border-radius:0 0 14px 0; }
.shot-h{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#767D84;
  padding-bottom:16px; border-bottom:1px solid #171C24; margin-bottom:6px;
}
.statrow{ grid-template-columns:1fr; gap:0; }
.stat{ padding:17px 0; border-bottom:1px solid #171C24; display:flex; align-items:baseline; gap:16px; }
.stat:last-child{ border-bottom:0; }
.stat b{
  font-size:31px; font-weight:600; letter-spacing:-.03em; min-width:136px;
  background:linear-gradient(90deg,#1A5FD0 0%,#4AA3F0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{ color:#8B9199; font-size:13.5px; line-height:1.4; }

/* the white band under their hero */
.platform{ background:#fff; padding:72px 0 80px; text-align:center; }
.platform .lbl{
  display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#6A6A6A; margin-bottom:18px;
}
.platform h2{
  color:#0A0A0A; font-size:clamp(26px,2.9vw,38px); font-weight:500;
  letter-spacing:-.03em; line-height:1.18; max-width:20ch; margin:0 auto 40px;
}
.tiles{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; max-width:920px; margin:0 auto; }
.tile{
  background:#0E1319; border:1px solid #1A2029; border-radius:12px;
  padding:20px 10px; display:flex; flex-direction:column; align-items:center; gap:9px;
  text-decoration:none;
}
.tile svg{ width:18px; height:18px; stroke:#4AA3F0; fill:none; }
.tile span{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#9AA1A9; text-align:center; }
.tile:hover{ border-color:#2F7DE0; }
@media (max-width:860px){ .tiles{ grid-template-columns:repeat(3,1fr); } }

/* their alternating feature rows: dark, a claim left, a bracketed frame right */
.feat-rows{ background:#000; padding:8px 0 88px; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:44px 0; }
.frow.rev .fr-txt{ order:2; }
.fr-eye{ display:block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#4AA3F0; margin-bottom:16px; }
.fr-txt h3{ color:#fff; font-size:clamp(24px,2.6vw,34px); font-weight:500; letter-spacing:-.02em; line-height:1.15; margin-bottom:14px; }
.fr-txt p{ color:#9AA1A9; font-size:16px; line-height:1.6; max-width:44ch; }
.fr-shot{ display:flex; justify-content:center; }
.fr-frame{
  position:relative; width:100%; max-width:400px; border-radius:14px; padding:40px 28px;
  background:linear-gradient(160deg,#0C1119 0%,#0A0D12 60%,#0B1017 100%);
  border:1px solid #171C24; text-align:center;
}
.fr-frame::before, .fr-frame::after{ content:""; position:absolute; width:26px; height:26px; pointer-events:none; }
.fr-frame::before{ top:-1px; left:-1px; border-top:2px solid #2F7DE0; border-left:2px solid #2F7DE0; border-radius:14px 0 0 0; }
.fr-frame::after{ bottom:-1px; right:-1px; border-bottom:2px solid #2F7DE0; border-right:2px solid #2F7DE0; border-radius:0 0 14px 0; }
.fr-frame b{
  display:block; font-size:34px; font-weight:600; letter-spacing:-.03em; margin-bottom:10px;
  background:linear-gradient(90deg,#1A5FD0 0%,#4AA3F0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fr-frame span{ color:#8B9199; font-size:13.5px; }
@media (max-width:860px){
  .frow, .frow.rev{ grid-template-columns:1fr; gap:28px; }
  .frow.rev .fr-txt{ order:0; }
}

/* their dark footer, with a MATT FARROW watermark instead of theirs */
.mfoot{ background:#0A0A0A; border-top:1px solid #171C24; color:#8B9199; }
.mfoot-in{ display:grid; grid-template-columns:1.4fr 2fr; gap:48px; padding:56px 0 40px; }
.mf-mark{ font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace; font-size:15px; font-weight:600; letter-spacing:.04em; color:#fff; margin-bottom:18px; }
.mf-brand p{ font-size:13px; line-height:1.65; color:#767D84; max-width:46ch; margin-bottom:18px; }
.mf-soc{ display:flex; gap:18px; }
.mf-soc a{ color:#fff; font-size:13px; font-weight:500; }
.mf-soc a:hover{ color:#4AA3F0; }
.mf-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.mf-h{ color:#fff; font-size:13px; font-weight:600; margin-bottom:14px; }
.mf-col a{ display:block; color:#9AA1A9; font-size:13.5px; margin-bottom:10px; }
.mf-col a:hover{ color:#fff; }
/* constrained to the same column as .mfoot-in so it aligns, not full-bleed */
.mf-bar{ max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #171C24; padding:18px 28px 24px; font-size:12.5px; color:#767D84; }
.mf-bar a{ color:#fff; }
@media (max-width:720px){
  .mfoot-in{ grid-template-columns:1fr; gap:32px; }
  .mf-cols{ grid-template-columns:1fr 1fr; }
  .mf-bar{ flex-direction:column; align-items:flex-start; gap:8px; }
}

@media (max-width:860px){
  /* the pill cannot hold Contact + LinkedIn + the CTA on a phone: it pushed
     .nav-r past the viewport edge. The CTA is the only one that has to survive. */
  .nav{ height:52px; padding:0 6px 0 18px; gap:12px; }
  .nav-r{ gap:10px; }
  .nav-r a:not(.pill){ display:none; }
  .nav-r .pill{ padding:9px 16px; font-size:12.5px; white-space:nowrap; }
  .nav-co{ font-size:18px; }
  .hero{ padding:48px 0 64px; }
  .btn.primary, .btn.ghost{ padding:13px 24px; font-size:14px; }
}